Extjs级联
创建数据
Ext.define('AM.store.Subjects', {
extend : 'Ext.data.Store',
model : 'AM.model.Subject',
autoSync : true,
autoLoad : {
start : 0,
limit : 10
},
pageSize : 10,
proxy : {
type : 'ajax',
url : 'treeAction!getSubject',
reader : {
type : 'json'
,root : 'rows'
,totalProperty : 'results'
}
}
});
创建combox
Ext.define('AM.view.combox.Subject', {
extend:'Ext.form.field.ComboBox',alias:'widget.subject',
typeAhead: false,
valueField : 'id',
displayField : 'text',// 定义要显示的字段
queryMode: 'remote',
store:'Subjects'
});
引用combox
Ext.define('AM.view.combox.MyComboxes', {
extend : 'Ext.panel.Panel',
alias : 'widget.myComboxes',
layout : 'fit',
items : [ {
layout : 'column',
region:'center',
items : [ {
// columnWidth : .5,
items:[{
title : 'combobox级联',
layout : 'column',
xtype : 'fieldset',
collapsible : true,
region:'center',
height:80,
defaults : {
labelAlign : 'right',
labelWidth : 50
},
items:[{
fieldLabel:'科目',
xtype:'subject',
width:150,
listeners:{
select:function(c,r){
var s = Ext.getCmp('c1');
Ext.getCmp('c2').clearValue();
s.clearValue();
s.getStore().load({params:{ch:2,superId:c.getValue()}});
}
}
},{
fieldLabel:'章节',
xtype:'subject',
width:150,
queryMode: 'local',
id:'c1',
store:Ext.create('AM.store.Subjects',{id:'cc'}),
listeners:{
select:function(c,r){
var s = Ext.getCmp('c2');
s.clearValue();
s.getStore().load({params:{ch:3,superId:c.getValue()}});
}
}
},{
fieldLabel:'知识点',
queryMode: 'local',
width:200,
xtype:'subject',
store:Ext.create('AM.store.Subjects'),
id:'c2'
}]
},{
title : 'combobox自动筛选',
layout : 'column',
region:'center',
xtype : 'fieldset',
defaults : {
labelAlign : 'left',
layout : 'anchor',
labelWidth : 80
},
items:[{
fieldLabel:'自动匹配',
xtype: 'combo',
id : 'changebox',
displayField : 'id',
valueField : 'id',
emptyText : '-please-',
triggerAction: 'all',
minListWidth:400,
width :350,
pageSize : 4,
queryMode: 'local',
mode : 'remote',
store : 'QuestionStore',
selectOnFocus : true,
allowBlank : false,
listeners:{
render: function(f){
f.el.on('keyup', function(e){
try {
var params = {superId: f.getRawValue()};
Ext.apply(f.getStore().proxy.extraParams, params);
f.getStore().load();
} catch (ex) {
Ext.MessageBox.alert("错误", "数据加载失败。");
}
});
}
}
}]
}]
}]
,split:true
}]
});