// 一个简单的Array数组的Combo
var store = new Ext.data.ArrayStore({
fields: ['key','value'],
data : [[1,'饼状图'],[2,'折线图']]
});
var combo = new Ext.form.ComboBox({
store: store,
valueField:'key',
displayField:'value',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'选择图形...',
selectOnFocus:true,
editable : false// 不允许编辑
});
var win = new Ext.Window(
{
title : '图形选择',
id : 'graphWindow',
layout : 'fit',
width : 200,
height : 150,
closable : true,
resizable : false,
draggable : false,
plain : false,
border : false,
frame : true,
modal : true,
bodyStyle : 'padding:20 20 20 20 ',
items : [ combo]
});
win.show();
下面给出一个带有分页,读取后台数据的ComboBox的代码。
--- ComboBox 的后台JavaBean
public final class KeyValue<K, V> {
private K key;
private V value;
public KeyValue(K key, V value) {
super();
this.key = key;
this.value = value;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((key == null) ? 0 : key.hashCode());
result = prime * result + ((value == null) ? 0 : value.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj) {
return true;
}
if (obj == null) {
return false;
}
if (getClass() != obj.getClass()) {
return false;
}
@SuppressWarnings("rawtypes")
KeyValue other = (KeyValue) obj;
if (key == null) {
if (other.key != null) {
return false;
}
} else if (!key.equals(other.key)) {
return false;
}
if (value == null) {
if (other.value != null) {
return false;
}
} else if (!value.equals(other.value)) {
return false;
}
return true;
}
@Override
public String toString() {
return "KeyValue [key=" + key + ", value=" + value + "]";
}
public K getKey() {
return key;
}
public void setKey(K key) {
this.key = key;
}
public V getValue() {
return value;
}
public void setValue(V value) {
this.value = value;
}
}
--- javascript
--- 带有分页,读取服务器数据的ComboBox
var InfoClass = Ext.data.Record.create([ {
name : 'key',
type : 'string'
}, {
name : 'value',
type : 'string'
} ]);
var store = new Ext.data.JsonStore({
root: 'root',
totalProperty: 'totalProperty',
fields: InfoClass,
proxy : new Ext.data.HttpProxy({
url : basePath + 'web/dataQuery/getSQLHistoryDatas'
})
});
var pageSize = 10;
store.baseParams.userKey = parent.userKey;// come from index.jsp
store.baseParams.start = 0;
store.baseParams.limit = pageSize;
store.load();
new Ext.form.ComboBox(
{
id : 'sqlQueryHistoryCombo',
tpl : '<tpl for="."><div ext:qtip="{key} {nick}" class="x-combo-list-item">{value}</div></tpl>',
store : store,
displayField : 'value',
valureField : 'key',
typeAhead : true,
width : 600,
editable : false,// 不允许编辑
mode : 'remote',
forceSelection : true,
triggerAction : 'all',
emptyText : '选择历史查询记录...',
selectOnFocus : true,
renderTo : 'sqlQueryHistoryDivId',
pageSize : pageSize,
listeners : {
select : function(combo, record, index) {
}
}
});