ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 複選群組 ( CheckBoxGroup )

此篇文章要利用 Extjs 要讀取 xml 檔案，使用 CheckBoxGroup 來顯示其中的資料，當然，可以把此檔案想像成是 API。

在這邊是以台灣各縣市的名稱為例，做一個文字欄位 ( text ) 與按鈕 ( button )，移到按鈕上方會自動顯示 checkboxgroup，如果滑鼠離開 checkboxgroup 會自動隱藏，而選取 checkboxgroup 內選項時，則會將結果顯示在文字欄位中。

其實這與人力銀行的在某些功能很像，接下來會說明如何使用 checkboxgroup 來建立此功能。

XML 建置與讀取

先建立要讀取出來的資料。

<?xml version="1.0" encoding="utf-8" ?>
<zip>
  <city name="基隆市">  </city>
  <city name="台北市">  </city>
  <city name="新北市">  </city>
  <city name="桃園縣">  </city>
  <city name="新竹市">  </city>
  <city name="新竹縣">  </city>
  <city name="苗栗縣">  </city>
  <city name="台中市">  </city>
  <city name="彰化縣">  </city>
  <city name="南投縣">  </city>
  <city name="雲林縣">  </city>
  <city name="嘉義市">  </city>
  <city name="嘉義縣">  </city>
  <city name="台南市">  </city>
  <city name="高雄市">  </city>
  <city name="屏東縣">  </city>
  <city name="台東縣">  </city>
  <city name="花蓮縣">  </city>
  <city name="宜蘭縣">  </city>
  <city name="澎湖縣">  </city>
  <city name="金門縣">  </city>
  <city name="連江縣">  </city>
</zip>

將內容讀取並存成 array 型態，方便讀取。

var a_zip = [];

$.ajax({
    url: 'http://localhost:8090/Content/xml/zipcode.xml',
    dataType: 'xml',
    error: function () { alert('失敗'); },
    success: function (xml) {
        var cityIndex = 0;
        $(xml).find('city').each(function () {
            var city_name = $(this).attr('name');
            a_zip[cityIndex] = {
                city_name: city_name,
                index: cityIndex
            };
            cityIndex++;
        });
        init();
    }
});

以上有呼叫 init 函式，init 程式碼為：

function init() {
    Ext.onReady(function () {
        // ...
    });
}

這是因為需要等到資料讀取完畢後，才能執行 onReady，不然建構時期發現沒有資料，會產生錯誤。

文字欄位與按鈕

在頁面上建立一個 input， ID 為 targetText 的文字欄位與一個 span，ID 為 targetButton 的按鈕

<input id="targetText" type="text" />
<span id="targetButton"></span>

checkgroup

使用 window 將 checkboxgroup 所有選項包在同一個控制項內，這樣一來只需要對此控制項做隱藏或顯示即可。

因為我們要將它自動隱藏或顯示，則需要將 window 屬性 closable 調整為 false，而在選取時也要將 checkgroup 目前所有選取項目的值，顯示在文字欄位中。

var locationWinF = Ext.create('widget.window', {
    title: '地區選單',
    header: {
        titlePosition: 2,
        titleAlign: 'center'
    },
    style: {
        borderStyle: 'none',
    },
    closable: false,
    items: [
        {
            padding: '10 25 10 25',
            items: [
                {
                    id: 'taiwanCity',
                    xtype: 'checkboxgroup',
                    fieldLabel: '台灣地區',
                    labelAlign: 'top',
                    columns: 4,
                    vertical: true,
                    defaults: {
                        width: 150,
                        listeners: {
                            afterrender: function () {
                                var tempSelf = this;

                                tempSelf.getEl().on('click', function () {
                                    var checkedItem = Ext.getCmp('taiwanCity').getChecked();
                                    var text = '';
                                    Ext.Array.each(checkedItem, function (item) {
                                        text += text == '' ? item.boxLabel : ', ' + item.boxLabel;
                                        
                                    });
                                    $('#targetText').val(text);
                                });
                            }
                        }
                    },
                    items: [
                    ]
                }
            ]
        }
    ]
});

接著要將 array 資料讀取到 checkboxgroup 內

for (var i = 0; i < a_zip.length; i++) {
    Ext.getCmp('taiwanCity').add({ boxLabel: a_zip[i].city_name, inputValue: a_zip[i].index });
}

checkgroup 顯示與隱藏

顯示與隱藏時機，必須使用 window 的 mouseover、mouseleave 事件和 button 的 mouseout、mouseover 的事件，設定兩個全域變數 buttonIsDisplay、windowIsDisplay，來決定 window 是否需要顯示。 button 的事件程式碼：

var button = Ext.create('Ext.Button', {
    text: '選擇縣市',
    renderTo: 'targetButton', // Ext.getBody(),
    listeners: {
        mouseover: {
            fn: function () {
                if (!this.mousedOver) {

                    buttonIsDisplay = true;
                    var tempSelf = this;
                    var tempPosition = tempSelf.getPosition();
                    // X 軸位置
                    tempPosition[0] += 100;
                    // Y 軸位置
                    tempPosition[1] -= 50;
                    locationWinF.setPosition(tempPosition);
                    locationWinF.show();
                }
            }
        },
        mouseout: {
            fn: function () {
                buttonIsDisplay = false;
                console.log(buttonIsDisplay + ' ' + windowIsDisplay);
                if (!buttonIsDisplay && !windowIsDisplay) {
                    locationWinF.hide();
                }
            },
            delay: 500
        },
    },
    handler: function () {
        targetId = 'targetText';

    }
});

window 的事件程式碼：

listeners: {
        afterrender: function(win) {
            win.mon(win.el, {
                mouseover: {
                    fn: function () {

                        if (!this.mousedOver) {
                            
                            windowIsDisplay = true;
                            locationWinF.show();
                        }
                    }
                },
                mouseleave: {
                    fn: function () {
                        windowIsDisplay = false;
                        if (!buttonIsDisplay && !windowIsDisplay)
                            locationWinF.hide();
                    },
                    delay: 500
                }
            });
        }

    },

最後執行後的畫面如下：