Ext(二)布局相关

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);

 

还有不少。。想到再补