EXt4.0的动态二级联动

//得到所有的国家
var countrystore=Ext.create('Ext.data.Store',{
fields: ['c_id','c_name','c_type','c_parentid'],
      proxy: {
          type: 'ajax',
        url: 'selectBycountryId?c_type=1',      
        actionMethods: {  
            read: 'POST'  
        },
          reader: {
              type: 'json',
              root: 'machroomlist'
          }
      },
  autoLoad: true    
  //设置数据集是否自动加载数据,如果设置为true或提供了加载的配置对象则数据集在创建后会自动调用load方法加载数据,默认为false
})

//得到所有的城市
var citystore=Ext.create('Ext.data.Store',{
fields: ['c_id','c_name','c_type','c_parentid'],
      proxy: {
          type: 'ajax',
        url: 'selectBycountryId?c_type=2',      
        actionMethods: {  
            read: 'POST'  
        },
          reader: {
              type: 'json',
              root: 'machroomlist'
          }
      },
  autoLoad: true    
})

var locationstore=Ext.create('Ext.data.Store',{
fields: ['c_id','c_name','c_type','c_parentid'],
      proxy: {
          type: 'ajax',
        url: 'selectBycountryId?c_type=3',      
        actionMethods: {  
            read: 'POST'  
        },
          reader: {
              type: 'json',
              root: 'machroomlist'
          }
      },
  autoLoad: true    

})





//主界面

{
    xtype:'combo',    //组合框
    id:'country_id',
    name:'country',
    fieldLabel:'国家',
    store:countrystore,
displayField:'c_name',  //定义要显示的字段
    valueField:'c_id',   //定义值字段
//     queryMode:'local',    //本地模式
//     forceSelection:true,   //要求输入的值必须在列表中存在
    value:1001,     //默认显示的值   用value来设置默认显示的 值
    typeAhead:true,    //允许自动选择匹配剩余的部分文本
    triggerAction:'all', //单击触发按钮显示全部数据
      listeners : {  
'select' : function(combo, record, index) { 
Ext.getCmp('city_id').clearValue();
Ext.getCmp('location_id').clearValue(); 
citystore.load({
params:{
c_parentid:this.getValue()
}
});
}  
}          
               }


//显示界面

Ext.getCmp('location_id').setValue(window.parseInt(obj.location)); 
//因为是String类型的   但是 在combo里面的是integer类型的  (类型不一样)所以不会显示,解决方案,这样的话可以定义一个model 来规定它的类型 










阅读更多
文章标签: ext4 界面 二级联动
个人分类: html/jsp/ext
想对作者说点什么? 我来说一句

Ext4.0的mvc的演示

2011年08月14日 1.48MB 下载

Easyui二级联动

2015年11月18日 801B 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭