日期:2014-05-16  浏览次数:20338 次

ExtJS中CardLayout的使用
前面说到了CardLayoutd和TabPanel使用起来感觉布局有点不好调试,或者说这两者结合更不好调试。
    首先,CardLayout是FitLayout的子类,它可以使内部的组件自适应填充,那么内部组件的Width、Height由外部的CardLayout布局的组件决定,布局为CardLayout的组件Width、Height必须确定,准确的是是可以让ExtJs框架去自动计算,那么这时候CardLayout的组件需要有固定的Width、Height,或者放在FitLayout、BorderLayout(region:center)。
   那么,TabPanel中嵌套CardLayout呢?根据上面的约定,Tab中的某个sheet如果嵌套了CardLayout,那么需要为CardLayout开辟出一个可以让ExtJs计算出来的空间。当然这又涉及到了TabPanel和Card的渲染问题,默认情况下(延迟加载)Tab的各个sheetafterRendered后init,那么Tab中的card的render会比外部tab的init要迟些,这样如果需要获取card中的组件需要在card组件afterrendered后进行操作,还有就是数据量太大的话,tab的数据加载最好每个sheet页面afterrender后初始化

   -------------------------------
   以上是总结出来的,代码怎么写应该明白了。下面再说一个TabPanel中的某个sheet是TreeGrid的问题,如果TabPanel中的某个sheet中的数据会变,导致这个TreeGird的列要动态的增删,那么可以将这个sheet下的items(其实就一个)进行removeALL(true)
   这个sheet的布局如果往常的习惯我会设定为borderLayout布局,将这个TreeGrid设置为region:center
   这样做removeAll的话,问题来了,no region center exception,BorderLayout中的region区域的是不允许做removeALL(),并doLayout()的。
   如果按照我上次说的再这个BorderLayout中region区域在放一个Container(FitLayout),将TreeGrid放在这个Container中,做增删没有问题,但是问题又来了
这个Container在做removeALL(),并doLayout()后,TreeGrid中的数据不能显示,当用ff或者goole的浏览器查看元素会发现数据好好的放在那里,然后我们手动改变一下浏览器窗口大小,触发TreeGrid的onResize()方法,这时候数据出现了。当这也解决不了问题啊,最后的方案是:
  TabPanel的某个sheet的布局设置为CardLayout,在这个sheet中放一个TreeGrid,可以替换这个TreeGrid,然后getLayout().setActiveItem(treeGrid);  sheet.doLayout(),接着TreeGrid正常出现,数据也好好的放在那里。