ExtJs基礎知識總結：自定義彈窗和ComboBox自動聯想加載（四）

概述

　　Extjs彈窗可以分為消息彈窗、對話框，這些彈窗的方式ExtJs自帶的Ext.Msg.alert就已經可以滿足簡單消息提示，但是相對復雜的提示，比如如何將Ext.grid.Panel的控件顯示嵌套到widget.window，然后隨着widget.window的show方法展示到頁面上哪？另外一個就是ExtJs中的Combobox下拉控件，如何做到手動輸入，自動聯想手動輸入的內容進行查詢？

一、針對自定義彈窗

　　通過window顯示自定義彈窗，下面有幾種方案思路

思路一、直接將gridpandel填充到widget.window對應的Items

　　代碼如下：

    var InvoiceItemGrid = Ext.create('Ext.grid.Panel', {        
        forceFit: false,
        autoHeight: true,
        autoScroll: true,
        frame: true,
        split: false,
        layout: "fit",
        height:document.documentElement.clientHeight,
        margin: 0,
        store: PrecStore,
        loadMask: { msg: '數據加載中...' },
        columnLines: true,
        //dockedItems: [PTxtInfo],
        //selType: "checkboxmodel", 
        selModel: {
            mode: "multi",//multi,simple,single；默認為多選multi
            checkOnly: false,//如果值為true，則只用點擊checkbox列才能選中此條記錄
            allowDeselect: true,//如果值true，並且mode值為單選（single）時，可以通過點擊checkbox取消對其的選擇
        },
        viewConfig: {
            stripeRows: true,//在表格中顯示斑馬線
            enableTextSelection: true //可以復制單元格文字 "GGXH", "XMSL", "XMDJ", "XMJE", "SL", "SE", "SPBM", "TaxItem"],
        },
        bbar: { xtype: "pagingtoolbar", inputItemWidth: 100, store: PrecStore, displayInfo: true },
        columns: [
           { text: "Id", width: 80, dataIndex: "Id", hidden: true },          
           { text: "商品名稱", width: 80, dataIndex: "XMMC" },
           { text: "單位", width: 80, dataIndex: "DW" },
           { text: "規格型號", width: 120, dataIndex: "GGXH" },
           { text: "數量", width: 80, dataIndex: "XMSL" },
           { text: "項目單價", width: 120, dataIndex: "XMDJ" },
           { text: "項目金額", width: 80, dataIndex: "XMJE" },
           { text: "稅額", width: 80, dataIndex: "SE" },
           { text: "稅率%", width: 80, dataIndex: "SL" },
           { text: "稅目編碼", width: 160, dataIndex: "SPBM" },
        ]
    });
    //主窗體
    var WindItem= Ext.create('widget.window', {
        title: '發票明細',
        closable: true,
        closeAction: 'hide',
        modal: true,
        frame: true,
        layout: 'fit',
        width: 895,
        minWidth: 895,
        height: 430,
        layout: {
            type: 'border',
            padding: 2
        },
        items: [InvoiceItemGrid]
    });

      顯示的結果截圖如下：

      結果分析：grid的標題也沒顯示出來，而且隨着窗體大小的拉伸，內容不會全部顯示。

思路二、直接將gridpandel填充到tabpanel的Items中，然后tabpanel放到widget.window對應的Items

      代碼如下：

    var WindItem= Ext.create('widget.window', {
        title: '發票明細',
        closable: true,
        closeAction: 'hide',
        modal: true,
        frame: true,
        layout: 'fit',
        width: 895,
        minWidth: 895,
        height: 430,
        layout: {
            type: 'border',
            padding: 2
        },
        items: [{
            region: 'center',
            xtype: 'tabpanel',
            items: InvoiceItemGrid
        }]
    });

      顯示的結果截圖如下：

      結果分析：grid上面的那個藍色方塊，是A標簽。ExtJs中的tabpanel根據grid自動生成，顯然也不是最理想結果；

思路三、直接將gridpandel填充到From的Items中，然后From放到tabpanel的Items中，然后tabpanel放到widget.window對應的Items

      代碼如下：

var DataFrom = Ext.create('Ext.form.Panel', {
        hidden: true,
        bodyPadding: 0,
        width: 890,
        header: true,
        layout: 'fit',
        defaults: {
            anchor: '100%'
        },
        defaultType: 'textfield',
        items: [
            InvoiceItemGrid
             ],
        buttons: [{
            text: '關閉',
            handler: function () {
                WindItem.close();
            }
        }]
    });


    var WindItem= Ext.create('widget.window', {
        title: '發票明細',
        closable: true,
        closeAction: 'hide',
        modal: true,
        frame: true,
        layout: 'fit',
        width: 895,
        minWidth: 895,
        height: 430,
        layout: {
            type: 'border',
            padding: 2
        },
        items: [{
            region: 'center',
            xtype: 'tabpanel',
            items: DataFrom
        }]
    });

      顯示的結果截圖如下：

      結果分析：顯然這種方式相對更好點，思路3是根據思路2而來，思路2又是根據思路1而來，所以好的思路還是需要不斷優化和總結。

二、Combobox手動輸入聯想加載

　　所謂自動聯想加載是指Combobox允許手動輸入，根據手動輸入的內容系統自動加載和輸入內容相關聯的內容，Combobox設置為可編輯的時候，每次手動輸入ExtJs自動回到后台請求數據，傳遞參數query作為查詢內容，實現的效果如下：

手動輸入彩電，Combobox下來數據源變動如下

ExtJs代碼如下

//定義的數據源
var ProductLine = new Ext.data.Store({
    fields: ["className", "classID"],
    autoLoad: true,
    proxy: {
        type: "ajax",
        actionMethods: { read: "POST" },
        url: '/urlOrderCV/GetAllProductLine',
        reader: {
            type: 'json',
            rootProperty: 'Data',
            totalProperty: 'TotalCount'
        }
    }
});
///定義的下來列表Combobox
{
    xtype: "combobox",
    store: ProductLine,
    displayField: "className",   //顯示出來的是name 
    valueField: "classID",       //值是id
    fieldLabel: "科級名稱",     //label
    editable: true,        //不可編輯
    minChars: 1,
    id: "classname",           //id
    labelWidth: 50,
    width: 160
}

后台Action的偽代碼如下

public ActionResult GetAllProductLine (string query)
{

    if (string.IsNullOrEmpty(query))
    {
        //查詢全部
    }
    else
    {

        //更加query查詢部分
    }
}