[轉]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，就可以解析復雜的字段間的組合操作了。