初学者比较容易犯的布局错误(手风琴布局)
2013-04-07 13:32
162 查看
![](http://img.my.csdn.net/uploads/201304/07/1365312457_3152.jpg)
从上图面板中那条横线可以很清楚的看出树面板的容器没有使用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); } } } } ] })
相关文章推荐
- 初学者比较容易犯的布局错误(手风琴布局)
- 初学者比较容易犯的布局错误(手风琴布局)
- 初学者比较容易犯的布局错误(手风琴布局)
- git初学者容易出现的错误
- hibernate初学者容易犯的错误
- java深入浅出设计模式----简单的工厂模式(一)----初学者容易犯的错误(二)
- C++初学者容易遇到的几个错误
- .NET编程初学者容易犯的错误和容易混淆的概念
- .net程序员比较容易犯的一个js错误 -- js获取当前日期
- 一个比较容易忽略的错误
- 总结Unity 初学者容易犯的编译与运行时错误
- CSS布局时容易出的小错误,导致浏览器不兼容或者各种不显示
- JAVA中Long与Integer比较容易犯的错误
- 总结Unity 初学者容易犯的编译与运行时错误(第三部分)
- JAVA中Long与Integer比较容易犯的错误(比较数据equals)
- JAVA中Long与Integer比较容易犯的错误
- java初学者容易犯的错误
- JAVA中Long与Integer比较容易犯的错误
- JAVA中Long与Integer比较容易犯的错误
- 总结Unity 初学者容易犯的编译与运行时错误(第二部分)