ext省市縣級聯下拉
阿新 • • 發佈：2019-01-06
做了個省市縣級聯下拉
/** * Created by Sukla on 2017/7/28. */ Ext.define('app.view.common.ssx.Ssx', { extend: 'Ext.container.Container', alias: 'widget.s-s-x', requires: [ 'app.store.Personnel' ], viewModel: { data: { province: '', city: '', county: '' } }, items: [ { xtype:'textfield', bind:{ value:'{province}'+' '+'{city}'+' '+'{county}' } }, //{ // xtype:'label', // bind:{ // text:'{city}' // } //}, //{ // xtype:'label',// bind:{ // text:'{county}' // } //}, { xtype: "combobox", fieldLabel: "選擇省份", name: "provincename", //id: "provincename", //bind:'{province}', labelAlign: "left", emptyText: "請選擇省份", typeAhead: true, queryMode: "local", allowBlank: false, forceSelection: true, //store: { // type: 'province' //}, store: Ext.create("Ext.data.Store", { proxy: { type: 'ajax', url: 'resources/data/province.json' }, root: { text: 'All', id: 'all', expanded: true }, autoLoad: true }), valueField: "key", displayField: "value", listeners: { 'change': function (t, n, o, e) { //alert(temp==null); var rew=this.rawValue; console.log(this.value); var parent=this.ownerCt; parent.getViewModel().set('province',rew);//設定model中的欄位為選中的內容 var temp = n; //Ext.getCmp("cityname").setDisabled(false); //alert(n); //alert(r.pop().get("key")); // if(temp==null){temp=n;}else{temp=n;} this.nextSibling().reset(); this.nextSibling().nextSibling().reset(); var cityurl='resources/data/city'+temp+'.json'; console.log(cityurl) city.proxy.url=cityurl; city.load({ callback: function(records, options, success){ Ext.Msg.alert('info', '載入完畢'); console.log(temp) }, //scope: store, //Scope用來指定回撥函式執行時的作用域 //Add為true時，load()得到的資料會新增在原來的store資料的末尾， //否則會先清除之前的資料，再將得到的資料新增到store中 add: false }); } // , // 'change':function(t,n,o,e){ // alert('change'); // } } }, { xtype: "combobox", fieldLabel: "選擇城市", name: "cityname", //bind:'{city}', //id: "cityname", queryMode: "local", //disabled:true, triggerAction: "all", store:city=Ext.create("Ext.data.Store", { proxy: { type: 'ajax', url: 'resources/data/city.json' }, root: { text: 'All', id: 'all', expanded: true }, autoLoad: false }), //store: { // type: 'city' //}, //store: Ext.create("Ext.data.Store", // { // proxy: { // type: 'ajax', // url: 'resources/data/province.json' // }, // root: { // text: 'All', // id: 'all', // expanded: true // }, // autoLoad: true // }), //store: Ext.create("Ext.data.ArrayStore", // { // fields: ["key", "value"], // data: [["km", "昆明"], ["qj", "曲靖"], ["mz", "蒙自"]] // }), //multiSelect:true, labelAlign: "left", emptyText: "請選擇城市", typeAhead: true, valueField: "key", displayField: "value", forceSelection: true, defaultListConfig: { loadMask: false }, listeners: { 'change': function (t, n, o, e) { //alert(temp==null); var rew=this.rawValue; console.log(this.rawValue); var parent=this.ownerCt; parent.getViewModel().set('city',rew); var temp1 = n?n:''; //Ext.getCmp("cityname").setDisabled(false); //alert(n); //alert(r.pop().get("key")); // if(temp==null){temp=n;}else{temp=n;} this.nextSibling().reset(); var previousSibling=this.previousSibling(); //county= Ext.create("Ext.data.Store", // { // proxy: { // type: 'ajax', // url: 'resources/data/city'+temp+'.json' // }, // root: { // text: 'All', // id: 'all', // expanded: true // }, // autoLoad: false // }); var countyurl='resources/data/county'+temp1+'.json'; console.log(countyurl) county.proxy.url=countyurl; county.load({ callback: function(records, options, success){ Ext.Msg.alert('info', '載入完畢'); console.log(temp1) }, //scope: store, //Scope用來指定回撥函式執行時的作用域 //Add為true時，load()得到的資料會新增在原來的store資料的末尾， //否則會先清除之前的資料，再將得到的資料新增到store中 add: false }); //store1.load({ // callback: function(records, options, success){ // Ext.Msg.alert('info', '載入完畢'); // }, // //scope: store, //Scope用來指定回撥函式執行時的作用域 // //Add為true時，load()得到的資料會新增在原來的store資料的末尾， // //否則會先清除之前的資料，再將得到的資料新增到store中 // add: false //}); } // , // 'change':function(t,n,o,e){ // alert('change'); // } } }, { xtype: "combobox", fieldLabel: "選擇縣市", name: "xianname", //bind:'{county}', //id: "xianname", queryMode: "local", //disabled:true, triggerAction: "all", //store: { // type: 'county' //}, store:county= Ext.create("Ext.data.Store", { proxy: { type: 'ajax', url: 'resources/data/county.json' }, root: { text: 'All', id: 'all', expanded: true }, autoLoad: false }), //store: Ext.create("Ext.data.ArrayStore", // { // fields: ["key", "value"], // data: [["xw", "宣威"], ["bq", "板橋"], ["bs", "寶山"]] // }), //multiSelect:true, labelAlign: "left", emptyText: "請選擇縣", typeAhead: true, valueField: "key", displayField: "value", forceSelection: true, defaultListConfig: { loadMask: false }, listeners: { 'change': function (t, n, o, e) { //alert(temp==null); var rew=this.rawValue; console.log(this.rawValue); var parent=this.ownerCt; parent.getViewModel().set('county',rew); // var temp = n; // //Ext.getCmp("cityname").setDisabled(false); // //alert(n); // //alert(r.pop().get("key")); //// if(temp==null){temp=n;}else{temp=n;} // this.nextSibling().reset(); // var previousSibling=this.previousSibling(); // console.log(previousSibling.store) // //store1.load({ // // callback: function(records, options, success){ // // Ext.Msg.alert('info', '載入完畢'); // // }, // // //scope: store, //Scope用來指定回撥函式執行時的作用域 // // //Add為true時，load()得到的資料會新增在原來的store資料的末尾， // // //否則會先清除之前的資料，再將得到的資料新增到store中 // // add: false // //}); } // , // 'change':function(t,n,o,e){ // alert('change'); // } } } ] })