在做一个模块的时候,用到了下拉列表,但是下拉列表中的数据太多,一次性如果全部加载的话,肯定是不现实或者不可续的方法,所以此时需要对下拉列表中的数据进行分页展示。我们用到了Ext.form.ComboBox对象。觉得这个东东挺不错,值得写出来总结下,方便以后用到。
1、定义对象
var SelectedUser = Ext.data.Record.create([{
name : 'userId',
type : 'int'
}, {
name : 'userWorkNum',
type : 'string'
}, {
name : 'userName',
type : 'string'
}]);
2、定义数据模式,封装数据
var reader = new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root'
}, [{
name : 'userId',
type : 'int'
}, {
name : 'userWorkNum',
type : 'string'
}, {
name : 'userName',
type : 'string'
}]);
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'queryGroupCustList.action'
}),
reader : reader
});
ds.baseParams.limit = 10;
3、具体combobox代码
var queryUserCombo = new Ext.form.ComboBox({
mode : 'remote',// 指定数据加载方式,如果直接从客户端加载则为local,如果从服务器断加载
// 则为remote.默认值为:remote
border : true,
frame : true,
pageSize : 10,// 当元素加载的时候,如果返回的数据为多页,则会在下拉列表框下面显示一个分页工具栏,该属性指定每页的大小
// 在点击分页导航按钮时,将会作为start及limit参数传递给服务端,默认值为0,只有在mode='remote'的时候才能够使用
width : 250,
emptyText : '可输入姓名或工号查询,支持模糊查询',
title : '显示格式:姓名(工号)(负责客户数)',
triggerAction : 'all',
displayField : 'displayUserInfo',
valueField : 'userId',
queryDelay : 600,
typeAhead : true,
editable : true,
store : ds,
selectOnFocus : true,
listeners : {
'select' : function(combo, record, index) {
panel.selectedUser = new SelectedUser(record.data);
},
'beforequery' : function(queryEvent) {
var key = queryEvent.query;
key = key.trim();
ds.baseParams.managerType = panel.managerType;
if (Ext.isEmpty(key)) {
ds.baseParams.query = '';
} else {
var keys = key.split(" ");
if (keys.length == 1) {
if (keys[0] != '*') {
ds.baseParams.query = keys[0];
}
} else {
}
}
ds.load({
params : {
start : 0,
limit : 10
}
});
}
}
});
其中'beforequery' 事件支持用户手动输入动态提示数据功能。