`
yaya_wiscom
  • 浏览: 49669 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

对Ext ComboBox扩展

阅读更多

 

/*
 * 对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`是实现下拉列表功能的基础组件,而“Ext combobox 下拉多选框带搜索功能”则是对其功能的一种扩展,旨在提高用户在大量数据中选择项时的效率。 在传统的单选`ComboBox`中,用户只能选择一个值,而...

    Ext ComboboxGrid

    3. **Grid组件**:Grid是Ext JS中用于展示表格数据的核心组件,可以对大量数据进行排序、分页、筛选和编辑。它通常与Store对象结合使用,Store负责管理数据,Grid负责展示。 4. **Combining ComboBox and Grid**:...

    combobox Ext之扩展组件多选下拉框

    要实现多选下拉框,我们需要对原生的ComboBox进行以下改造: 1. **配置项设置**: - `multiSelect`:设置为`true`,启用多选功能。 - `typeAhead`:多选模式下通常不需要自动补全,可以设置为`false`。 - `...

    Ext ComBobox 附带完整附件

    Ext ComBobox扩展了这一概念,提供更高级的交互和定制能力。 2. **数据绑定**:Ext JS支持数据绑定,这意味着ComBobox的选项可以直接与后台数据源关联,当数据源发生变化时,组合框会自动更新,反之亦然。 3. **...

    Ext带图标Combobox

    在Ext3.4版本中,IconCombobox是对Combobox的增强,它允许每个列表项前面添加一个图标。这在许多场景下都很有用,例如,当需要区分不同类型的选项时,图标可以提供视觉上的辅助信息。实现这个功能通常需要自定义...

    Ext 扩展的带图片的 combobox

    直接放到tomcat下.访问iconcombo.html页面 用的的文件名称如下:iconcombo.html js/Ext.ux.IconCombo.js css/Ext.ux.IconCombo.css

    Ext下拉列表扩展lovcombo

    EXT下拉列表扩展lovcombo的实现,主要是对ComboBox进行了自定义,将下拉菜单中的选项呈现为一组可被勾选的复选框。这样做可以显著增强用户体验,特别是当选项数量较多时,用户可以快速地多选,而无需反复打开下拉...

    ext的扩展控件之IconComboBox

    总之,IconComboBox是一个增强EXT.form.Combobox功能的扩展控件,它结合了文本和图标,使得选择更加直观。通过自定义配置和渲染逻辑,我们可以轻松地将这个控件集成到EXT JS应用中,提升用户体验。通过阅读提供的...

    Ext用户扩展控件 ------超级下拉列表控件支持多选,删除,添加

    UxSuperBoxSelect是ExtJS社区开发的一个自定义控件,它是对标准`ComboBox`(组合框)的扩展。此控件允许用户不仅可以选择一个或多个选项,还可以直接在下拉列表中添加新的选项,以及删除已选择的选项,提高了交互性...

    Ext扩展整理后吐血奉献

    标题中的“Ext扩展整理后吐血奉献”表明这是一篇关于ExtJS框架扩展的深入解析文章,作者可能在研究和整理过程中投入了大量的时间和精力。ExtJS是一个广泛用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件...

    Ext多选下拉框

    首先,Ext多选下拉框是基于Ext.form.field.ComboBox构建的,通过扩展其默认行为来支持多选。它通常包含一个可输入的文本字段和一个下拉列表,用户可以从中选择多个选项。在创建多选下拉框时,我们需要设置`...

    Ext继承和扩展写的例子。

    在提供的文件`xyearcombobox.js`中,我们可以推测这可能是一个自定义的组合框(ComboBox)组件,它基于Ext JS的原生ComboBox进行了扩展或继承。组合框是Ext JS中的一个重要组件,用于提供下拉选择的功能。通过查看这...

    Ext常用扩展插件实例收集

    本资源集合是关于ExtJS中常用扩展插件的一些实例,有助于加深对ExtJS应用开发的理解和实践。 1. **FieldPanel**: FieldPanel 是 ExtJS 中的一个组件,它主要用于封装表单字段,提供了一种将表单元素(如文本框、...

    extjs3.x combobox智能联想

    在提供的`combobox智能联想.txt`文件中,可能会包含实现上述功能的具体代码示例,包括EXTJS的配置、事件处理和可能的自定义扩展。通过阅读和理解这些代码,你可以更好地掌握EXTJS 3.x Combobox的智能联想功能,并...

    ext多选下拉列表的全选功能实现

    MultiComboBox是ExtJS中的一个自定义组件,它扩展了基础的ComboBox类,增加了多选的功能。默认情况下,ComboBox只允许用户选择一个值,而MultiComboBox则允许用户选择多个值,这些值通常以复选框的形式展示。 要...

    EXT 的一个例子lookup

    - `combo.js`: 这个文件可能包含了关于ComboBox的EXT组件扩展或定制,与`lookup`中使用的ComboBox相关。 深入学习EXT的`lookup`机制,不仅需要理解EXT的基础组件和数据模型,还需要熟悉其事件驱动和MVC架构。通过...

    基于EXT2.2的下拉复选框

    总的来说,"基于EXT2.2的下拉复选框"是一个利用EXT2.2框架和相关插件实现的Web组件,它提供了在下拉列表中多选的功能,这通常涉及对EXT2.2的`ComboBox`组件进行扩展,使用自定义的JavaScript插件(如`Ext.mm....

    EXT3.2 多选下拉框

    多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...

Global site tag (gtag.js) - Google Analytics