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正常出现，数据也好好的放在那里。