ExtJS利用1个json下的两个节点创建不同的datastore来实现combo列表联动

//  创建两个data.JsonStore对象
var ossVendorStore = new Ext.data.JsonStore({
			autoLoad: false,
			storeId: 'ossVendors',
			fields: ["name", "value"],
			reader:{
				type:'json'
			}
		});

		var ossRegionStore = new Ext.data.JsonStore({
			autoLoad: false,
			storeId: 'ossRegions',
			fields: ["vendor", "regionList"],
			reader:{
				type:'json'
			}
		});

// 读取远程json数据, 远程服务器开启CORS。
		Ext.Ajax.request({
			url:'http://www.abc.com/json/jsondata.json',
			method:'GET',
			success:function(response){
				var retJson = Ext.decode(response.responseText);
				ossVendorStore.loadData(retJson.vendors);
				ossRegionStore.loadData(retJson.regions);
			},
			failure:function(response){
//如果读取失败则尝试读取本地
				Ext.Ajax.request({
					url:'/json/jsondata.json',
					method:'GET',
					success:function(response){
						var retJson = Ext.decode(response.responseText);
						ossVendorStore.loadData(retJson.vendors);
						ossRegionStore.loadData(retJson.regions);
					},
					failure:function(response){
						console.log(response);
						
					}
				});
			}
		});
        //创建临时dataStore
		var ossRegions = new Ext.data.Store({
			autoLoad: true,
			storeId: "ossRegion",
			fields: ['value', 'name']
		});

combo部分代码

items: [
				{
					xtype: "combo",
					name: "ossVendor",
					fieldLabel: _("Vendor"),
					emptyText: _("Please select a OSS cloud vendor"),
					displayField: "name",
					valueField: "value",
					allowBlank: false,
					editable: false,
					forceSelection: true,
					queryMode: "local",
					store: ossVendorStore,
					listeners: {
						scope: me,
						change: function (combo, newVal, oldVal) {
							var regionCombo = Ext.getCmp("ossRegion");
							regionCombo.clearValue();
							ossRegionStore.each(function (record) {
								if (record.data.vendor == newVal) {
									ossRegions.removeAll();
									ossRegions.add(record.data.regionList);
								}
							});
						}
					}
				},
				{
					xtype: "combo",
					name: "ossRegion",
					id: "ossRegion",
					fieldLabel: _("Region"),
					queryMode: "local",
					displayField: "name",
					valueField: "value",
					allowBlank: false,
					editable: false,
					forceSelection: true,
					store: ossRegions

				},

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值