最近在搞EXTJS,当然就会碰到ComboBox 默认值的问题,结果在网上找了一堆,没有一个完善可用的。好不容易搞出来了,特此记录。
var provinceStore = Ext.create('Ext.data.Store', {
storeId : 'provinceStore',
autoSync: true, //同步更新
fields: ['id', 'name', 'code', 'fathercode'],
proxy: {
type: 'ajax',
url: 'areaAction!findProvinces.action',
reader: {
type: 'json',
root: 'list'
}
}
});
var cityStore = Ext.create('Ext.data.Store', {
storeId : 'cityStore',
autoLoad: true, //自动加载数据
autoSync: true, //同步更新
fields: ['id', 'name', 'code', 'fathercode'],
proxy: {
type: 'ajax',
url: 'areaAction!findCitys.action',
reader: {
type: 'json',
root: 'list'
}
}
});
var areaStore = Ext.create('Ext.data.Store', {
storeId : 'areaStore',
autoLoad: true, //自动加载数据
autoSync: true, //同步更新
fields: ['id', 'name', 'code', 'fathercode'],
proxy: {
type: 'ajax',
url: 'areaAction!findAreas.action',
reader: {
type: 'json',
root: 'list'
}
}
});
var provincecombobox = Ext.create('Ext.form.ComboBox', {
name: 'sysuser.province',
store: provinceStore,
valueField: 'code',
displayField: 'name',
typeAhead: true,
queryMode: 'local',
emptyText: '请选择省份',
width:120,
listeners:{
select:{
fn:function(combo,record,index) {
formPanel.form.findField('sysuser.country').clearValue();
formPanel.form.findField('sysuser.city').clearValue();
formPanel.form.findField('sysuser.city').store.load({params:{'fatherID':combo.value}});
}
}
}
});
var citycombobox = Ext.create('Ext.form.ComboBox', {
name: 'sysuser.city',
store: cityStore,
valueField: 'code',
displayField: 'name',
typeAhead: true,
queryMode: 'local',
emptyText: '请选择市',
width:120,
listeners:{
select:{
fn:function(combo,record,index) {
formPanel.form.findField('sysuser.country').clearValue();
formPanel.form.findField('sysuser.country').store.load({params:{'fatherID':combo.value}});
}
}
}
});
var countrycombobox = Ext.create('Ext.form.ComboBox', {
name: 'sysuser.country',
store: areaStore,
valueField: 'code',
displayField: 'name',
typeAhead: true,
queryMode: 'local',
emptyText: '请选择县',
width:120
});
provinceStore.load();
provinceStore.on("load", provinceStoreLoad, provinceStore, true);
function provinceStoreLoad() {
if (provinceStore.getTotalCount() == 1)
{
formPanel.form.findField('sysuser.province').setValue(provinceStore.getAt(0).get('code'));
formPanel.form.findField('sysuser.province').setReadOnly(true);
formPanel.form.findField('sysuser.country').clearValue();
formPanel.form.findField('sysuser.city').clearValue();
formPanel.form.findField('sysuser.city').store.load({params:{'fatherID':provinceStore.getAt(0).get('code')}});
}
}
cityStore.on("load", cityStoreLoad, cityStore, true);
function cityStoreLoad() {
if (cityStore.getTotalCount() == 1)
{
formPanel.form.findField('sysuser.city').setValue(cityStore.getAt(0).get('code'));
formPanel.form.findField('sysuser.city').setReadOnly(true);
formPanel.form.findField('sysuser.country').clearValue();
formPanel.form.findField('sysuser.country').store.load({params:{'fatherID':cityStore.getAt(0).get('code')}});
}
}
areaStore.on("load", areaStoreLoad, areaStore, true);
function areaStoreLoad() {
if (areaStore.getTotalCount() == 1)
{
formPanel.form.findField('sysuser.country').setValue(areaStore.getAt(0).get('code'));
formPanel.form.findField('sysuser.country').setReadOnly(true);
}
}
上述代码,就是省市县的联动。这个是用在用户权限里的,当只查到一个省/市/县的时候,就锁定该省/市/县,并加载下一级的值。
引用的代码:
{
xtype: 'fieldcontainer',
fieldLabel: '区域',
labelWidth:60,
labelStyle : "text-align:right;width:60;",
layout: 'column',
combineErrors: true,
defaultType: 'textfield',
defaults: {
hideLabel: 'true'
},
colspan: 2,
items: [provincecombobox,citycombobox,countrycombobox]
},
需要注意的是:
1、下拉框需要单独定义,不能直接在form里面再定义。
2、先定义store,再定义combobox,然后再给store设置触发事件,顺序不能乱。
3、看到网上很多地方说,必须要设置ID什么的,其实是错的。
以上。