第五章 Extjs如何实现“T”型系统首页布局 (入门教程)
看这章前,您有必要去看一下 EXT borderLayout图解(初学有用) 这遍文章。因为实现这种传统的应用系统布局,我们用了Extjs的borderLayout。系统截图如下:
T型首页布局图:
代码如下:
- var WebApp = {};
- WebApp.Desktop = function(){
- this.Banner = new Ext.Panel({
- region : "north",
- margins: '0 0 2 0',
- contentEl : "header",
- height : 62,
- bbar : this.createTopMenu()
- });
- this.WestMenu = new Ext.Panel({
- region : "west",
- margins: '0 5 0 0',
- layout:'accordion',
- width : 200,
- items : [{
- title : "客户管理"
- },{
- title : "报表管理"
- },{
- title : "退货管理"
- }]
- });
- this.MainPanel = new Ext.TabPanel({
- region : "center",
- activeTab: 0,
- items: [{
- title : '信息区',
- frame : true
- }]
- });
- WebApp.Desktop.superclass.constructor.call(this, {
- layout : "border",
- items : [this.Banner, this.WestMenu, this.MainPanel]
- });
- }
- Ext.extend(WebApp.Desktop, Ext.Viewport, {
- createTopMenu : function(){
- return ['->',{
- xtype : "tbitem",
- autoEl : {
- tag: 'img',
- src: 'common/css/images/user_green.gif'
- }
- },{
- xtype : "tbtext",
- text : "用户名:czp"
- },'-',{
- xtype : "tbitem",
- autoEl : {
- tag: 'img',
- src: 'common/css/images/user_green.gif'
- }
- },{
- xtype : "tbtext",
- text : "部门:研发部"
- }]
- }
- });
创建实例:
- Ext.onReady(function(){
- new WebApp.Desktop();
- });
这里无非用到了Extjs 的 border布局罢了。