省市二级联动,要导入city.js见附件。
Ext.onReady(function () {
var store = new Ext.data.SimpleStore({
fields: ['text', 'city'],
data: citys
});
var linkStore = new Ext.data.SimpleStore({
fields: ['text', 'city'],
data: []
});
var provinceCombo = new Ext.form.ComboBox({
typeAhead: true,
forceSelection: true,
selectOnFocus: true,
minChars: 0,
triggerAction: 'all',
displayField: 'text',
store: store,
fieldLabel: '所在省份',
blankText: '请选择省份',
emptyText: '请选择省份',
editable: false,
anchor: '90%',
mode: 'local',
listeners: {
select: function (combo, record, index) {
//清空先前的市记录
cityCombo.clearValue();
//加载新的市记录
cityCombo.store.loadData(record.data.city);
}
}
});
var cityCombo = new Ext.form.ComboBox({
typeAhead: true,
forceSelection: true,
selectOnFocus: true,
minChars: 0,
triggerAction: 'all',
displayField: 'text',
store: linkStore,
fieldLabel: '所在城市',
blankText: '请选择城市',
emptyText: '请选择城市',
editable: false,
anchor: '90%',
mode: 'local'
});
var simpleForm = new Ext.form.FormPanel({
applyTo: document.body,
labelAlign: 'left',
title: '省份与城市联动的例子',
buttonAlign: 'center',
bodyStyle: 'padding:5px',
width: 600,
frame: true,
labelWidth: 80,
items: [{
layout: 'column',
border: false,
labelSeparator: ':',
items: [{
columnWidth: .5,
layout: 'form',
border: false,
items: [provinceCombo]
},
{
columnWidth: .5,
layout: 'form',
border: false,
items: [cityCombo]
}]
}]
});
});