注意传的参数名要与后台一致
开始自动读省数据,选择省读市数据,选择市读区数据。
有点小BUG:第二次选省时,读市有问题。。。
JS:
Ext.require('Ext.*'); Ext.onReady(function () { //定义ComboBox模型 Ext.define('State', { extend: 'Ext.data.Model', fields: [ { type: 'int', name: 'id' }, { type: 'string', name: 'cname' } ] }); // debugger //加载省数据源 var store = Ext.create('Ext.data.Store', { model: 'State', proxy: { type: 'ajax', url: 'GetTest2Data?strAct=sheng' }, autoLoad: true, remoteSort: true }); //加载市数据源 var store1 = Ext.create('Ext.data.Store', { model: 'State', proxy: { type: 'ajax', url: 'GetTest2Data?strAct=shi' }, autoLoad: false, remoteSort: true }); //加载区数据源 var store2 = Ext.create('Ext.data.Store', { model: 'State', proxy: { type: 'ajax', url: 'GetTest2Data?strAct=qu' }, autoLoad: false, remoteSort: true }); Ext.create("Ext.panel.Panel", { renderTo: document.body, width: 290, height: 220, title: "城市三级联动", plain: true, margin: '30 10 0 80', bodyStyle: "padding: 45px 15px 15px 15px;", defaults: { autoScroll: true, bodyPadding: 10 }, items: [{ xtype: "combo", name: 'sheng', id: 'sheng', fieldLabel: '选择省', displayField: 'cname', valueField: 'id', store: store, triggerAction: 'all', queryMode: 'local', selectOnFocus: true, forceSelection: true, allowBlank: false, editable: true, emptyText: '请选择省', blankText: '请选择省', listeners: { select: function (combo, record, index) { try { //userAdd = record.data.name; var parent = Ext.getCmp('shi'); var parent1 = Ext.getCmp("qu"); parent.clearValue(); parent1.clearValue(); parent.store.load({ params: { strParam: this.value} }); } catch (ex) { Ext.MessageBox.alert("错误", "数据加载失败。"); } } } }, { xtype: "combo", name: 'shi', id: 'shi', fieldLabel: '选择市', displayField: 'cname', valueField: 'id', store: store1, triggerAction: 'all', queryMode: 'local', selectOnFocus: true, forceSelection: true, allowBlank: false, editable: true, emptyText: '请选择市', blankText: '请选择市', listeners: { select: function (combo, record, index) { try { //userAdd = record.data.name; var parent = Ext.getCmp("qu"); parent.clearValue(); parent.store.load({ params: { strParam: this.value} }); } catch (ex) { Ext.MessageBox.alert("错误", "数据加载失败。"); } } } }, { xtype: "combo", name: 'qu', id: 'qu', fieldLabel: '选择区', displayField: 'cname', valueField: 'id', store: store2, triggerAction: 'all', queryMode: 'local', selectOnFocus: true, forceSelection: true, allowBlank: false, editable: true, emptyText: '请选择区', blankText: '请选择区' } ] }); });
Controllers里代码:
[AcceptVerbs(HttpVerbs.Get)] public JsonResult GetTest2Data(string strAct, string strParam) { //string strAct = Request["act"]; //string strParam = Request["param"]; List<Test2Model> listModel = new List<Test2Model>(); #region MyRegion if (strAct == "sheng") { listModel.Add(new Test2Model() { cname = "北京市", id = 110000 }); listModel.Add(new Test2Model() { cname = "内蒙古自治区", id = 150000 }); } if (strAct == "shi") { if (strParam == "110000") { listModel.Add(new Test2Model() { cname = "市辖区", id = 110100 }); listModel.Add(new Test2Model() { cname = "市辖县", id = 110200 }); } else if (strParam == "150000") { listModel.Add(new Test2Model() { cname = "呼和浩特市", id = 150100 }); listModel.Add(new Test2Model() { cname = "包头市", id = 150200 }); } } if (strAct == "qu") { if (strParam == "110100") { listModel.Add(new Test2Model() { cname = "朝阳区", id = 110101 }); listModel.Add(new Test2Model() { cname = "昌平区", id = 110102 }); } else if (strParam == "110200") { listModel.Add(new Test2Model() { cname = "密云县", id = 110201 }); listModel.Add(new Test2Model() { cname = "房山县", id = 110202 }); } else if (strParam == "150100") { listModel.Add(new Test2Model() { cname = "回民区", id = 150101 }); listModel.Add(new Test2Model() { cname = "新城区", id = 150102 }); } else if (strParam == "150200") { listModel.Add(new Test2Model() { cname = "青山区", id = 150201 }); listModel.Add(new Test2Model() { cname = "东河区", id = 150202 }); } } #endregion return Json(listModel, JsonRequestBehavior.AllowGet); }
Models代码:
public class Test2Model { public string cname { get; set; } public int id { get; set; } }
效果图:
填充选择:
var authors = Ext.ModelManager.create({ id: 110100, cname: '市辖区' }, 'Model1'); var parent = Ext.getCmp('shi'); parent.setValue(authors);