Ext之实现下拉查询Combox(Local)

/**
 * 数据源
 * 
 * @type
 */
var makes = [['Acura'], ['Aston Martin'], ['Audi'], ['BMW'], ['Buick'],
		['Cadillac'], ['Chevrolet'], ['Chrysler'], ['Dodge'], ['Ferrari'],
		['Ford'], ['GMC'], ['Honda'], ['HUMMER'], ['Hyundai'], ['Infiniti'],
		['Isuzu'], ['Jaguar']]
/**
 * 构建store
 */
var makesStore = new Ext.data.SimpleStore({
			fields : ['name'],
			data : makes
		});
/**
 * 构建combox
 * 
 */
var makesCombo = {
	xtype : 'combo',
	store : makesStore,
	displayField : 'name',
	valueField : 'name',
	editable : true,
	mode : 'local',
	forceSelection : true,
	triggerAction : 'all',
	filedLabel : '车名',
	emptyText : '输入要查询的车名',
	selectOnFocus : true
};
/**
 * 加载combox
 */
Ext.onReady(function() {
			var showcombo = new Ext.Panel({
						frame : true,
						title : '查询车名',
						bodyStyle : 'padding:5px',
						width : 420,
						id : 'comb',
						url : '...',//提交地址
						items : [makesCombo],
						buttons : [{
									text : '确认',
									handler : function() {
										Ext.getCmp('comb').getForm().submit;
									}
								}]
					});
			// 渲染到body标签上
			showcombo.render(document.body);
		})

 效果图见附件.

 

你可能感兴趣的:(ext)