extjs中store获取后台数据_Extjs 后台读取数据的下拉框
今天参照项目里的列子写了个远程获取数据的下拉框
js部分代码如下
Ext.onReady(function() {
var newStore = new Ext.data.SimpleStore({
fields : ['key', 'value']
});
new Ext.Panel({
width : 500,
height : 300,
applyTo : 'show',
bodyStyle : 'padding:10px',
layout : 'table',
layoutConfig : {
border : '10px',
columns : 2
},
items : [{
html : '下步工作:'
}, new Ext.form.ComboBox({
id : 'aaa',
store : newStore,
displayField : 'value',
mode : 'local',
typeAhead : true,
forceSelection : true,
triggerAction : 'all',
emptyText : '请选择 .... ',
selectOnFocus : true
})],
tbar : new Ext.Toolbar({
items : [{
xtype : 'button',
text : 'data1',
// cls:'blist',
handler : function(e) {
// init data1
Ext.Ajax.request({
params : {
param : 'a'
},
url : './servlet/DataServlet',
success : function(response) {
newStore.removeAll();
var result = Ext.util.JSON
.decode(response.responseText);
for (var i = 0; i < result.length; i++) {
var item = new Object();
item.key = result[i].key;
item.value = result[i].value;
newStore.add(new Ext.data.Record(item));
}
//清除下拉框已选值，不知道怎么写，谁知道把这代码补下，谢谢
},
failure : function() {
alert("handler failure ");
}
});
}
}, {
xtype : 'button',
text : 'data2',
// cls:'blist',
handler : function() {
// init data2
Ext.Ajax.request({
params : {
param : 'b'
},
url : './servlet/DataServlet',
success : function(response) {
newStore.removeAll();
var result = Ext.util.JSON
.decode(response.responseText);
for (var i = 0; i < result.length; i++) {
var item = new Object();
item.key = result[i].key;
item.value = result[i].value;
newStore.add(new Ext.data.Record(item));
}
//清除下拉框已选值，不知道怎么写，谁知道把这代码补下，谢谢
},
failure : function() {
alert("handler failure ");
}
});
}
}]
})
});
});
后台servlet代码如下
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String param = request.getParameter("param");
StringBuffer jsonStr = new StringBuffer();
if(param.equals("a")){ //返回 A 类
jsonStr.append("[");
jsonStr.append("{key:'a1',value:'jack1'}");
jsonStr.append(",{key:'a2',value:'jack2'}");
jsonStr.append(",{key:'a3',value:'jack3'}");
jsonStr.append(",{key:'a4',value:'jack4'}");
jsonStr.append(",{key:'a5',value:'jack5'}");
jsonStr.append("]");
}else{ //返回 B 类
jsonStr.append("[");
jsonStr.append("{key:'b1',value:'age1'}");
jsonStr.append(",{key:'b2',value:'age2'}");
jsonStr.append(",{key:'b3',value:'age3'}");
jsonStr.append(",{key:'b4',value:'age4'}");
jsonStr.append(",{key:'b5',value:'age5'}");
jsonStr.append("]");
}
request.setAttribute("json", jsonStr.toString());
request.getRequestDispatcher("../json.jsp").forward(request, response);
}
json.jsp代码如下
实现的功能很简单，就是点工具栏上的两个按钮，下拉框分别加载两类不同的数据做为下拉选项。这代码基本上也能实现动态加载下拉框选项数据的功能。
比较糟的是，数据格式用的是 数组+json ，其实我知道数据格式完全可以用数组就好(而 newStore 的类型也换成 Ext.data.ArrayStore),但我不知道具体怎么写，很囧！
先留在这里吧，至少功能实现了，以后再来改
分享到：
2010-10-06 16:02
浏览 10045
评论