Extjs组件的介绍---面板Panel
组件的例子：
(function(){
Ext.onReady(function(){
//介绍面板
Ext.create("Ext.panel.Panel",{
renderTo:'pan',//依附于哪里
title:'面板头部header',
width:300,
height:200,
html:'面板主区域',
tbar:[{text:'顶部工具栏 topToolbar'}],
bbar:[{text:'底部工具栏 bottonToobar'}]
});
});
})();
效果为：
当把顶部的工具栏上换为：
tbar:[{pressed:true,text:'刷新'}]
在面板中加入一个tools工具类，可以增加组件的使用
(function(){
Ext.onReady(function(){
//介绍面板
Ext.create("Ext.panel.Panel",{
renderTo:'pan',//依附于哪里
title:'hello',
width:300,
height:200,
html:'<h1>hello world</h1>',
tools:[
{id:'save'},
{id:'help',handler:function(){
Ext.Msg.alert('help','pleaseHelpMe!')
}
},
{id:'close'},
],
tbar:[{pressed:true,text:'刷新'}]
});
});
})();
其中我们可以看出我们在？，即在帮助的按钮上加了一个handler，当点击帮助的时候，会执行此函数
选项面板 TabPanel ---- VeiwPort
VeiwPort是代表整个浏览器显示区域，该对象渲染到页面的body区域中，并伴随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例
举例：
(function(){
Ext.onReady(function(){
Ext.create("Ext.container.Viewport",{
enableTabScroll:true,
layout:'fit',
items:[{
title:'panel',
html:'',
bbar:[
{text:'按钮1'},
{text:'按钮2'}
]
}]
});
});
})();
它充满了整个浏览器的页面，所以它主要应用于程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序界面，在ViewPort上常用的布局有fit、border等，当然在需要的时候其他布局也会常用
让我们开一个视觉的享受吧！
举例：
(function(){
Ext.onReady(function(){
Ext.create("Ext.container.Viewport",{
enableTabScroll:true,
layout:'border',//布局
items:[{
title:'面板',
region:'north',
height:50,
html:'<h1>网站后台管理系统</h1>',
},
{
title:'菜单',
region:'west',
width:200,
collapsible:true,
html:'菜单栏'
},
{
xtype:'tabpanel',
region:'center',
items:[
{title:'面板1'},
{title:'面板2'}
]
}
]
});
});
})();
在面板中加入文本框
举例：
(function(){
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
id:'viewport',
title:'第一个xtype应用程序',
width:200,
height:300,
items:[
{xtype:'textfield',fieldLabel:'用户名'},
{xtype:'textfield',fieldLabel:'姓名'},
{xtype:'textfield',fieldLabel:'性别'},
{xtype:'datefield',fieldLabel:'图片'},//效果出不来
{xtype:'button',text:'第一个按钮'}
],
tbar:[
{xtype:'button',text:'顶部'}
],
bbar:[
{xtype:'button',text:'底部'}
],
tools:[
{id:'help',handler:function(){
Ext.Msg.alert('help','pleaseHelpMe!')
}
},
{id:'refresh',hidden:true,handler:function(){
}
},
{id:'search',handler:function(event, target, owner, tool){
owner.child('#refresh').show();
}
}
],
renderTo:'xt'
});
});
})();