原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
初学者比较容易犯的布局错误.doc
初学者比较容易犯的布局错误
从上图面板中那条横线可以很清楚的看出树面板的容器没有使用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,
文档评论（0）