Panel配置及使用Demo

71 阅读 0 评论 47 点赞

我是靠谱客的博主甜蜜大米，最近开发中收集的这篇文章主要介绍Panel配置及使用Demo，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<html>
<head>

<script src="js/ext-all.js"></script>
<link href="css/ext-theme-gray-all.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
icon:'css/box/l.gif',/*icon图标，在title前面 */
title : 'Ext面板',
width : 600,
height :400,
bodyStyle: {
background: '#ffc',
padding: '10px',
},
disabled:false,//遮屏,默认为false
draggable:true,//允许自由拖动，默认为false
header:true,//是否显示头部，默认为true
hidden:false,
listeners: {
click: {
element: '', //bind to the underlying el property on the panel
fn: function(){alert('quedi');}
}
},

bbar: [{ xtype: 'button', text: '确定'},{ xtype: 'button', text: '取消'}],
/* fbar: [ { type: 'button', text: 'fbar' },{ type: 'button', text: 'fbar2'} ], */
lbar: [ { xtype: 'button', text: 'lbar1'},{ xtype: 'button', text: 'lbar2'},{ xtype: 'button', text: 'lbar3'}],
html: '<b>HELLO我的第一个EXT</b>',/* 面板也可以直接输出html的内容 */
layout : {/* 布局 */
type : 'vbox', // Arrange child items vertically
align : 'stretch', // Each takes up full width
padding : 25/* 内边距（距离左和上的内边距） */
},
items : [{
xtype : 'grid',
columns : [{header : '第一列'},{header : '第二列'}],
store : Ext.create('Ext.data.ArrayStore', {}),
flex : 1 // Use 1/3 of Container's height
}, {
xtype : 'splitter' // A splitter between the two child items
}, {// Details Panel specified as a config object (no xtype defaults to 'panel').
title : '细节',
bodyPadding : 5,
items : [{fieldLabel : '内容',xtype : 'textfield'},
{fieldLabel : '日期',xtype : 'datefield'}],
flex : 2 // Use 2/3 of Container's height
}],
tools:[{
type:'refresh',
tooltip: 'Refresh form Data',
// hidden:true,
handler: function(event, toolEl, panelHeader) {
// refresh logic
}
},
{
type:'help',
tooltip: 'Get Help',
callback: function(panel, tool, event) {
// show help here
}
},
{
type:'search',
tooltip: 'Get Search',
callback: function(panel, tool, event) {
alert("search me");
}
},
],
renderTo : Ext.DomQuery.selectNode("div[@id='as']")/* 为何元素添加该面板 */
});

});

</script>
</head>
<body>
<div id="as" style="margin-left: 100px;"></div>
</body>
</html>