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

 

评论

16 楼 czpae86 2010-04-19  

equalto 写道

这样的extend，不如不要。
看见很多人的extend，不是产生一个“可复用”的组件，而是就做一个专门的功能，对ext的extend，真的是滥用。
如果页面不刷新的话，这样的代码，会致使“类”越来越多。
ext里面专门做了destroy，就是为了回收。

这样写是有原因的，这样的代码结构容易维护，面向对象，当然有类似当然直接复用。如果不这样写难道写成多个function？

如果页面不刷新的话，这样的代码，会致使“类”越来越多？？
这个是什么原理？？

15 楼 czpae86 2010-04-19  

atgoingguoat 写道

楼上的写的好。上次我在 ext.panel 加个 button,被事件的问题搞的要死。

建议先把Extjs里面的例子看了再说。

14 楼 czpae86 2010-04-19  

windlike 写道

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

不用iframe，用autoLoad，或者其他动态加载

13 楼 atgoingguoat 2010-03-27  

楼上的写的好。上次我在 ext.panel 加个 button,被事件的问题搞的要死。

12 楼 equalto 2010-03-24  

这样的extend，不如不要。
看见很多人的extend，不是产生一个“可复用”的组件，而是就做一个专门的功能，对ext的extend，真的是滥用。
如果页面不刷新的话，这样的代码，会致使“类”越来越多。
ext里面专门做了destroy，就是为了回收。

11 楼 jasonw68 2010-03-24  

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

10 楼 pipilu 2010-02-22  

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

9 楼 54powerman 2010-02-20  

学习中，试试看。

8 楼 00915132 2010-02-20  

284630191 写道

smilebug 写道

windlike 写道

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

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

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

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

7 楼 284630191 2010-02-10  

smilebug 写道

windlike 写道

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

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

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

6 楼 liuzk86 2010-02-10  

呵呵,顶...

5 楼 smilebug 2010-02-09  

mr.a 写道

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

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

4 楼 smilebug 2010-02-09  

windlike 写道

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

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

3 楼 mr.a 2010-02-09  

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

2 楼 windlike 2010-02-09  

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

1 楼 kaki 2010-02-09  

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