<1>FitLayout 自适应布局
FitLayout 是布局的基础类,对应面板布局配置项(layout)的名称为 fit,使用 fit 布局将使面板子元素自动充满容器,如果在当前容器中存在多个子面板则只有第一个会被显示。
var store = new Ext.data.SimpleStore( fields: ['id', 'name', 'desc'], var grid = new Ext.grid.GridPanel( viewConfig: {forceFit: true}, {header:'排名', dataIndex: 'id'}, {header:'姓名', dataIndex:'name'}, {header:'球队', dataIndex:'desc'} tbar: new Ext.Toolbar(['添加','修改','删除']), bbar: new Ext.PagingToolbar( <1>layout: 'fit',组件的items只能放一个组件。即使放几个组件,也只有第一个组件会起作用。 <2>items中的表格里千万不要使用aotuHeight:true参数,这个参数会使Fitlayout失效。 var viewport = new Ext.Viewport(
<2>BorderLayout边框布局
因为LitLayout布局每次只能使用一个组件,更复杂的布局它根本无法胜任。
现实中使用最多的就是边框布局,他将整个区域分成东西南北中五部分。除了中间区域其他区域都是可以省略的。
var viewport = new Ext.Viewport( //north和south两个区域只能指定高度值,宽度值由BorderLayout自动计算。 //east和west两个区域只能指定宽度值,高度值由BorderLayout自动计算。 {region:'north',html:'north',height:120}, {region:'south',html:'south',height:30}, {region:'east',html:'east',width:40}, {region:'west',html:'west',width:100}, {region:'center',html:'center'}
使用split并限制他的范围
使用了就可以允许用户自行拖放以改变某一区域的大小。
//north和south两个区域只能上下拖放east和west两个区域只能左右拖放 //minSize:菜单区域的最小范围maxSize:菜单区域的最大范围 {region:'west',html:'west',width:100,split:true,minSize:80,maxSize:120},
子区域的折叠和展开
var viewport = new Ext.Viewport( //north和south两个区域只能指定高度值,宽度值由BorderLayout自动计算。 //east和west两个区域只能指定宽度值,高度值由BorderLayout自动计算。 {region:'north',html:'north',height:120}, {region:'south',html:'south',height:30}, {region:'east',html:'east',width:40}, //collapsible:true激活了west区域的折叠功能。title是必须的,如果没有设置标题,折叠按钮就无法显示。 {region:'west',html:'west',width:100,title:'菜单栏',width:150,collapsible:true}, {region:'center',html:'center'}
<3>制作伸缩菜单的布局 Accordion
设置layout: 'accordion',在使用items添加三个元素,每个子元素都要加上title参数。 var viewport = new Ext.Viewport( titleCollapse: true,//点击标题时就可以折叠面板 animate: true,//展开和折叠都是用动画 activeOnTop: false//默认是false执行展开和折叠操作后子面板的顺序不会变。如果是true展开的子面板总是放在上面。
<4>AnchorLayout 控制位置和大小的布局
AnchorLayout提供了一种比较灵活的布局方式,既可以为items中的每个组件指定与总体布局大小的差值,也可以 设置一个比例使子组件可以根据整体自己计算本身的大小。 anchor:'50% 80%' 宽度占整体宽度的50% 高度占整体高度的80% anchor:'50%' 宽度占整体宽度的50% 高度自动设置为auto anchor:'-50 -100' 距右侧50像素 距底部100像素 <3>使用前提是为作为整体布局的父组件和布局内的子组件都设置好width,height和auchorSize属性 anchor:'r b' 也可写成anchor:'right buttom' var viewport = new Ext.Viewport(
var viewport = new Ext.Viewport( anchorSize:{width:400,height:300},
<5>表单布局 formLayout
var viewport = new Ext.Viewport(
<6>TabPanel
var simple = new Ext.FormPanel( bodyStyle: 'padding:5px 5px 0', defaultType: 'textfield', bodyStyle : "padding:5px;", defaultType : "textfield", defaultType : "textfield", hiddenName : "customer.companyScale", name : "customer.openBank", name : "customer.accountsNo", defaultType : "textarea", name : "customer.otherDesc", simple.render('spinner');
|