日期:2014-05-16 浏览次数:20486 次
只是做了个小例子,数据是写死在Action里面的
完整代码下载地址:http://download.csdn.net/detail/lc448986375/4578239
combobox.js代码:
Ext.onReady( function(){ Ext.define( 'model', { extend:'Ext.data.Model', fields:[ {name:'id',mapping:'id',type:'int'}, {name:'name',mapping:'name',type:'string'} ] } ); //加载省的数据 var storeSheng = Ext.create( 'Ext.data.Store', { model:'model', proxy:{ type:'ajax', url:'city_sheng', reader:{ type:'json', root:'sheng' } }, autoLoad:true, remoteSort:true } ); //加载市的数据 var storeShi = Ext.create( 'Ext.data.Store', { model:'model', proxy:{ type:'ajax', url:'city_shi', reader:{ type:'json', root:'shi' } }, autoLoad: false, remoteSort:true } ); //加载区的数据 var storeQu = Ext.create( 'Ext.data.Store', { model:'model', proxy:{ type:'ajax', url:'city_qu', reader:{ type:'json', root:'qu' } }, autoLoad: false, remoteSort:true } ); Ext.create( 'Ext.panel.Panel', { width:300, height:200, title:'三级联动', renderTo:Ext.getBody(), defaluts:{ autoScroll:true }, items:[ { xtype:"combo", name:'sheng', id:'sheng', fieldLabel:'选择省', displayField:'name', valueField:'id', store:storeSheng, triggerAction:'all', queryMode:'local', selecOnFocus:true, forceSelection:true, allowBlank:false, editable:true, emptyText:'请选择省', blankText:'请选择省', listeners:{ select:function(combo,record,index){ try{ var shi = Ext.getCmp('shi'); var qu = Ext.getCmp('qu'); shi.clearValue(); qu.clearValue(); shi.store.load( { params:{ paramId:combo.getValue() } } ); }catch(ex){ alert("数据加载失败!"); } } } },{ xtype:"combo", name:'shi', id:'shi', fieldLabel:'选择市', displayField:'name', valueField:'id', store:storeShi, triggerAction:'all', queryMode:'local', selecOnFocus:true, forceSelection:true, allowBlank:false, editable:true, emptyText:'请选择市', blankText:'请选择市', listeners:{ select:function(combo,record,index){ try{ var qu = Ext.getCmp('qu'); qu.clearValue(); qu.store.load( { params:{ paramId:combo.getValue() } } ); }catch(ex){ alert("加载数据失败!"); } } } },{ xtype:'combo', name:'qu', id:'qu', store:storeQu, fieldLabel:'选择区', emptyText:'请选择区', allowBlank:false, displayField:'name', queryMode:'local' } ] } ) } )
package action;