Ext的布局是Ext里面仅次于调试的最让人抓狂的问题,固定的布局往往很prefect,但是一旦牵涉到复杂表单,动态拉伸的情况时,布局就变得复杂了,在实际项目中遇到不少这种情况,流水帐说一遍--
- 几乎所有Ext的问题在官方论坛都有解决方法,布局也不例外
- 不同的Ext版本对控件的自动拉伸等属性有不同的解析,当然,不同的浏览器也有不同的效果--,一般来说,选定一个Ext版本(2.0以上)就可以了,哪个版本都会有让人抓狂的bug
- width:100% 没有任何用处....别用了
- 尽量减少嵌套
- 布局最好都从viewport开始,这样很多拉伸效果都可以处理的很好,而且Ext的布局是层层嵌套的,最外层的布局出问题,里面的控件也会有问题
- GridColumn自适应宽度解决: 固定GridPanel的width 比如600px,按照比例配制每一个Column的宽度,比如300,200,100 ,设置autoExpandColumn,然后在GridPanel外面嵌套一个Panel layout:'fit'
- 当页面初始化的时候 Panel处于折叠状态,里面的全部布局都会丢失,解决办法 hideMode : 'offsets',不过我在viewport South Panel里面再放进一个layout布局(htmleditor+treepanel)的时候 treePanel死活出不来。。至今未解决
- TabPanel里面再嵌套控件的话,需要layoutOnTabChange:true ,不然出不来,但是后果就是每次切换都会重新Layout,丢失了状态
- Form的话,记得加上frame:true
- 表单内的控件最好在render之前就确定,直接添加Item到表单的话 有时会导致布局混乱,这个在官网有无数帖子,各种不同的解决方案都有,个人倾向于在创建的时候就确定好表单内容
- portal中每一个portlet最好都在最外层套一个Panel layout:'fit' 这样调整portlet大小里面的元素就可以自适应了,记得加上draggable : true
- portal保存布局 可以用以下的笨方法(官网有一个state portal plugin 不过我死活跑不起来。。),我的项目只有1个Column,同理多个Column的话可以生成一个数组
var testportal = Ext.select(".x-portal").first(); testportal.select('.x-portal-column').each(function(e) { e.select('.x-grid-panel').each(function(e) { neworders += e.dom.id; neworders += ","; }); neworders = neworders.replace(/.?$/, ''); }); for (var i = 0; i < 5; i++) { newlimits = newlimits + limits[i] + ','; } newlimits = newlimits.substring(0, newlimits.length - 1); stateProvider.set('portalorder', neworders);
还有不少。。想到再补