1. 怎么运用extjs mvc 与thinkphp实现省市区三级联动
开始自动读省数据,选择省读市数据,选择市读区数据。
有点小BUG:第二次选省时,读市有问题。。。
JS:
[javascript] view plain
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
[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
public class Test2Model
{
public string cname { get; set; }
public int id { get; set; }
}
2. extjs的example怎么使用
1、首先,把example放到你项目的extjs目录下部署起来。
2、然后通过服务器url+/example访问。
3、部分example代码是用php写的,可能需要相应的应用服务器,不过大多数都可以使用的
3. extjs文件中如何调用php
//比如用AJAX
Ext.Ajax.request({
url:"xxx.php",
callback:function(opt,succ,res){
....
}
})
4. extjs里,php生成的验证码怎么点击图片就刷新
给那个图片的panel加上一个监听事件listeners:{ 'click':function(){}}
5. extjs自带例子怎么用
Ext里面自带的例子一般都是数据已预先设定好的。
你可以参考例子的数据定义格式,自己定义一套数据。
例如你说的calendar,它的数据定义在calendar/data/Events.js文件中,你仔细看看就能明白了