Extjs 2.2 Viewport实用案例之二

来源:互联网 发布:c语言点滴 编辑:程序博客网 时间:2024/04/30 16:41

刚刚完工一个Extjs项目在此将其Viewport代码总结一下。以备不时之需:

效果截图:



代码如下:

var indexview = new Ext.Viewport({layout: 'border',hideBorders : true,items:[{border : false,region:"north",height:100,frame : true,items : [{frame : true,layout : 'column',items : [{bodyStyle : 'padding:0px;border:1px',columnWidth : .2,html : '<img src="images/smshhis/logo.jpg">'},{bodyStyle : 'padding:0px;border:1px',columnWidth : .8,html : quitbtn+quickstr+curloginer}]}]},{title:"菜单",region:"west",width:200,collapsible : true,collapsed:false, //是否自动折叠layout:'fit',split : true,margins : '0 0 0 5',items : [{layout:'accordion',layoutConfig:{animate:true},items : alltree}]},{border: false,id : "centertab",region:"center",split : true,collapsible : true,layout : 'fit',items: centertabs = new Ext.TabPanel({plugins: new Ext.ux.TabCloseMenu(),//id : 'centertab',deferredRender : false,animScroll : true,autoTabs : true,enableTabScroll : true,autoDestroy : true,border : false,bodyStyle : 'border:0px;',layoutOnTabChange : true,activeTab : 0,items : [{title : '系统信息', frame : true, closable:false, autoScroll : true, border : false, iconCls : 'nav3', bodyStyle : 'border:0px;' }]})},{id : 'downpanel',border:false,region:"south",height:50,title:"通知",collapsible:true,html : '<marquee width=100% onmouseover="this.stop()"  onmouseout="this.start()" id="notice">'+paoma+'</marquee>'}]});