Ext Borderlayout嵌套布局

最新推荐文章于 2021-02-17 03:10:27 发布

最新推荐文章于 2021-02-17 03:10:27 发布 · 372 阅读

文章标签：

#EXT #编程 #CSS #Google #脚本

Ext 专栏收录该内容

4 篇文章

订阅专栏

本文提供了一个简单的Ext.js代码示例，展示如何使用BorderLayout布局创建基本的界面布局。通过实例代码和说明，帮助开发者快速解决Ext布局问题。

个人感觉Ext中最好用的布局便是Borderlayout布局了，学过java编程做界面的人一定不会陌生，在这里我就不就叙述各个部分的位置和区别了(google一下可能会有好几页),在这里使用一个简单的例子，代码很短，没有任何业务逻辑，只是布局，但通过这个例子相信你可以很快解决Ext布局问题,下面来看一下效果图：

样子还蛮不错的基本的布局思路就是标题为northPanel,westPanel,MainContent,eastPanel的Panel先应用最外层的borderlayout布局，然后对标题为Main Content的Panel在使用boderlayout布局，包含标题为innerCenter,innerBottom的Panel.图片论述就到这了，下面来看一下代码:

Ext.onReady(function() {
			var innerCenterPanel = new Ext.Panel({
						title : 'innerCenter',
						region : 'center'
					});
			var innerBottomPanel = new Ext.Panel({
						title : 'innerBottom',
						region : 'south',
						height : 100
					});
			var innerPanel = new Ext.Panel({
						title : 'Main Content',
						region : 'center',
						margins : '5 0 0 0',
						layout : 'border',
						items : [innerCenterPanel, innerBottomPanel]
					});
			var northPanel = new Ext.Panel({
						title : 'North Panel',
						region : 'north',
						height : 100,
						minSize : 75,
						maxSize : 250,
						margins : '5 5 0 5'
					});
			var westPanel = new Ext.Panel({
						title : 'West Panel',
						region : 'west',
						margins : '5 0 0 5',
						cmargins : '5 0 0 5',
						width : 200,
						minSize : 100,
						maxSize : 300,
						split : true,
						collapsible: true
					});
			var eastPanel = new Ext.Panel({
						title : 'East Panel',
						region : 'east',
						margins : '5 0 0 0',
						width : 200,
						minSize : 100,
						maxSize : 300,
						split : true,
						collapsible: true
					});
			var border = new Ext.Panel({
						title : 'Border Layout',
						renderTo : document.body,
						layout : 'border',
						width : '100%',
						height : 500,
						items : [northPanel,westPanel,innerPanel,eastPanel]
					});
		});

使用此代码你只需要在html引入ext需要的css和两个js,然后在引入这个js脚本就可以使用了，希望对这个例子对大家有所帮助，对了，这个使用的ext版本是2.2(1.0嵌套布局好像要麻烦一些不太一样)