ExtJS4.1一個多表單共用窗口的例子

折騰了一個晚上，終於粗略實現這個功能。

一、原理很簡單，就是單首創建N個表格或表單，固然還要有相應配套的store,而後每次點擊菜單建立一個新對象加載到公共窗口。這裏說的公共窗口其實也不許確，實際上是一種假共用窗口；由於彈出的時候仍是要先賦給一個新建的，惟一的對象，不然窗口仍是會衝突。不過這樣也少敲了很多代碼。

二、深化兩個問題，下一步計劃：

A、怎樣在建立的時候生成窗口類，就好像面向對象裏面的類和對象關係，定義一個公共窗口類，而後在彈出公共窗口的地方建立新對象就ok了；

B、怎麼樣能連窗口裏的子項好比grid或Form甚至store都能抽象出來，就比如定義一個類的外殼，在須要的地方load數據就搞掂。目前看來有點難，由於好比表格裏面的列是每一個窗口都有可能不同的，有沒有像泛型這樣的類，或者是能動態添加列的模板。不過這兩個問題先放這裏。

三、實現步驟：

   1st、建立數據：包括data、store

   2nd、建立內容：grid或者form，這裏我選擇grid

   3rd、建立窗口的殼：這裏用了一個addWin()函數返回一個對象，至關於定義一個類，在須要的地方用這個函數返回一個新窗口賦給具體的對象。這裏說明一哈，window的close方法會自動清理win中組件，好比grid、form、toolbar等，不用本身處理（這個是今晚耗時的主要緣由，一開始走錯路了，百般糾結....）。

   4th、主函數裏面建立菜單，調用PopWin()方法，大功告成！效果圖以下：

A、主菜單，有點寒酸哦，

B、第一個窗口

C、第二個窗口

下面是js碼，純手工敲打，勿拍磚，希冀拋磚引玉：

//本地數據
var data1 = [["產品類型001", "產品類型一", "產品大類1"], ["產品類型002", "產品類型二", "產品大類2"], ["產品類型003", "產品類型三", "產品大類3"]];
var data2 = [["客戶類型001", "客戶類型一"], ["客戶類型002", "客戶類型二"]];

//產品類別表store
var JCZL_CPLBBH = new Ext.data.SimpleStore({
    data:data1,
    fields:["LBBH","LBMC","CPDL"]
});
JCZL_CPLBBH.load();

//客戶類別表store
var JCZL_KHLBBH = new Ext.data.SimpleStore({
    data: data2,
    fields: ["LBBH", "LBMC"]
});
JCZL_KHLBBH.load();

//產品類別表grid
var JCZL_CPLBBHGrid = Ext.create('Ext.grid.Panel', {
    //el: "JCZL_CPZLB_MGrid",
    width: 450,
    height: 550,
    border: false,
    frame: true,
    selType: "rowmodel",
    store: JCZL_CPLBBH,
    viewConfig: {
        columnsText: "顯示/隱藏列",
        sortAscText: "正序排列",
        sortDescText: "倒序排列",
        forceFit: true
    },
    columns: [
        new Ext.grid.RowNumberer({ text: "序號", width: 50 }),
        { header: "類別編號", dataIndex: "LBBH", sortable: true, width: 80 },
        { header: "類別名稱", dataIndex: "LBMC", sortable: true, width: 100 },
        { header: "產品大類", dataIndex: "CPDL", editor: 'textfield', sortable: true, width: 120 }
    ],
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    loadMask: true,
    listeners: {
}
});

//客戶類別表grid
var JCZL_KHLBBHGrid = Ext.create('Ext.grid.Panel', {
    //el: "JCZL_CPZLB_MGrid",
    width: 450,
    height: 550,
    border: false,
    frame: true,
    selType: "rowmodel",
    store: JCZL_KHLBBH,
    viewConfig: {
        columnsText: "顯示/隱藏列",
        sortAscText: "正序排列",
        sortDescText: "倒序排列",
        forceFit: true
    },
    columns: [
        new Ext.grid.RowNumberer({ text: "序號", width: 50 }),
        { header: "類別編號", dataIndex: "LBBH", sortable: true, width: 100 },
        { header: "類別名稱", dataIndex: "LBMC", sortable: true, width: 100 }
    ],
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    loadMask: true,
    listeners: {

    }
});

//生成新窗口方法，返回一個window對象
function addWin(text) {
    var CommonWin = Ext.create('Ext.window.Window', {
        width: 450,
        height: 550,
        region: "west",
        plain: true,
        layout: "fit",
        closeAction: "hide",
        modal: true,
        listeners: {
            hide: function (win, eOpts) {
                //關閉動做自動清除item，也可單獨寫到工具條外面
                win.close();
            }
        }
    });
    return CommonWin;
}


//彈出窗口方法
function PopWin(btn) {
    if (btn.text == "第一個窗口") {
        var first = addWin(btn.text);//定義個窗口防止衝突
        first.add(JCZL_CPLBBHGrid);
        first.show();
    }
    else {
        var second = addWin(btn.text);
        second.add(JCZL_KHLBBHGrid);
        second.show();
    }
}

//Ext入口
Ext.onReady(function () {
    //生成新菜單
    var menu = Ext.create('Ext.toolbar.Toolbar', {
        renderTo: 'menu',
        width: 200,
        height: 30,
        items: [
            { text: "第一個窗口", handler: PopWin },
            { text: "第二個窗口", handler: PopWin }
        ]
    });
});