初学者比较容易犯的布局错误(手风琴布局)
从上图面板中那条横线可以很清楚的看出树面板的容器没有使用Fit布局造成了树面板没有填满整个布局,而是根据自身大小进行显示。实际的代码:var mainAccirdion = new Ext.Panel({id: "MainAccirdion",region: 'west',split: true,layout: 'accord
·
从上图面板中那条横线可以很清楚的看出树面板的容器没有使用Fit布局造成了树面板没有填满整个布局,而是根据自身大小进行显示。
实际的代码:
var mainAccirdion = new Ext.Panel({
id: "MainAccirdion",
region: 'west',
split: true,
layout: 'accordion',
collapsible: true,
width: 200,
layoutConfig: {
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: '病人报告列表',
items: [{ items: treepanel, flex: 1, layout: 'fit' }]
}
]
})
代码中,首先存在的问题是,使用了不必要的嵌套布局,其实这个在第一层直接使用treepanel就可以了,没必要再套容器。由于套多了一层布局,就造成了虽然在下一层布局使用了Fit布局,但是还是不能填满顶层容器。
在我的书《Ext JS权威指南》的9.8.2节中有一个示例可供参考,代码如下:
Ext.create("Ext.Viewport",{
layout:{type:"border",padding:5},
items:[
//区域定义
{xtype:"container",region:"north",height:30,
html:"<h1>示例9-5 单页面应用中使用Card实现“页面”切换</h1>"
},
{region:"west",split:true,width:200,minWidth:100,
layout:"accordion",
items:[
{title:"产品管理",xtype:"treepanel",
rootVisible: false,
root: {
text: 'root',id: 'rootProduct',
expanded: true,children:[
{text:"产品管理",id:"Product",leaf:true},
{text:"统计管理",id:"Stat",leaf:true}
]
},
listeners:{itemclick:itemclick}
},
{title:"系统管理",xtype:"treepanel",
rootVisible: false,
root: {
text: 'root',id: 'rootSyetem',
expanded: true,children:[
{text:"用户管理",id:"User",leaf:true},
{text:"系统设置",id:"System",leaf:true}
]
},
listeners:{itemclick:itemclick}
}
]
},
{region:"center",layout:'card',border:false,
id:"ContentPage",loader:true,
items:[
{title:"产品管理",id:"ProductContent",tbar:[
{text:"增加"},{text:"编辑"},{text:"删除"}
]}
],
listeners:{
add:function(cmp,con,pos){
if(this.items.length>1){
this.getLayout().setActiveItem(pos);
}
}
}
}
]
})
更多推荐
已为社区贡献4条内容
所有评论(0)