Extjs 2.2 Viewport实用案例之二

刚刚完工一个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% οnmοuseοver="this.stop()"  οnmοuseοut="this.start()" id="notice">'+paoma+'</marquee>'
					}]
				});


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值