项目需要,对ext的bombobox实现了子类,来展示下拉列表树。哪有不好的,网友多多指正
/*
* ext-3.2.1版本点击树的节点时,树自动隐藏,可能是这个版本的一个bug,下面是覆盖一个方法,解决此bug
*/
Ext.override(Ext.form.ComboBox, {
onViewClick : function(doFocus) {
var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
if (r) {
this.onSelect(r, index);
} else if (s.getCount() === 0) {
this.collapse();
}
if (doFocus !== false) {
this.el.focus();
}
}
});
Ext.namespace("Tm");
/**
* 下拉列表树,不带复选框,可控制只选叶子节点和所有节点,支持异步和本地加载
* 扩展属性:
* @tree 树对象
* @treeurl 树请求地址,如果是null,则本地加载
* @treeRootVisible 树根节点是否可见,true为可见,false是不可见,默认是不可见
* @treeValue 根节点的默认子节点,本地加载
* 目前问题:初始化对象必须传递renderTo属性
* @treeHeight 树面板的默认高度
* @onlyLeafCheckable 是否只允许选择叶子节点,true是只允许选择叶子节点,false所有节点均可选择
* @treeRootText 根节点的text
* @class Tm.TreeComboBox
* @extends Ext.form.ComboBox
*
* 案例页面extendcombox.jsp
*/
Tm.TreeComboBox = Ext.extend(Ext.form.ComboBox, {
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
tree:null,//树对象
treeurl:null,//树url
treeRootVisible:null,//根节点是否可见,默认为false,不可见
treeValue:null,//根的默认节点
treeHeight:120,//默认树的面板高度
treeRootText:'根节点',
onlyLeafCheckable:false,//默认所有节点均可选择,如果是true,只允许选择叶子节点
constructor: function(config) {
this.tpl= '<tpl for="."><div style="height:'+(this.treeHeight)+'px"><div id="'+this.renderTo+'_tree"></div></div></tpl>';
Tm.TreeComboBox.superclass.constructor.apply(this, arguments);
this._init();
},
/*
*初始化
*/
_init:function(){
this.getTree();
this.on("expand",function(){
this.tree.render(this.renderTo+'_tree');
});
//树点击添加监听
this.tree.addListener("click",function(node,e){
e.stopEvent();
if(this.onlyLeafCheckable){
if(!node.leaf){
node.expand();
return;
}
}
if(node.disabled)return;
this.setValue(node.id);
this.setRawValue(node.text);
this.collapse();
},this);
},
/*
*获取树对象
*/
getTree: function(){
if(!this.tree){
var root =new Ext.tree.AsyncTreeNode({
id:'root',
text:this.treeRootText,
children:this.treeValue
});
var load1=new Ext.tree.TreeLoader();
var load2=new Ext.tree.TreeLoader({
dataUrl:this.treeurl
})
this.tree=new Ext.tree.TreePanel({
root:root,//定位到根节点
animate:true,//开启动画效果
enableDD:false,//不允许子节点拖动
border:false,//没有边框
rootVisible:this.treeRootVisible||false,//设为false将隐藏根节点
loader:this.treeurl==null?load1:load2
});
}
return this.tree;
}
});
分享到:
相关推荐
在给定的标题“Ext ComboBox 下拉多选框带搜索功能”中,我们关注的是一个特别的ComboBox实现,它不仅允许用户从下拉列表中选择多个选项,还具备搜索功能,使得用户可以更高效地找到他们想要的选择项。 ComboBox在...
在本项目中,"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件:下拉树(ComboBox with Tree)和下拉表格(ComboBox with Grid)。这两种组件都是在输入框中展示可选择的列表,但呈现形式不同,下拉树以...
4. **TreePicker**:EXT中的下拉树组件可能基于Combobox(组合框)组件扩展,提供树形选择功能。它在初始状态下显示为一个输入框,当用户点击时展开为一个下拉树列表。 5. **配置项**:在创建TreePicker时,需要...
用EXT来实现下拉框ComboBox 下拉框可以实现分页
首先,ComboBox在Ext JS中是一个可选列表的输入控件,它可以展示一个下拉菜单供用户选择。在本地模式下,ComboBox的数据通常存储在本地,如JavaScript数组中,而不是从远程服务器获取。这样可以提高应用的响应速度,...
【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...
在Ext JS中,ComboBox通常用于显示一个可选的下拉列表,而Grid则用于展示大量数据并进行编辑和操作。ComboboxGrid将这两者融合,使得用户可以在输入框中输入关键字搜索,同时下拉展示匹配的网格数据,便于多维度筛选...
ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...
"ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...
本篇我们将深入探讨“Ext comboBox的remote模式”及其联想功能的实现。 在Ext JS的comboBox中,远程模式(remote mode)是一种数据加载策略,它适用于处理大量数据或实时数据的情况。在这种模式下,comboBox不会一...
4. **事件处理**:作为Ext JS组件,ComBobox会有一套完整的事件系统,如选择项的改变、打开和关闭下拉列表等,开发者可以通过监听这些事件来实现特定的业务逻辑。 5. **多选功能**:一些组合框允许用户选择多个值,...
在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...
在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...
ExtJS的ComboBox是一个非常强大的组件,它用于创建下拉选择框。在Web应用程序中,我们经常需要实现二级联动效果,即一个ComboBox的选择会影响另一个ComboBox的显示内容。这在数据关联和筛选场景中尤为常见,例如省份...
在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...
在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...