Question

怎么运用extjs mvc 与thinkphp实现省市区三级联动

Answer 1

开始自动读省数据，选择省读市数据，选择市读区数据。
有点小BUG：第二次选省时，读市有问题。。。
JS:

[javascript] view plain copy
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里代码：

[csharp] view plain copy
[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代码:

[csharp] view plain copy
public class Test2Model
{
public string cname { get; set; }
public int id { get; set; }
}