第五章 Extjs如何实现“T”型系统首页布局 (入门教程)

第五章 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布局罢了。

 

关键是左边的树如何处理？

关键是右边的tabpanel怎么写,里边要不要iframe,页面怎么写,关键的没说出来啊,光介绍布局有啥用

关键是上边的用户名怎么处理?

直接建个tabpanel把你多个组件放到items里面就可以了，至于使不使用iframe这个就要看你怎么设置你的组件了，一般是不需要iframe的
var tabs = new Ext.TabPanel({
    activeTab: 0,
    items:[
        {contentEl:'tab1', title:'Tab 1'},
        {contentEl:'tab2', title:'Tab 2'}
    ]
});

bbar : this.createTopMenu()
这里就是创建用户名那块，你看createTopMenu()方法说白了就是一个数组，里面是些字符串和JSON对象
至于具体含义像'->'（居右对齐）这样的缩写可以在extjs官网查下API，找Toolbar，里面有详细说明
而关于xtype的定义即代表什么组件，可以在Component里找到

你这样是写死的，那我想动态加载呢？

貌似楼主已经注明是新手有用了......
如果要动态在界面出来前异步拿,然后再弄出来,如果是渲染之后的动态就动态的add/remove,这些都extjs都可以做

楼主继续啊。期待更多的文章

提示:EXT-all.js不支持此接口