[转]ExtJs中使用中碰到的三个问题的解决方法

 这里的经验不是指对这种框架总体上面的一些介绍，只是记录了本月中使用ExtJs中遇到的3个问题的解决方法，这里还是要感谢Extjs论坛的 Animal和Condor，每次在我遇到拦路虎的时候，总能在他俩的Tread中找到对应的解决办法。好了下面来讲遇到的这三个问题：

 

1.penel中item被remove后不能被再次引用：

 

   我遇到的一种问题是，我有2个panel，panel1为主面板，panel2为panel1的子面板，即panel2在panel1的items集合 中，在我的应用中，我需要动态切换panel1的items中的内容，我采用的是panel面板的方法panel1.remove(panel2)，但是 这样操作之后再次调用add(panel2)的话会报extjs的错误，一旦panel2被remove后，它会调用panel2的destory方法进 行销毁，导致下次没办法再调用之前的panel2，而新创建的panel2又不符合要求（没有了之前的状态数据），解决办法如下，code：

panel1.remove(panel2, false);
panel2.hide();

 采用这两句之后，panel2会被从panel1中移除，但又不会被销毁，那么下次还可以通过panel1.add(panel2)把panel2再加进来进行重复使用。

 

2.borderlayout布局中中不能动态替换组件：

 

  呵呵，如果你的主面板的布局是borderlayout，那你不要指望能动态替换主面板的儿子级组件，因为ExtJs的官方文档里明确说了不支持对 borderlayout类型的面板的组件进行动态替换，而且我也尝试了很多次都不成功，但是我们可以换个思路，去动态替换孙子级组件，我们看代码： 

zkyg.main.view = new Ext.Viewport({
    layout: 'border',
    border: false,
    frame: false,
    items: [{
        region: 'north',
        height: 41,
        contentEl: 'header'
    },
               new Ext.Panel({
               region:'center',
               layout:'fit',
               id: 'mainPanel',
               items: [zkyg.main.centerPanel]
        })]
});

//其他的一些业务逻辑-------------------------------------------

if(Ext.getCmp('mainPanel').items != undefined){
    Ext.getCmp('mainPanel').items.each(function(item){
    Ext.getCmp('mainPanel').remove(item, false);
    item.hide();
    });
 }
zkyg.vm.viewPanel.show();
Ext.getCmp('mainPanel').add(zkyg.vm.viewPanel);
Ext.getCmp('mainPanel').doLayout();

 

如果我们直接去替换mainPanel这个面板，明显是不成功的，但是我们可以将mainPanel固定，设置它本身的布局类型为fit类型，然后 去动态替换它的子面板，这样操作是没有问题的，也就是上面讲的borderlayout你不要去替换儿子级组件，而是去替换他的孙子级组件。

 

还有一点，如果存在多层嵌套的面板（上中下三层）要进行动态替换的时候，最好将面板类型设置为Ext.Container类型，因为如果设置成Ext.Panel类型的话，在IE8及以下版本的IE浏览器中存在兼容性问题，add/remove方法可能会不成功。

 

3.store中多个字段如何进行合并：

 

   实际工作中经常要用到把store中多个字段合并的问题（本来我有很多例子，但是一想说起来太麻烦，就不举例了，呵呵），直接看代码吧： 

var vmstore = new Ext.data.JsonStore({
    url: '/vmmanage/query.do',
    root: 'rows',
    fields: [{name:'id',mapping:'id'}, {name: 'displayx',mapping: 'id + "(" + obj.nickname+")"'}]
});

  

  再举个例子：

var reader = new Ext.data.ArrayReader({}, [
    {name: 'full_name', type: 'string', mapping: 'first_name + " " + obj.last_name'},
    {name: 'age'}
]);

var grid = new Ext.grid.GridPanel({
    store: new Ext.data.Store({
        reader: reader,
        data: Ext.grid.dummyData
    }),

    columns: [
        {header: 'Full Name', dataIndex: 'full_name'},
        {header: 'Age', dataIndex:'age'}
    ]
);

 通过mapping字段来构造一个适合自己的reader，就可以解析复杂的字段间的组合操作了。