摘要：ComboBox是常用控件之一，但由于其数据来源分两种形式：本地和远程，故写的形式难度并不亚于ExtJS中的TreePanel和GridPanel。鄙人也经常提醒自己的师弟师妹，ExtJS本身是面向对象写的，不能在应用的时候却不按照面向对象来写，面向对象最起码的好处就是代码的复用，对于网页来讲，代码复用的好处就是加载的JS会少很多，这样网页渲染时就不会很慢。下面我将分别介绍扩展的四种ComboBox。
类图：
扩展一：封装的月份ComboBox组件
效果：
代码：
// 封装的月份ComboBox组件
MonthComboBox = Ext.extend(Ext.form.ComboBox, {
fieldLabel : '月 份',// 标题名称
storeData : null,// ComboxBox数据源(数组形式)
initComponent : function() {
this.storeData = [[1, '1月'], [2, '2月'], [3, '3月'], [4, '4月'],
[5, '5月'], [6, '6月'], [7, '7月'], [8, '8月'], [9, '9月'],
[10, '10月'], [11, '11月'], [12, '12月']];
Ext.apply(this, {
fieldLabel : this.fieldLabel,
anchor : '100%',
emptyText : '月份...',
forceSelection : true,// 值为true时将限定选中的值为列表中的值，值为false则允许用户将任意文本设置到字段（默认为
// false）。
selectOnFocus : true,// 值为 ture
// 时表示字段获取焦点时自动选择字段既有文本(默认为
// false)。
mode : 'local',
store : new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : this.storeData
}),
editable : false,
triggerAction : 'all',
valueField : 'value',
displayField : 'text'
});
MonthComboBox.superclass.initComponent.call(this);
}
});
应用：
var cboMonth=new MonthComboBox({
renderTo : 'monthComboBox',
width : 200
});
Html:
<div id="monthComboBox"></div><br/>
扩展二：封装的日期ComboBox组件
效果：
代码：
// 封装的日期ComboBox组件
DayComboBox = Ext.extend(Ext.form.ComboBox, {
fieldLabel : '日 期',// 标题名称
storeData : null,// ComboxBox数据源(数组形式)
initComponent : function() {
this.storeData = [[1, '1日'], [2, '2日'], [3, '3日'], [4, '4日'],
[5, '5日'], [6, '6日'], [7, '7日'], [8, '8日'], [9, '9日'],
[10, '10日'], [11, '11日'], [12, '12日'], [13, '13日'],
[14, '14日'], [15, '15日'], [16, '16日'], [17, '17日'],
[18, '18日'], [19, '19日'], [20, '20日'], [21, '21日'],
[22, '22日'], [23, '23日'], [24, '24日'], [25, '25日'],
[26, '26日'], [27, '27日'], [28, '28日'], [29, '29日'],
[30, '30日'], [31, '31日']];
Ext.apply(this, {
fieldLabel : this.fieldLabel,
anchor : '100%',
emptyText : '日期...',
forceSelection : true,
// 值为true时将限定选中的值为列表中的值，
// 值为false则允许用户将任意文本设置到字段（默认为false）。
selectOnFocus : true,
// 值为 ture时表示字段获取焦点时自动选择字段既有文本(默认为false)。
mode : 'local',
store : new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : this.storeData
}),
editable : false,
triggerAction : 'all',
valueField : 'value',
displayField : 'text'
});
DayComboBox.superclass.initComponent.call(this);
}
});
应用：
var cboDay=new DayComboBox({
renderTo : 'dayComboBox',
width : 200
});
Html：
<div id="dayComboBox"></div><br/>
扩展三：封装的DynamicCombox组件
效果：
代码：
//封装的DynamicCombox组件
DynamicCombox = Ext.extend(Ext.form.ComboBox, {
fieldLabel : '动态ComboBox',// 标题名称
baseUrl : null,
emptyText : null,
valueField : null,
displayField : null,
initComponent : function() {
Ext.apply(this, {
fieldLabel : this.fieldLabel,
anchor : '100%',
emptyText : this.emptyText || '请选择',
forceSelection : true,
// 值为true时将限定选中的值为列表中的值，
// 值为false则允许用户将任意文本设置到字段（默认为false）。
selectOnFocus : true,
// 值为 ture时表示字段获取焦点时自动选择字段既有文本(默认为false)。
mode : 'remote',
store : new Ext.data.JsonStore({
url : this.baseUrl,
root : "root",
remoteSort : true,
fields : [this.valueField,
this.displayField]
}),
editable : false,// 是否编辑
triggerAction : 'all',
valueField : this.valueField,
displayField : this.displayField,
hiddenName : this.valueField
});
DynamicCombox.superclass.initComponent.call(this);
}
});
应用：
var cboDyna=new DynamicCombox({
renderTo : 'dynamicCombox',
width:200,
baseUrl:'dynadata.json',
valueField:'value',
displayField:'display'
});
Json：
{
root : [{
value : 'v1',
display : '张三'
}, {
value : 'v2',
display : '李四'
}, {
value : 'v3',
display : '王五'
}]
}
Html：
<div id="dynamicCombox"></div><br/>
扩展四：封装的ComboBoxTree组件
效果：
代码：
// 封装的ComboBoxTree组件
ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
fieldLabel : 'ComboBoxTree',// 标题名称
baseUrl : null,
emptyText : null,
maxHeight : 300,
treeId : Ext.id() + '-tree',
tree : null,
// all:所有结点都可选中
// exceptRoot：除根结点，其它结点都可选（默认）
// folder:只有目录（非叶子和非根结点）可选
// leaf：只有叶子结点可选
selectNodeModel : 'exceptRoot',
initComponent : function() {
var resultTpl = new Ext.XTemplate('<tpl for="."><div style="height:'
+ this.maxHeight + 'px"><div id="' + this.treeId
+ '"></div></div></tpl>');
this.addEvents('afterchange');
Ext.apply(this, {
fieldLabel : this.fieldLabel,
anchor : '100%',
emptyText : this.emptyText || '请选择',
forceSelection : true,
selectedClass : '',
// 值为true时将限定选中的值为列表中的值，
// 值为false则允许用户将任意文本设置到字段（默认为false）。
selectOnFocus : true,
// 值为 ture时表示字段获取焦点时自动选择字段既有文本(默认为false)。
mode : 'local',
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false,// 是否编辑
triggerAction : 'all',
typeAhead : false,
tpl : resultTpl,
onSelect : Ext.emptyFn()
});
ComboBoxTree.superclass.initComponent.call(this);
},
expand : function() {
ComboBoxTree.superclass.expand.call(this);
if (this.tree.rendered) {
return;
}
Ext.apply(this.tree, {
height : this.maxHeight,
border : false,
autoScroll : true
});
if (this.tree.xtype) {
this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype);
}
this.tree.render(this.treeId);
var root = this.tree.getRootNode();
if (!root.isLoaded()) {
root.reload();
}
this.tree.on('click', function(node) {
var selModel = this.selectNodeModel;
var isLeaf = node.isLeaf();
if ((node == root) && selModel != 'all') {
return;
} else if (selModel == 'folder' && isLeaf) {
return;
} else if (selModel == 'leaf' && !isLeaf) {
return;
}
var oldNode = this.getNode();
if (this.fireEvent('beforeselect', this, node, oldNode) !== false) {
this.setValue(node);
this.collapse();
this.fireEvent('select', this, node, oldNode);
(oldNode !== node) ? this.fireEvent('afterchange',
this, node, oldNode) : '';
}
}, this);
this.tree.expandAll();
},
setValue : function(node) {
this.node = node;
var text = node.text;
this.lastSelectionText = text;
if (this.hiddenField) {
this.hiddenField.value = node.id;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = node.id;
},
getValue : function() {
return typeof this.value != 'undefined' ? this.value : '';
},
getNode : function() {
return this.node;
},
clearValue : function() {
ComboBoxTree.superclass.clearValue.call(this);
this.node = null;
},
// private
destroy : function() {
ComboBoxTree.superclass.destroy.call(this);
Ext.destroy([this.node, this.tree]);
delete this.node;
}
});
应用：
var cboTree = new ComboBoxTree({
renderTo : 'comboBoxTree',
width : 200,
tree : {
xtype:'treepanel',
loader: new Ext.tree.TreeLoader({dataUrl:'treedata.json'}),
root : new Ext.tree.AsyncTreeNode({id:'0',text:'根结点'})
},
//all:所有结点都可选中
//exceptRoot：除根结点，其它结点都可选(默认)
//folder:只有目录（非叶子和非根结点）可选
//leaf：只有叶子结点可选
selectNodeModel:'leaf'
});
Json：
[{
id : 'root',
text : '单位库',
leaf : false,
children : [{
id : '1002',
text : '重庆市气象局',
checked : true,
leaf : false,
children : [{
id : '1003',
text : '机关部门',
checked : true,
leaf : true
}, {
id : '1004',
text : '天气办公室',
checked : true,
leaf : true
}]
},{
id : '1005',
text : '河北工业大学',
checked : false,
leaf : true
}]
}]
Html：
<div id="comboBoxTree"></div><br/>
<!--EndFragment-->
相关推荐
EXTJS并没有直接提供一个名为"自动补全"的组件，但它可以通过模拟Combobox组件来实现这一效果。Combobox是EXTJS中的一个下拉选择框，它可以显示一个下拉列表供用户选择，同时也可以配合自动补全功能。 首先，让我们...
在EXTJS4中，ComboBox是一个常用的组件，它用于创建下拉选择框，通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而，根据你的标题和描述，你似乎遇到了一个特别的...
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
在探讨“extjs editgrid combobox 回显”这一主题时，我们主要关注的是如何在ExtJS框架下，实现编辑网格（EditGrid）中的组合框（ComboBox）的值能够正确地回显到网格中。这一功能对于那些需要用户在表单中选择数据...
- 阅读源码可以帮助我们了解Combobox内部的工作原理，以及如何根据需求调整和扩展功能。 6. **工具支持** - ExtJS 提供的IDE和开发工具，如Sencha Architect，可以帮助直观地设计和构建Combobox，简化开发流程。 ...
EXTJS的ComboBox级联实现是Web应用程序中常见的一种交互方式，尤其在数据表单中用于联动选择。在本文中，我们将深入探讨EXTJS如何实现ComboBox的级联效果，并理解其数据提交VALUE的工作原理。 首先，我们需要创建两...
在提供的`combobox智能联想.txt`文件中，可能会包含实现上述功能的具体代码示例，包括EXTJS的配置、事件处理和可能的自定义扩展。通过阅读和理解这些代码，你可以更好地掌握EXTJS 3.x Combobox的智能联想功能，并...
本篇将重点讲解ExtJS中的一个扩展组件——多选下拉框，即“combobox”。 在ExtJS中，ComboBox是一个基本的输入组件，它结合了文本输入框和下拉列表的功能。默认情况下，ComboBox只允许用户选择一个选项。但是，通过...
ExtJS的ComboBox是一个非常强大的组件，它用于创建下拉选择框。在Web应用程序中，我们经常需要实现二级联动效果，即一个ComboBox的选择会影响另一个ComboBox的显示内容。这在数据关联和筛选场景中尤为常见，例如省份...
四、Extjs页面控件 EXTJS4自学手册——页面控件（表格） EXTJS4自学手册——页面控件（表格的特性属性） EXTJS4自学手册——页面控件（表格的插件） EXTJS4自学手册——页面控件（树形控件） EXTJS4自学手册——页面...
extJs4 ComboBox 代码组合框实例，ComboBox 各个主要参数详细解释
ExtJS的Combobox组件是一种常见的数据输入控件，它提供了下拉列表的功能，用户可以选择列表中的一个选项或者在输入框中自由输入。在实际应用中，我们常常会遇到需要实现二级甚至多级联动的场景，这通常是由于数据的...
EXTJS是一种基于JavaScript的富客户端应用开发框架，主要用于构建交互性强、用户体验良好的Web应用程序。EXTJS3.0是EXTJS的一个重要版本，它提供了一系列强大的组件和功能，为开发者提供了丰富的工具来创建复杂的...
但我们可以根据标题推测，这个项目可能包含了使用jQuery实现的下拉列表组件，具有搜索过滤、动态加载数据等功能，旨在提供一种轻量级的解决方案，适用于那些希望在项目中集成类似ExtJS ComboBox但又不想引入庞大框架...
在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中，我们关注的是一个特别的ComboBox实现，它不仅允许用户从下拉列表中选择多个选项，还具备搜索功能，使得用户可以更高效地找到他们想要的选择项。 ComboBox在...
一些ext练习例子，一些ext练习例子，
这个“extjs多选 下拉框扩展”就是解决这个问题的一种方案。 首先，我们要理解ExtJS的ComboBox的基本结构。ComboBox由一个输入框和一个下拉列表组成，用户可以在输入框中输入文字，或者点击下拉箭头来浏览和选择...
在EXTJS4中，`ComboBox` 是一个非常常用的组件，它提供了一个下拉选择框的功能。在某些场景下，我们可能需要在下拉菜单中展示更丰富的信息，比如表格数据，这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...
在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中，我们将探讨如何利用ExtJS 4的ComboBox组件实现省市区的三级联动效果，并结合Struts2框架进行数据交互。 首先，`ComboBox`是ExtJS中的一个组件，它...
在EXTJS这个强大的JavaScript框架中，ComboBox控件是一种常用的组件，它用于实现下拉选择框的功能。本篇学习笔记将深入探讨EXTJS中ComboBox的联动效果，即一个ComboBox的选择会触发另一个ComboBox的数据更新，以此来...