本文介绍了五种使用ExtJS框架填充ComboBox组件的方法，包括数组填充、本地Json数据填充、动态Json数据填充等，并提供了详细的代码示例。
我所收集的几种ComboBox填充方式：
第一种：数组
var data = [['1', 'Lislie', 'D005', 'male'],
['2', 'Merry', 'D004', 'female'],
['3', 'Edison', 'D003', 'male'], ['4', 'Mark', 'D002', 'male'],
['5', 'Leeon', 'D001', 'male']];
// 格式化数据
var ds = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(data), // 数据源
reader : new Ext.data.ArrayReader({}, [ // 如何解析
{
name : 'id'
}, {
name : 'name'
}, {
name : 'depno'
}, {
name : 'sex'
}])
});
ds.load(); //这一句很关键，表是打开页面就加载
this.storeList = new Ext.form.ComboBox({
store : ds,
fieldLabel : 'dfsfsd',
allowBlank : false,
forceSelection : true,
valueField : 'id', // option.value
displayField : 'name', // option.text
typeAhead : true,
triggerAction : 'all',
emptyText : 'Select a store...',
mode : 'local', //如果前面用了load，那么这里就应该用local,默认为remote
selectOnFocus : true,
width : 135
});
第二种：本地(内存)简单Json数据
var folders = [{
'folderId' : '1',
'folderName' : '收信箱'
}, {
'folderId' : '2',
'folderName' : '发信箱'
}];
//用于下拉列表的store
var foldersJsonStore = new Ext.data.SimpleStore({
fields: [{
name: 'folderId',
mapping: 'folderId'
}, {
name: 'folderName',
mapping: 'folderName'
}],
data: folders
});
foldersJsonStore.loadData(folders);
this.combo = new Ext.form.ComboBox({
fieldLabel : '文件夹',
name : 'folderMoveTo',
displayField : 'folderName',
valueField : 'folderId',
typeAhead : true, // 自动将第一个搜索到的选项补全输入
triggerAction : 'all',
emptyText : '全部',
selectOnFocus : true,
forceSelection : true,
store : foldersJsonStore,
typeAhead : true,
lazyInit : false,
lazyRender : false,
mode : 'local'
});
第三种：动态简单Json数据
// 用于下拉列表的store
var foldersJsonStore = new Ext.data.SimpleStore({
proxy : new Ext.data.HttpProxy({
url : './jsp/comboxdata.jsp'
}), // 数据源
fields : [{
name : 'folderId',
mapping : 'folderId'
}, {
name : 'folderName',
mapping : 'folderName'
}]
});
this.combo = new Ext.form.ComboBox({
fieldLabel : '文件夹',
name : 'folderMoveTo',
displayField : 'folderName',
valueField : 'folderId',
typeAhead : true, // 自动将第一个搜索到的选项补全输入
triggerAction : 'all',
emptyText : '全部',
selectOnFocus : true,
forceSelection : true,
store : foldersJsonStore,
typeAhead : true,
lazyInit : false,
lazyRender : false,
mode : 'remote' //这里的参数要注意
});
comboxdata.jsp:
<%@ page language="java"
import="java.util.*,com.googlecode.jsonplugin.JSONUtil"%>
<%
List list = new ArrayList();
HashMap hm = new HashMap();
hm.put("folderId", "1");
hm.put("folderName", "11111111111");
list.add(hm);
hm = new HashMap();
hm.put("folderId", "2");
hm.put("folderName", "2222222222222");
list.add(hm);
try {
String json = JSONUtil.serialize(list);
out.print(json);
} catch (Exception ex) {
ex.printStackTrace();
}
%>
第四种：JsonReader读取到的数据
// 用于下拉列表的store
var foldersJsonStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : './jsp/comboxdata.jsp'
}), // 数据源
reader : new Ext.data.JsonReader({}, ['folderId', 'folderName'])
});
this.combo = new Ext.form.ComboBox({
fieldLabel : '文件夹',
name : 'folderMoveTo',
displayField : 'folderName',
valueField : 'folderId',
typeAhead : true, // 自动将第一个搜索到的选项补全输入
triggerAction : 'all',
emptyText : '全部',
selectOnFocus : true,
forceSelection : true,
store : foldersJsonStore,
typeAhead : true,
lazyInit : false,
lazyRender : false,
mode : 'remote'
});
comboxdata.jsp:
<%@ page language="java"
import="java.util.*,com.googlecode.jsonplugin.JSONUtil"%>
<%
List list = new ArrayList();
HashMap hm = new HashMap();
hm.put("folderId", "1");
hm.put("folderName", "11111111111");
list.add(hm);
hm = new HashMap();
hm.put("folderId", "2");
hm.put("folderName", "2222222222222");
list.add(hm);
try {
String json = JSONUtil.serialize(list);
out.print(json);
} catch (Exception ex) {
ex.printStackTrace();
}
%>
第五种：ScriptTagProxy方式取得的数据
// construct the ComboBox's DataStore
var dsCustomer = new Ext.data.Store({
proxy : new Ext.data.ScriptTagProxy({
url : './jsp/comboxdata_1.jsp'
}),
reader : new Ext.data.JsonReader({
root : 'gridRows',
totalProperty : 'totalCount'
}, [{
name : 'id',
mapping : 'id'
}, {
name : 'name',
mapping : 'name'
}])
});
// construct a ComboBox
this.customerCmb = new Ext.form.ComboBox({
fieldLabel : '区別',
store : dsCustomer,
displayField : 'name',
valueField : 'id',
typeAhead : true,
loadingText : 'loading...',
width : 160,
hiddenName : 'name',
//hideTrigger : true,
allowBlank : false,
minChars : 1,
forceSelection : true,
triggerAction : 'all'
});
comboxdata_1.jsp :
<%@ page language="java" import="java.util.*,com.googlecode.jsonplugin.JSONUtil"%>
<%
String cb = request.getParameter("callback");
if (cb != null) {
response.setContentType("text/javascript,charset=utf8");
}
List list = new ArrayList();
HashMap hm = new HashMap();
hm.put("id", "1");
hm.put("name", "11111111111");
list.add(hm);
hm = new HashMap();
hm.put("id", "2");
hm.put("name", "2222222222222");
list.add(hm);
HashMap rehm = new HashMap();
rehm.put("totalCount","1");
rehm.put("gridRows",list);
try {
String json = JSONUtil.serialize(rehm);
System.out.println("json:"+json);
out.print(cb + "(");
out.print(json);
out.print(");");
} catch (Exception ex) {
ex.printStackTrace();
}
/*
System.out.println(cb);
String json="{/"totalCount/": 1,/"gridRows/":["+"{/"id/" :1 ,/"name/":/"zhongxiaogang/"},{/"id/" :2 ,/"name/":/"linhuarui/"}]}";
out.write(cb + "(");
out.print(json);
out.write(");"); */
%>
示例文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ComboBoxTest.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-base.js">
</script>
<script type="text/javascript" src="ext/ext-all.js">
</script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js">
</script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
var data = [['1', 'Lislie', 'D005', 'male'], ['2', 'Merry', 'D004', 'female'], ['3', 'Edison', 'D003', 'male'], ['4', 'Mark', 'D002', 'male'], ['5', 'Leeon', 'D001', 'male']];
// 格式化数据
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data), // 数据源
reader: new Ext.data.ArrayReader({}, [ // 如何解析
{
name: 'id'
}, {
name: 'name'
}, {
name: 'depno'
}, {
name: 'sex'
}])
});
ds.load();
var storeList = new Ext.form.ComboBox({
store: ds,
fieldLabel: 'dfsfsd',
allowBlank: false,
forceSelection: true,
valueField: 'id', // option.value
typeAhead: true,
displayField: 'name', // option.text
triggerAction: 'all',
emptyText: 'Select a store...',
mode: 'local',
selectOnFocus: true,
width: 135
});
var folders = [{
'folderId': '1',
'folderName': '收信箱'
}, {
'folderId': '2',
'folderName': '发信箱'
}];
//用于下拉列表的store
var foldersJsonStore = new Ext.data.SimpleStore({
fields: [{
name: 'folderId',
mapping: 'folderId'
}, {
name: 'folderName',
mapping: 'folderName'
}],
data: folders
});
foldersJsonStore.loadData(folders);
var combo = new Ext.form.ComboBox({
fieldLabel: '文件夹',
name: 'folderMoveTo',
store: foldersJsonStore,
displayField: 'folderName',
valueField: 'folderId',
mode: 'local',
typeAhead: true, //自动将第一个搜索到的选项补全输入
triggerAction: 'all',
emptyText: '全部',
selectOnFocus: true,
forceSelection: true
});
var provinces = [[1, '北京'], [2, '上海']];
var cities = new Array();
cities[1] = [[11, '海淀'], [22, '东城']];
cities[2] = [[33, '黄埔'], [44, '浦东'], [55, '静安']];
var comboProvinces = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ["provinceId", "provinceName"],
data: provinces
}),
listeners: {
select: function(combo, record, index){
comboCities.clearValue();
comboCities.store.loadData(cities[record.data.provinceId]);
}
},
valueField: "provinceId",
displayField: "provinceName",
mode: 'local',
forceSelection: true,
blankText: '请选择省份',
emptyText: '请选择省份',
hiddenName: 'provinceId',
editable: false,
triggerAction: 'all',
allowBlank: true,
fieldLabel: '请选择省份',
name: 'provinceId',
width: 80
});
var comboCities = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ["cityId", 'cityName'],
data: []
}),
valueField: "cityId",
displayField: "cityName",
mode: 'local',
forceSelection: true,
blankText: '选择地区',
emptyText: '选择地区',
hiddenName: 'cityId',
editable: false,
triggerAction: 'all',
allowBlank: true,
fieldLabel: '选择地区',
name: 'cityId',
width: 80
});
var form = new Ext.form.FormPanel({
region: 'center',
labelWidth: 100,
border: false,
labelAlign: 'right',
applyTo: 'local1',
height: 200,
width: 400,
layout: 'form',
items: [storeList, combo,comboProvinces,comboCities]
});
});
</script>
</head>
<body>
<div id="local1">
</div>
</body>
</html>
扫一扫
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
