0%
这是一片思考的空间 -- arthinking
Spring 重构&代码整洁之道 软件设计 JVM 并发编程 数据结构与算法 分布式 存储 网络 微服务 设计模式
Java技术栈 - 涉及Java技术体系

ExtJS获取ComboBox远程数据的JsonReader和本地数据的ArrayStore的写法

使用ArrayStore获取本地数据的方法:

MisTab4.createSexCom = function(){
var com_brandType = new Ext.form.ComboBox({
name:'sex',
id: 'sex',
fieldLabel: '适用性别',
mode:'local',
valueField: 'sexTypeid',
displayField:'sexTypename',
allowBlank:false,
minListWidth:220,
store: new Ext.data.ArrayStore({
id:sexCom,
fields:[
'sexTypeid',
'sexTypename'
],
data:[["MAN","男"],["WOMEN","女"],["NONE","男女不限"]]
}),
listeners :{
expand :function(){
/下拉框展开时重置,否则不能重新加载列表/
Ext.getCmp('sex').reset() ;
}
}
});
return com_brandType;
};

使用JsonReader获取远程数据的方法:

首先创建一个Store 使用HttpProxy代码设置url请求,创建JsonReader解析器,最后使用Record的create方法生成一个构造函数,该函数能产生符合规定的Record对象使用mapping属性把记录的值映射到ComboBox对应的配置项中:

MisTab4.getBrandStore = function(){
var typeStore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({
url:'product/Brand-getAllBrandList.action'
}),
reader:new Ext.data.JsonReader({
totalProperty : 'totalCount',
root : 'brand'
},
Ext.data.Record.create([{name:'brandId',mapping : 'brandId'},
{name:'brandName',mapping : 'brandName'}])),
});
return typeStore;
};

如果返回的数据时一个数组,也可以使用ArrayReader解析:

reader:new Ext.data.ArrayReader({},
[{name:'brandId'},{name:'brandName'} ]),

也可以使用下面更简单的方法创建Store:

var url = "product/Product-selectType.action";
return new Ext.data.JsonStore({
root:'productType',
url: url,
fields: ['id','name']
});

创建ComboBox组件:

MisTab4.createbrandCom = function(){
var brandStore = MisTab4.getBrandStore();
brandStore.load();
var com_brandType = new Ext.form.ComboBox({
name:'brandCode1',
id: 'brandCode1',
hiddenName:'brandCode',
store:brandStore,
fieldLabel: '品 牌',
mode:'remote',
triggerAction:'all',
valueField: 'brandId',
displayField:'brandName',
allowBlank:false,
minListWidth:220
});
return com_brandType;
};

欢迎关注我的其它发布渠道

订阅IT宅
内功修炼
Java技术栈
Java架构杂谈是IT宅精品文章公众号,欢迎订阅:
📄 网络基础知识:两万字长文50+张趣图带你领悟网络编程的内功心法 📄 HTTP发展史:三万长文50+趣图带你领悟web编程的内功心法 📄 HTTP/1.1:可扩展,可靠性,请求应答,无状态,明文传输 📄 HTTP/1.1报文详解:Method,URI,URL,消息头,消息体,状态行 📄 HTTP常用请求头大揭秘 📄 HTTPS:网络安全攻坚战 📄 HTTP/2:网络安全传输的快车道 📄 HTTP/3:让传输效率再一次起飞 📄 高性能网络编程:图解Socket核心内幕以及五大IO模型 📄 高性能网络编程:三分钟短文快速了解信号驱动式IO 📄 高性能网络编程:彻底弄懂IO复用 - IO处理杀手锏,带您深入了解select,poll,epoll 📄 高性能网络编程:异步IO:新时代的IO处理利器 📄 高性能网络编程:网络编程范式 - 高性能服务器就这么回事 📄 高性能网络编程:性能追击 - 万字长文30+图揭秘8大主流服务器程序线程模型
📄 Java内存模型:如果有人给你撕逼Java内存模型,就把这些问题甩给他 📄 一文带你彻底理解同步和锁的本质(干货) 📄 AQS与并发包中锁的通用实现 📄 ReentrantLock介绍与使用 📄 ReentrantReadWriteLock介绍与使用 📄 ReentrantLock的Condition原理解析 📄 如何优雅的中断线程 📄 如何优雅的挂起线程 📄 图解几个好玩的并发辅助工具类 📄 图解BlockingQueue阻塞队列
📄 消息队列那么多,为什么建议深入了解下RabbitMQ? 📄 高并发异步解耦利器:RocketMQ究竟强在哪里? 📄 Kafka必知必会18问:30+图带您看透Kafka
📄 洞悉MySQL底层架构:游走在缓冲与磁盘之间 📄 SQL运行内幕:从执行原理看调优的本质 📄 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法