博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
初学者比较容易犯的布局错误(手风琴布局)
阅读量:7068 次
发布时间:2019-06-28

本文共 2453 字,大约阅读时间需要 8 分钟。

从上图面板中那条横线可以很清楚的看出树面板的容器没有使用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:"

示例9-5 单页面应用中使用Card实现“页面”切换

"        },        {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);                    }                }            }        }    ]})

转载于:https://www.cnblogs.com/hainange/archive/2013/04/07/6334205.html

你可能感兴趣的文章
CentOS 5.x/6.x下安装配置PPTP ×××服务器及常见问题
查看>>
老男孩教育每日一题-第71天—基础命令知识:如何做一个linux版本的回收站
查看>>
paste命令
查看>>
centos安装Mysql环境
查看>>
zabbix通过skype发送报警消息之终结
查看>>
linux下oracle安装
查看>>
redis使用及远程连接
查看>>
org.hibernate.AssertionFailure: null id in xxx (don't flush the Session after an exception occurs)
查看>>
多ip pptp
查看>>
Nagios 请检查HTTP服务器关于该CGI的访问权限设置
查看>>
佛香飘渺-八大处
查看>>
解决cmake编译Mysql 5.6报错CMP0022
查看>>
Python 写的计算指定年指定月日历的脚本
查看>>
LeetCode:Add Two Numbers - 两个链表逐项做带进位的加法生成新链表
查看>>
LeetCode:Super Ugly Number - 超级丑数
查看>>
Windows Phone 8 发布
查看>>
入侵网络视频监控器
查看>>
基于Jpcap的Java ARP断网攻击
查看>>
Jpush设置Alias和Tags问题
查看>>
我的友情链接
查看>>