ExtJSweb应用程序开发指南的一个例子分享-ComboBox的扩展

来源：互联网发布：手机版微信营销软件编辑：程序博客网时间：2024/06/06 09:42

其实在ext项目中经常需要用到下拉列表ComboBox，在formpanel，gridpanel都会有用到，如每次都new一个这样的对象出来

生成的js代码定是很臃肿，其实ComboBox的很多配置项完全可以封转起来一处定义，多次使用。

本文给出在ExtJSweb应用程序开发指南的一个非常有用的例子给大家分享：继承了EXT组件ComboBox,定制了一组常用配置项，

根据业务改写了store的定义，实际应用中我们可以定制我们的store这样即可达到复用的目的。

不说了上代码：

<textarea cols="50" rows="15" name="code" class="c-sharp">/* * 封装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);</textarea>

测试时，在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"></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：表示用户至少要输入多少字后才开始自动完成