/*
* 对EXT ComboBox 的扩展
*/
Ext.BLANK_IMAGE_URL = '/ExtJs/ext2.2/resources/images/default/s.gif';
// Cxt 全局命名空间
var Cxt = {};
Cxt.ComboBoxWrapper = function(config) {
if (!config) {
return null;
}
var sql = config.sql;
if (config.sql != '') {
sql = config.sql;
} else {
switch (config.sqlid) {
case "yxSql" :
sql = "SELECT YXDM AS VALUE ,YXMC AS TEXT FROM T_XB_DW ORDER BY YXDM";
break;
case "zySql" :
sql = "SELECT ZYDM AS VALUE ,JC AS TEXT FROM T_XB_ZY ORDER BY ZYDM";
break;
default :
sql = "";
break;
}
}
var store = new Ext.data.JsonStore({
url : '/ExtJs/app/getSqlData.jsp', // 数据来源
root : 'combobox',
fields : [{
name : 'VALUE'
}, {
name : 'TEXT'
}],
baseParams : {
sql : sql
}
});
var combo = new Ext.form.ComboBox({
store : store,
emptyText : '请选择..',
mode : 'local',
triggerAction : 'all',
valueField : 'VALUE',
displayField : 'TEXT',
width : config.width,
selectedindex : '080',
resizable : true,
id : config.id,
listeners : {
render : function() {
},
select : function() {
}
}
});
store.load();
return combo;
}
// ComboBox包装Tree
Cxt.ComboBoxTree = function(config) {
var comboxWithTree = new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false,
mode : 'local',
triggerAction : 'all',
width : 160,
resizable : true,
tpl : "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",
selectedClass : '',
onSelect : Ext.emptyFn
});
var root = new Ext.tree.AsyncTreeNode({
id : "root",
text : "树的根"
});
var tree = new Ext.tree.TreePanel({
root : root,
height : 100,
border : false,
rootVisible : false,
title : '',
width : 160,
autoHeight : true,
loader : new Ext.tree.TreeLoader({
url : "/ExtJs/app/getComboBoxTree.jsp"
/*
* baseParams : {cc:'1'} isteners : { 'beforeload' :
* function(loader, node) {
* tree.getLoader().baseParams.cc = '99'; } }
*/
})
})
tree.getLoader().on("beforeload", function(treeLoader, node) {
tree.getLoader().baseParams.cc = node.attributes.cc == null ? "": node.attributes.cc;
}, this);
tree.on('click', function(node) {
comboxWithTree.setValue(node.text);
comboxWithTree.collapse();
});
comboxWithTree.on('expand', function() {
tree.render('tree');
});
return comboxWithTree;
}
后台对数据的要求:
while (rs.next()) {
JSONObject json = new JSONObject();
json.put("VALUE", rs.getString("VALUE"));
json.put("TEXT", rs.getString("TEXT"));
jObject.append("combobox", json);
}
分享到:
相关推荐
`Ext ComboBox`是实现下拉列表功能的基础组件,而“Ext combobox 下拉多选框带搜索功能”则是对其功能的一种扩展,旨在提高用户在大量数据中选择项时的效率。 在传统的单选`ComboBox`中,用户只能选择一个值,而...
3. **Grid组件**:Grid是Ext JS中用于展示表格数据的核心组件,可以对大量数据进行排序、分页、筛选和编辑。它通常与Store对象结合使用,Store负责管理数据,Grid负责展示。 4. **Combining ComboBox and Grid**:...
Ext ComBobox扩展了这一概念,提供更高级的交互和定制能力。 2. **数据绑定**:Ext JS支持数据绑定,这意味着ComBobox的选项可以直接与后台数据源关联,当数据源发生变化时,组合框会自动更新,反之亦然。 3. **...
要实现多选下拉框,我们需要对原生的ComboBox进行以下改造: 1. **配置项设置**: - `multiSelect`:设置为`true`,启用多选功能。 - `typeAhead`:多选模式下通常不需要自动补全,可以设置为`false`。 - `...
在Ext3.4版本中,IconCombobox是对Combobox的增强,它允许每个列表项前面添加一个图标。这在许多场景下都很有用,例如,当需要区分不同类型的选项时,图标可以提供视觉上的辅助信息。实现这个功能通常需要自定义...
直接放到tomcat下.访问iconcombo.html页面 用的的文件名称如下:iconcombo.html js/Ext.ux.IconCombo.js css/Ext.ux.IconCombo.css
EXT下拉列表扩展lovcombo的实现,主要是对ComboBox进行了自定义,将下拉菜单中的选项呈现为一组可被勾选的复选框。这样做可以显著增强用户体验,特别是当选项数量较多时,用户可以快速地多选,而无需反复打开下拉...
总之,IconComboBox是一个增强EXT.form.Combobox功能的扩展控件,它结合了文本和图标,使得选择更加直观。通过自定义配置和渲染逻辑,我们可以轻松地将这个控件集成到EXT JS应用中,提升用户体验。通过阅读提供的...
UxSuperBoxSelect是ExtJS社区开发的一个自定义控件,它是对标准`ComboBox`(组合框)的扩展。此控件允许用户不仅可以选择一个或多个选项,还可以直接在下拉列表中添加新的选项,以及删除已选择的选项,提高了交互性...
标题中的“Ext扩展整理后吐血奉献”表明这是一篇关于ExtJS框架扩展的深入解析文章,作者可能在研究和整理过程中投入了大量的时间和精力。ExtJS是一个广泛用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件...
首先,Ext多选下拉框是基于Ext.form.field.ComboBox构建的,通过扩展其默认行为来支持多选。它通常包含一个可输入的文本字段和一个下拉列表,用户可以从中选择多个选项。在创建多选下拉框时,我们需要设置`...
在提供的文件`xyearcombobox.js`中,我们可以推测这可能是一个自定义的组合框(ComboBox)组件,它基于Ext JS的原生ComboBox进行了扩展或继承。组合框是Ext JS中的一个重要组件,用于提供下拉选择的功能。通过查看这...
本资源集合是关于ExtJS中常用扩展插件的一些实例,有助于加深对ExtJS应用开发的理解和实践。 1. **FieldPanel**: FieldPanel 是 ExtJS 中的一个组件,它主要用于封装表单字段,提供了一种将表单元素(如文本框、...
在提供的`combobox智能联想.txt`文件中,可能会包含实现上述功能的具体代码示例,包括EXTJS的配置、事件处理和可能的自定义扩展。通过阅读和理解这些代码,你可以更好地掌握EXTJS 3.x Combobox的智能联想功能,并...
MultiComboBox是ExtJS中的一个自定义组件,它扩展了基础的ComboBox类,增加了多选的功能。默认情况下,ComboBox只允许用户选择一个值,而MultiComboBox则允许用户选择多个值,这些值通常以复选框的形式展示。 要...
- `combo.js`: 这个文件可能包含了关于ComboBox的EXT组件扩展或定制,与`lookup`中使用的ComboBox相关。 深入学习EXT的`lookup`机制,不仅需要理解EXT的基础组件和数据模型,还需要熟悉其事件驱动和MVC架构。通过...
总的来说,"基于EXT2.2的下拉复选框"是一个利用EXT2.2框架和相关插件实现的Web组件,它提供了在下拉列表中多选的功能,这通常涉及对EXT2.2的`ComboBox`组件进行扩展,使用自定义的JavaScript插件(如`Ext.mm....
多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...