个人感觉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嵌套布局好像要麻烦一些不太一样)