ExtJSweb应用程序开发指南的一个例子分享-ComboBox的扩展
其实在ext项目中经常需要用到下拉列表ComboBox，在formpanel，gridpanel都会有用到，如每次都new一个这样的对象出来
生成的js代码定是很臃肿，其实ComboBox的很多配置项完全可以封转起来一处定义，多次使用。
本文给出在ExtJSweb应用程序开发指南的一个非常有用的例子给大家分享： 继承了EXT组件ComboBox,定制了一组常用配置项，
根据业务改写了store的定义，实际应用中我们可以定制我们的store这样即可达到复用的目的。
不说了 上代码：
/* * 封装Ext.form.ComboBox组件配置，实现组件功能的扩展 */ Ext.namespace('Ext.ux.form'); Ext.ux.form.YearComboBox = Ext.extend(Ext.form.ComboBox, { editable : false, displayField:'year', valueField:'value', typeAhead: true, mode: 'local', triggerAction: 'all', selectOnFocus:true, initComponent : function() { var years = []; for(var i = 2000;i <= 2020 ; i++){ years.push([+i+"年",i]); } this.store = new Ext.data.SimpleStore({ fields: ['year','value'], data : years }); } }) Ext.reg('xyearcombobox', Ext.ux.form.YearComboBox);
测试时， 在html文件如下引用工具js：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>扩展组件</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../../extjs2.0/resources/css/ext-all.css" mce_href="extjs2.0/resources/css/ext-all.css" /> <mce:script type="text/javascript" src="../../extjs2.0/adapter/ext/ext-base.js" mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../../extjs2.0/ext-all.js" mce_src="extjs2.0/ext-all.js"></mce:script> <mce:script type="text/javascript" src="../../extjs2.0/source/locale/ext-lang-zh_CN.js" mce_src="extjs2.0/source/locale/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript" src="Ext.ux.form.YearComboBox.js" mce_src="Ext.ux.form.YearComboBox.js"></mce:script> </head> <mce:script language="JavaScript"><!-- Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; new Ext.Panel({ title : '配置方式', applyTo : 'list-div', height : 100, width : 190, frame : true, items : [ {xtype:'xyearcombobox'} ] }); }); // --></mce:script> <body style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;"> <table> <tr> <td><div id='list-div'/></td> </tr> </table> </body> </html>
执行效果图如下：
附注：
typeAhead：表示是否自动完成
forceSelection：表示是否仅允许用户输入下拉列表中有的数据
minChars：表示用户至少要输入多少字后才开始自动完成