Ext ComboBox

// 一个简单的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) {
					
				}
			}
		});