2014年3月16日 星期日

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

此文章是 ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 複選群組 ( CheckBoxGroup ) 做功能上的延伸,兩層代表多層的意思,這裡繼續延伸成縣市地區選擇後,郵遞區號自動帶出,這種功能在許多地方都看得到。

XML 調整

上一篇文章的 XML 資料來源要加上一些細項資料:
<?xml version="1.0" encoding="utf-8" ?>
<zip>
  <city name="基隆市">
    <area name="仁愛區" zipcode="200"></area>
    <area name="信義區" zipcode="201"></area>
    <area name="中正區" zipcode="202"></area>
    <area name="中山區" zipcode="203"></area>
    <area name="安樂區" zipcode="204"></area>
    <area name="暖暖區" zipcode="205"></area>
    <area name="七堵區" zipcode="206"></area>
  </city>
  <city name="台北市">
    <area name="中正區" zipcode="100"></area>
    <area name="大同區" zipcode="103"></area>
    <area name="中山區" zipcode="104"></area>
    <area name="松山區" zipcode="105"></area>
    <area name="大安區" zipcode="106"></area>
    <area name="萬華區" zipcode="108"></area>
    <area name="信義區" zipcode="110"></area>
    <area name="士林區" zipcode="111"></area>
    <area name="北投區" zipcode="112"></area>
    <area name="內湖區" zipcode="114"></area>
    <area name="南港區" zipcode="115"></area>
    <area name="文山區" zipcode="116"></area>
  </city>
  <city name="新北市">
    <area name="萬里區" zipcode="207"></area>
    <area name="金山區" zipcode="208"></area>
    <area name="板橋區" zipcode="220"></area>
    <area name="汐止區" zipcode="221"></area>
    <area name="深坑區" zipcode="222"></area>
    <area name="石碇區" zipcode="223"></area>
    <area name="瑞芳區" zipcode="224"></area>
    <area name="平溪區" zipcode="226"></area>
    <area name="雙溪區" zipcode="227"></area>
    <area name="貢寮區" zipcode="228"></area>
    <area name="新店區" zipcode="231"></area>
    <area name="坪林區" zipcode="232"></area>
    <area name="烏來區" zipcode="233"></area>
    <area name="永和區" zipcode="234"></area>
    <area name="中和區" zipcode="235"></area>
    <area name="土城區" zipcode="236"></area>
    <area name="三峽區" zipcode="237"></area>
    <area name="樹林區" zipcode="238"></area>
    <area name="鶯歌區" zipcode="239"></area>
    <area name="三重區" zipcode="241"></area>
    <area name="新莊區" zipcode="242"></area>
    <area name="泰山區" zipcode="243"></area>
    <area name="林口區" zipcode="244"></area>
    <area name="蘆洲區" zipcode="247"></area>
    <area name="五股區" zipcode="248"></area>
    <area name="八里區" zipcode="249"></area>
    <area name="淡水區" zipcode="251"></area>
    <area name="三芝區" zipcode="252"></area>
    <area name="石門區" zipcode="253"></area>
  </city>
  <city name="桃園縣">
    <area name="中壢市" zipcode="320"></area>
    <area name="平鎮市" zipcode="324"></area>
    <area name="龍潭鄉" zipcode="325"></area>
    <area name="楊梅市" zipcode="326"></area>
    <area name="新屋鄉" zipcode="327"></area>
    <area name="觀音鄉" zipcode="328"></area>
    <area name="桃園市" zipcode="330"></area>
    <area name="龜山鄉" zipcode="333"></area>
    <area name="八德市" zipcode="334"></area>
    <area name="大溪鎮" zipcode="335"></area>
    <area name="復興鄉" zipcode="336"></area>
    <area name="大園鄉" zipcode="337"></area>
    <area name="蘆竹鄉" zipcode="338"></area>
  </city>
  <city name="新竹市">
    <area name="東區" zipcode="300"></area>
    <area name="北區" zipcode="300"></area>
    <area name="香山區" zipcode="300"></area>
  </city>
  <city name="新竹縣">
    <area name="竹北市" zipcode="302"></area>
    <area name="湖口鄉" zipcode="303"></area>
    <area name="新豐鄉" zipcode="304"></area>
    <area name="新埔鎮" zipcode="305"></area>
    <area name="關西鎮" zipcode="306"></area>
    <area name="芎林鄉" zipcode="307"></area>
    <area name="寶山鄉" zipcode="308"></area>
    <area name="竹東鎮" zipcode="310"></area>
    <area name="五峰鄉" zipcode="311"></area>
    <area name="橫山鄉" zipcode="312"></area>
    <area name="尖石鄉" zipcode="313"></area>
    <area name="北埔鄉" zipcode="314"></area>
    <area name="峨眉鄉" zipcode="315"></area>
  </city>
  <city name="苗栗縣">
    <area name="竹南鎮" zipcode="350"></area>
    <area name="頭份鎮" zipcode="351"></area>
    <area name="三灣鄉" zipcode="352"></area>
    <area name="南庄鄉" zipcode="353"></area>
    <area name="獅潭鄉" zipcode="354"></area>
    <area name="後龍鎮" zipcode="356"></area>
    <area name="通霄鎮" zipcode="357"></area>
    <area name="苑裡鎮" zipcode="358"></area>
    <area name="苗栗市" zipcode="360"></area>
    <area name="造橋鄉" zipcode="361"></area>
    <area name="頭屋鄉" zipcode="362"></area>
    <area name="公館鄉" zipcode="363"></area>
    <area name="大湖鄉" zipcode="364"></area>
    <area name="泰安鄉" zipcode="365"></area>
    <area name="銅鑼鄉" zipcode="366"></area>
    <area name="三義鄉" zipcode="367"></area>
    <area name="西湖鄉" zipcode="368"></area>
    <area name="卓蘭鎮" zipcode="369"></area>
  </city>
  <city name="台中市">
    <area name="中區" zipcode="400"></area>
    <area name="東區" zipcode="401"></area>
    <area name="南區" zipcode="402"></area>
    <area name="西區" zipcode="403"></area>
    <area name="北區" zipcode="404"></area>
    <area name="北屯區" zipcode="406"></area>
    <area name="西屯區" zipcode="407"></area>
    <area name="南屯區" zipcode="408"></area>
    <area name="太平區" zipcode="411"></area>
    <area name="大里區" zipcode="412"></area>
    <area name="霧峰區" zipcode="413"></area>
    <area name="烏日區" zipcode="414"></area>
    <area name="豐原區" zipcode="420"></area>
    <area name="后里區" zipcode="421"></area>
    <area name="石岡區" zipcode="422"></area>
    <area name="東勢區" zipcode="423"></area>
    <area name="和平區" zipcode="424"></area>
    <area name="新社區" zipcode="426"></area>
    <area name="潭子區" zipcode="427"></area>
    <area name="大雅區" zipcode="428"></area>
    <area name="神岡區" zipcode="429"></area>
    <area name="大肚區" zipcode="432"></area>
    <area name="沙鹿區" zipcode="433"></area>
    <area name="龍井區" zipcode="434"></area>
    <area name="梧棲區" zipcode="435"></area>
    <area name="清水區" zipcode="436"></area>
    <area name="大甲區" zipcode="437"></area>
    <area name="外埔區" zipcode="438"></area>
    <area name="大安區" zipcode="439"></area>
  </city>
  <city name="彰化縣">
    <area name="彰化市" zipcode="500"></area>
    <area name="芬園鄉" zipcode="502"></area>
    <area name="花壇鄉" zipcode="503"></area>
    <area name="秀水鄉" zipcode="504"></area>
    <area name="鹿港鎮" zipcode="505"></area>
    <area name="福興鄉" zipcode="506"></area>
    <area name="線西鄉" zipcode="507"></area>
    <area name="和美鎮" zipcode="508"></area>
    <area name="伸港鄉" zipcode="509"></area>
    <area name="員林鎮" zipcode="510"></area>
    <area name="社頭鄉" zipcode="511"></area>
    <area name="永靖鄉" zipcode="512"></area>
    <area name="埔心鄉" zipcode="513"></area>
    <area name="溪湖鎮" zipcode="514"></area>
    <area name="大村鄉" zipcode="515"></area>
    <area name="埔鹽鄉" zipcode="516"></area>
    <area name="田中鎮" zipcode="520"></area>
    <area name="北斗鎮" zipcode="521"></area>
    <area name="田尾鄉" zipcode="522"></area>
    <area name="埤頭鄉" zipcode="523"></area>
    <area name="溪州鄉" zipcode="524"></area>
    <area name="竹塘鄉" zipcode="525"></area>
    <area name="二林鎮" zipcode="526"></area>
    <area name="大城鄉" zipcode="527"></area>
    <area name="芳苑鄉" zipcode="528"></area>
    <area name="二水鄉" zipcode="530"></area>
  </city>
  <city name="南投縣">
    <area name="南投市" zipcode="540"></area>
    <area name="中寮鄉" zipcode="541"></area>
    <area name="草屯鎮" zipcode="542"></area>
    <area name="國姓鄉" zipcode="544"></area>
    <area name="埔里鎮" zipcode="545"></area>
    <area name="仁愛鄉" zipcode="546"></area>
    <area name="名間鄉" zipcode="551"></area>
    <area name="集集鎮" zipcode="552"></area>
    <area name="水里鄉" zipcode="553"></area>
    <area name="魚池鄉" zipcode="555"></area>
    <area name="信義鄉" zipcode="556"></area>
    <area name="竹山鎮" zipcode="557"></area>
    <area name="鹿谷鄉" zipcode="558"></area>
  </city>
  <city name="雲林縣">
    <area name="斗南鎮" zipcode="630"></area>
    <area name="大埤鄉" zipcode="631"></area>
    <area name="虎尾鎮" zipcode="632"></area>
    <area name="土庫鎮" zipcode="633"></area>
    <area name="褒忠鄉" zipcode="634"></area>
    <area name="東勢鄉" zipcode="635"></area>
    <area name="台西鄉" zipcode="636"></area>
    <area name="崙背鄉" zipcode="637"></area>
    <area name="麥寮鄉" zipcode="638"></area>
    <area name="斗六市" zipcode="640"></area>
    <area name="林內鄉" zipcode="643"></area>
    <area name="古坑鄉" zipcode="646"></area>
    <area name="莿桐鄉" zipcode="647"></area>
    <area name="西螺鎮" zipcode="648"></area>
    <area name="二崙鄉" zipcode="649"></area>
    <area name="北港鎮" zipcode="651"></area>
    <area name="水林鄉" zipcode="652"></area>
    <area name="口湖鄉" zipcode="653"></area>
    <area name="四湖鄉" zipcode="654"></area>
    <area name="元長鄉" zipcode="655"></area>
  </city>
  <city name="嘉義市">
    <area name="東區" zipcode="600"></area>
    <area name="西區" zipcode="600"></area>
  </city>
  <city name="嘉義縣">
    <area name="番路鄉" zipcode="602"></area>
    <area name="梅山鄉" zipcode="603"></area>
    <area name="竹崎鄉" zipcode="604"></area>
    <area name="阿里山鄉" zipcode="605"></area>
    <area name="中埔鄉" zipcode="606"></area>
    <area name="大埔鄉" zipcode="607"></area>
    <area name="水上鄉" zipcode="608"></area>
    <area name="鹿草鄉" zipcode="611"></area>
    <area name="太保市" zipcode="612"></area>
    <area name="朴子市" zipcode="613"></area>
    <area name="東石鄉" zipcode="614"></area>
    <area name="六腳鄉" zipcode="615"></area>
    <area name="新港鄉" zipcode="616"></area>
    <area name="民雄鄉" zipcode="621"></area>
    <area name="大林鎮" zipcode="622"></area>
    <area name="溪口鄉" zipcode="623"></area>
    <area name="義竹鄉" zipcode="624"></area>
    <area name="布袋鎮" zipcode="625"></area>
  </city>
  <city name="台南市">
    <area name="中西區" zipcode="700"></area>
    <area name="東區" zipcode="701"></area>
    <area name="南區" zipcode="702"></area>
    <area name="北區" zipcode="704"></area>
    <area name="安平區" zipcode="708"></area>
    <area name="安南區" zipcode="709"></area>
    <area name="永康區" zipcode="710"></area>
    <area name="歸仁區" zipcode="711"></area>
    <area name="新化區" zipcode="712"></area>
    <area name="左鎮區" zipcode="713"></area>
    <area name="玉井區" zipcode="714"></area>
    <area name="楠西區" zipcode="715"></area>
    <area name="南化區" zipcode="716"></area>
    <area name="仁德區" zipcode="717"></area>
    <area name="關廟區" zipcode="718"></area>
    <area name="龍崎區" zipcode="719"></area>
    <area name="官田區" zipcode="720"></area>
    <area name="麻豆區" zipcode="721"></area>
    <area name="佳里區" zipcode="722"></area>
    <area name="西港區" zipcode="723"></area>
    <area name="七股區" zipcode="724"></area>
    <area name="將軍區" zipcode="725"></area>
    <area name="學甲區" zipcode="726"></area>
    <area name="北門區" zipcode="727"></area>
    <area name="新營區" zipcode="730"></area>
    <area name="後壁區" zipcode="731"></area>
    <area name="白河區" zipcode="732"></area>
    <area name="東山區" zipcode="733"></area>
    <area name="六甲區" zipcode="734"></area>
    <area name="下營區" zipcode="735"></area>
    <area name="柳營區" zipcode="736"></area>
    <area name="鹽水區" zipcode="737"></area>
    <area name="善化區" zipcode="741"></area>
    <area name="大內區" zipcode="742"></area>
    <area name="山上區" zipcode="743"></area>
    <area name="新市區" zipcode="744"></area>
    <area name="安定區" zipcode="745"></area>
  </city>
  <city name="高雄市">
    <area name="新興區" zipcode="800"></area>
    <area name="前金區" zipcode="801"></area>
    <area name="苓雅區" zipcode="802"></area>
    <area name="鹽埕區" zipcode="803"></area>
    <area name="鼓山區" zipcode="804"></area>
    <area name="旗津區" zipcode="805"></area>
    <area name="前鎮區" zipcode="806"></area>
    <area name="三民區" zipcode="807"></area>
    <area name="楠梓區" zipcode="811"></area>
    <area name="小港區" zipcode="812"></area>
    <area name="左營區" zipcode="813"></area>
    <area name="仁武區" zipcode="814"></area>
    <area name="大社區" zipcode="815"></area>
    <area name="岡山區" zipcode="820"></area>
    <area name="路竹區" zipcode="821"></area>
    <area name="阿蓮區" zipcode="822"></area>
    <area name="田寮區" zipcode="823"></area>
    <area name="燕巢區" zipcode="824"></area>
    <area name="橋頭區" zipcode="825"></area>
    <area name="梓官區" zipcode="826"></area>
    <area name="彌陀區" zipcode="827"></area>
    <area name="永安區" zipcode="828"></area>
    <area name="湖內區" zipcode="829"></area>
    <area name="鳳山區" zipcode="830"></area>
    <area name="大寮區" zipcode="831"></area>
    <area name="林園區" zipcode="832"></area>
    <area name="鳥松區" zipcode="833"></area>
    <area name="大樹區" zipcode="840"></area>
    <area name="旗山區" zipcode="842"></area>
    <area name="美濃區" zipcode="843"></area>
    <area name="六龜區" zipcode="844"></area>
    <area name="內門區" zipcode="845"></area>
    <area name="杉林區" zipcode="846"></area>
    <area name="甲仙區" zipcode="847"></area>
    <area name="桃源區" zipcode="848"></area>
    <area name="那瑪夏區" zipcode="849"></area>
    <area name="茂林區" zipcode="851"></area>
    <area name="茄萣區" zipcode="852"></area>
  </city>
  <city name="屏東縣">
    <area name="屏東市" zipcode="900"></area>
    <area name="三地門鄉" zipcode="901"></area>
    <area name="霧台鄉" zipcode="902"></area>
    <area name="瑪家鄉" zipcode="903"></area>
    <area name="九如鄉" zipcode="904"></area>
    <area name="里港鄉" zipcode="905"></area>
    <area name="高樹鄉" zipcode="906"></area>
    <area name="鹽埔鄉" zipcode="907"></area>
    <area name="長治鄉" zipcode="908"></area>
    <area name="麟洛鄉" zipcode="909"></area>
    <area name="竹田鄉" zipcode="911"></area>
    <area name="內埔鄉" zipcode="912"></area>
    <area name="萬丹鄉" zipcode="913"></area>
    <area name="潮州鎮" zipcode="920"></area>
    <area name="泰武鄉" zipcode="921"></area>
    <area name="來義鄉" zipcode="922"></area>
    <area name="萬巒鄉" zipcode="923"></area>
    <area name="崁頂鄉" zipcode="924"></area>
    <area name="新埤鄉" zipcode="925"></area>
    <area name="南州鄉" zipcode="926"></area>
    <area name="林邊鄉" zipcode="927"></area>
    <area name="東港鎮" zipcode="928"></area>
    <area name="琉球鄉" zipcode="929"></area>
    <area name="佳冬鄉" zipcode="931"></area>
    <area name="新園鄉" zipcode="932"></area>
    <area name="枋寮鄉" zipcode="940"></area>
    <area name="枋山鄉" zipcode="941"></area>
    <area name="春日鄉" zipcode="942"></area>
    <area name="獅子鄉" zipcode="943"></area>
    <area name="車城鄉" zipcode="944"></area>
    <area name="牡丹鄉" zipcode="945"></area>
    <area name="恆春鎮" zipcode="946"></area>
    <area name="滿州鄉" zipcode="947"></area>
  </city>
  <city name="台東縣">
    <area name="台東市" zipcode="950"></area>
    <area name="綠島鄉" zipcode="951"></area>
    <area name="蘭嶼鄉" zipcode="952"></area>
    <area name="延平鄉" zipcode="953"></area>
    <area name="卑南鄉" zipcode="954"></area>
    <area name="鹿野鄉" zipcode="955"></area>
    <area name="關山鎮" zipcode="956"></area>
    <area name="海端鄉" zipcode="957"></area>
    <area name="池上鄉" zipcode="958"></area>
    <area name="東河鄉" zipcode="959"></area>
    <area name="成功鎮" zipcode="961"></area>
    <area name="長濱鄉" zipcode="962"></area>
    <area name="太麻里鄉" zipcode="963"></area>
    <area name="金峰鄉" zipcode="964"></area>
    <area name="大武鄉" zipcode="965"></area>
    <area name="達仁鄉" zipcode="966"></area>
  </city>
  <city name="花蓮縣">
    <area name="花蓮市" zipcode="970"></area>
    <area name="新城鄉" zipcode="971"></area>
    <area name="秀林鄉" zipcode="972"></area>
    <area name="吉安鄉" zipcode="973"></area>
    <area name="壽豐鄉" zipcode="974"></area>
    <area name="鳳林鎮" zipcode="975"></area>
    <area name="光復鄉" zipcode="976"></area>
    <area name="豐濱鄉" zipcode="977"></area>
    <area name="瑞穗鄉" zipcode="978"></area>
    <area name="萬榮鄉" zipcode="979"></area>
    <area name="玉里鎮" zipcode="981"></area>
    <area name="卓溪鄉" zipcode="982"></area>
  </city>
  <city name="宜蘭縣">
    <area name="宜蘭市" zipcode="260"></area>
    <area name="頭城鎮" zipcode="261"></area>
    <area name="礁溪鄉" zipcode="262"></area>
    <area name="壯圍鄉" zipcode="263"></area>
    <area name="員山鄉" zipcode="264"></area>
    <area name="羅東鎮" zipcode="265"></area>
    <area name="三星鄉" zipcode="266"></area>
    <area name="大同鄉" zipcode="267"></area>
    <area name="五結鄉" zipcode="268"></area>
    <area name="冬山鄉" zipcode="269"></area>
    <area name="蘇澳鎮" zipcode="270"></area>
    <area name="南澳鄉" zipcode="272"></area>
  </city>
  <city name="澎湖縣">
    <area name="馬公市" zipcode="880"></area>
    <area name="西嶼鄉" zipcode="881"></area>
    <area name="望安鄉" zipcode="882"></area>
    <area name="七美鄉" zipcode="883"></area>
    <area name="白沙鄉" zipcode="884"></area>
    <area name="湖西鄉" zipcode="885"></area>
  </city>
  <city name="金門縣">
    <area name="金沙鎮" zipcode="890"></area>
    <area name="金湖鎮" zipcode="891"></area>
    <area name="金寧鄉" zipcode="892"></area>
    <area name="金城鎮" zipcode="893"></area>
    <area name="烈嶼鄉" zipcode="894"></area>
    <area name="烏坵鄉" zipcode="896"></area>
  </city>
  <city name="連江縣">
    <area name="南竿鄉" zipcode="209"></area>
    <area name="北竿鄉" zipcode="210"></area>
    <area name="莒光鄉" zipcode="211"></area>
    <area name="東引鄉" zipcode="212"></area>
  </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');

            var t_area = [];
            var areaIndex = 0;

            /* 讀取 city 下 area 資料 */
            $(this).find('area').each(function () {
                var area_name = $(this).attr('name');
                var area_zipcode = $(this).attr('zipcode');

                t_area[areaIndex] = {
                    area_name: area_name,
                    area_zipcode: area_zipcode
                };

                areaIndex ++;
            });

            a_zip[cityIndex] = {
                city_name: city_name,
                index: cityIndex,
                /* 將 area 資料放在此 */
                area: t_area
            };

            cityIndex++;
        });
        init();
    }
});

介面

在顯示介面上,我將它改為三格,分別顯示郵遞區號、城市、地區
<input id="targetZipCode" style="width: 35px;" type="text" />
<input id="targetCity" style="width: 60px;" type="text" />
<input id="targetArea" style="width: 60px;" type="text" />
<span id="targetButton"></span>


Button

此處在修改時必須多設置一個變數 subWindowIsDisplay,判斷子視窗是否在顯示情況。

在按鈕的 mouseover 事件中,母視窗在顯示時機必須多判斷 subWindowIsDisplay 這個變數,所以整個 Button 的程式碼如下
var subWindowIsDisplay = false;

var button = Ext.create('Ext.Button', {
    text: '選擇縣市',
    renderTo: 'targetButton',
    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();
                }
            },
            
            // delay: 2000
        },
        mouseout: {
            fn: function () {
                buttonIsDisplay = false;
                
                if (!buttonIsDisplay && !windowIsDisplay && !subWindowIsDisplay) {
                    locationWinS.hide();
                    locationWinF.hide();
                }
            },
            delay: 500
        },
    }
});

windows

在 Windows 的 mouseleave 事件也要稍微做修改
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 && !subWindowIsDisplay) {
                        locationWinF.hide();
                        locationWinS.hide();
                    }
                },
                delay: 500
            }
        });
    }

},

Windows 針對每一個選項都設置一個 mouseover 的事件,當滑鼠移到選項上,就必須帶出該城市下的地區,剛剛上面程式碼已經有將此轉換成物件了,在 a_zip[tIndex].area 下, locationWinS 為子視窗物件、townMenu 為城市控制項 ID,稍後會提到。


items: [
    {
        id: 'taiwanCity',
        xtype: 'checkboxgroup',
        fieldLabel: '台灣地區',
        labelAlign: 'top',
        columns: 4,
        vertical: true,
        defaults: {
            width: 150,
            listeners: {
                afterrender: function () {
                    var tempSelf = this;
                    tempSelf.getEl().on('mouseout', function () {
                        if (!tempSelf.checked) {
                            tempSelf.getEl().setStyle('background-color', '')
                        }
                    });
                    tempSelf.getEl().on('mouseover', function () {
                        tempSelf.getEl().setStyle('background-color', 'cornflowerblue')
                        var tempPosition = tempSelf.getPosition();

                        clearTimeout(colock);
                        colock = setTimeout(function () {
                            
                            if (cityValue != tempSelf.inputValue) {
                                tempPosition[0] += 100;
                                tempPosition[1] -= 50;
                                locationWinS.setPosition(tempPosition);
                                cityValue = tempSelf.inputValue;
                                var tIndex = cityValue;
                                Ext.getCmp('townMenu').removeAll();
                                for (var i = 0; i < a_zip[tIndex].area.length; i++) {
                                    Ext.getCmp('townMenu').add({ boxLabel: a_zip[tIndex].area[i].area_name, name: 'TownId', inputValue: i })
                                }
                            }
                            locationWinS.show();
                        }, 100)
                    });
                }
            }
        }
    
    }
]

sub windows

子視窗要做的事情就是在選項被點擊後,將資料帶到文字欄位內。
var locationWinS = Ext.create('widget.window', {
    header: false,
    style: {
        borderStyle: 'none',
    },
    closable: false,
    closeAction: 'hide',
    items: [
        {
            padding: '10 25 10 25',
            border: false,
            items: [
                {
                    id: 'townMenu',
                    xtype: 'checkboxgroup',
                    columns: 2,
                    vertical: true,
                    defaults: {
                        width: 110,
                        listeners: {

                            afterrender: function () {
                                var tempSelf = this;
                                tempSelf.getEl().on('mouseout', function () {
                                    if (!tempSelf.checked) {
                                        tempSelf.getEl().setStyle('background-color', '')
                                    }

                                });

                                tempSelf.getEl().on('mouseleave', function () {
                                    subWindowIsDisplay = false;
                                });
                                tempSelf.getEl().on('mouseover', function () {
                                    tempSelf.getEl().setStyle('background-color', 'cornflowerblue')

                                    subWindowIsDisplay = true;
                                    

                                }, 500);

                                this.getEl().on('click', function () {

                                    $('#targetZipCode').val(
                                        a_zip[cityValue].area[tempSelf.inputValue].area_zipcode
                                        );
                                    $('#targetCity').val(a_zip[cityValue].city_name);
                                    $('#targetArea').val(a_zip[cityValue].area[tempSelf.inputValue].area_name);

                                    cityValue = -1;
                                    locationWinF.hide();
                                    locationWinS.hide();
                                    
                                });
                            }
                        }
                    }
                }
            ]
        }
    ]

});

最後執行後畫面如下


沒有留言 :

張貼留言

Related Posts Plugin for WordPress, Blogger...