//添加接口
var treeIface = new Ext.tree.TreePanel({
title : '接口',
split : true,
frame:false,
border : true,
collapsible : true,
width : 250,
minSize : 80,
maxSize : 250,
enableDD : true,
autoScroll : true,
loader : new Ext.tree.TreeLoader({
//applyLoader : true,
url : 'merchant__loadAddFormIface.action'
}),
root: new Ext.tree.AsyncTreeNode( {
id : "0",
text : "添加接口"
//expandable: true,
//expanded: true
}),
rootVisible: false,
listeners : {
checkchange : function(node, event) {
var parentNode = node.parentNode;
var childs = parentNode.childNodes;// 获得兄弟节点
if (node.ui.isChecked() == true) {
parentNode.attributes.checked = true;
parentNode.ui.toggleCheck(true);
} else {
var flag = false;
node.attributes.checked = flag;
for ( var i = 0; i < childs.length; i++) {
if (childs[i].ui.isChecked() == true) {
flag = true;
}
}
if (flag == false) {
parentNode.attributes.checked = flag;
parentNode.ui.toggleCheck(flag);
}
}
},
click : function(node, event) {
node.expand();
},
expandnode : function(node, event) {
}
}
});
var iface = new Ext.form.ComboBox(
{
editable : false,
fieldLabel : '接口',
name : 'iface',
hiddenName : 'iface',
width : 150,
mode : 'local',
triggerAction : 'all',
tpl: '<div id="treeIface" style="height:200px;width:144px;"></div>',
store : new Ext.data.SimpleStore({ fields: [], data: [[]] }),
valueField : 'value',
value:'',
displayField : 'text',
editable : false
});
iface.on('expand', function() { treeIface.render('treeIface'); });
var nodeIfaceArray = new Array();
var treeIface_click = function(node, e) {
var nodeIfaceValue ='';
// if (node.attributes.leaf) {
if (node.attributes.checked == true) {
var temp =1;
for ( var j = 0; j < nodeIfaceArray.length; j++) {
if(nodeIfaceArray[j].attributes.id==node.attributes.id){
temp +=1;
}
}
if(temp==1){
nodeIfaceArray.push(node);
}
}
if (node.attributes.checked == false) {
for ( var i = 0; i < nodeIfaceArray.length; i++) {
if(nodeIfaceArray[i].attributes.id==node.attributes.id){
nodeIfaceArray.splice(i,1);
//nodeArray[i].attributes.id='';
}
}
}
for ( var i = 0; i < nodeIfaceArray.length; i++) {
if(nodeIfaceArray[i].attributes.id!=''){
nodeIfaceValue +=nodeIfaceArray[i].attributes.id+" ";
//nodeValue +=' ';
}
}
iface.setValue(nodeIfaceValue);
};
// tree.on("click", tree_click);
treeIface.on("checkchange", treeIface_click);
分享到:
相关推荐
Ext下拉列表树是一种在ExtJS框架中实现的组件,它结合了下拉列表和树形结构的功能,为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见,尤其适用于需要展现多级...
而在某些情况下,我们可能需要在下拉框中展示树形结构的数据,这就是EXT COMBO TREE的用武之地。 EXT COMBO TREE是EXT COMBO的一种扩展,它允许用户在下拉菜单中以树形结构展示数据。这在处理层级关系或者分类数据...
下拉树(Dropdown Tree)是EXT中的一个组件,它结合了下拉菜单和树形结构,通常用于选择具有层级关系的数据,比如组织结构、目录树或者地区层级等。 在EXT中,创建下拉树的过程可能涉及到以下关键知识点: 1. **...
下拉树是UI设计中一个实用的元素,它将传统下拉列表与树形结构相结合,用户在下拉框中可以看到层次化的选项,这在需要展示多级分类或者有层级关系的数据时非常有用。例如,在选择国家/地区、组织架构或产品分类等...
总的来说,Ext.ux.ComboBoxTree是ExtJS中一种实用的组件,它将下拉框的便捷性与树形结构的层次性结合在一起,提高了用户在处理层级数据时的交互体验。开发者可以通过调整配置和编写回调函数,实现各种定制化的需求。
ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...
在Ext中,下拉树是将传统的下拉列表与树形控件相结合的一种方式,用户可以点击输入框打开一个包含树结构的下拉菜单。这种组件常用于需要层次结构选择的场景,例如组织架构、文件目录等。创建下拉树通常涉及以下步骤...
TreeCombo是Ext JS库中的一个组件,它结合了树形结构和下拉框的功能,为用户提供了一种在有限空间内展示复杂数据结构的选择方式。在Web应用开发中,这种组件非常实用,尤其当用户需要从层次化的选项中进行选择时。 ...
总的来说,Ext TreeCombo是ExtJS中一种强大的组件,结合了树形结构和下拉框的优点,适合于展示和操作层次化数据。理解和掌握其使用方法对提升Web应用的用户体验大有裨益。通过源码学习和相关工具的支持,开发者可以...
它提供了丰富的组件库,其中包括下拉列表树控件(ComboBox Tree),这种控件结合了下拉列表和树形结构,使得用户能够在一个下拉菜单中浏览和选择层次化的数据。本文将深入探讨如何在ExtJS中实现下拉列表树控件,并...
用户可以在下拉列表中看到一个树形结构,逐级展开节点,选择需要的项。这种组件特别适合于那些需要展示层级关系且允许用户多选或单选的情况,如部门组织结构、地区分类等。 2. **多选与单选支持** 在ExtJS 4.x的...
4. **JavaScript事件处理**:EXT TreePanel提供了丰富的事件监听器,如`beforeitemmove`、`itemmove`等,我们可以监听这些事件,通过DWR调用服务器端的方法来实现动态修改树形菜单的结构。 5. **yahaitt_ext_...
然而,`ComboTree`则是在`ComboBox`的基础上增加了树形结构,使得用户不仅可以浏览一个简单的列表,还可以展开和折叠节点,查看和选择嵌套的数据项。 `ComboTree_xz.js`文件是实现这个功能的核心脚本,包含了`...
在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...
Ext2.0的下拉树结合了下拉框和树的功能,用户可以像选择下拉列表中的项一样选择树形结构中的节点。创建下拉树需要使用`Ext.form.ComboBox`,并配置其`store`为树形数据的`TreeStore`,`displayField`为显示的字段,...
下拉列表树控件结合了下拉框和树结构的特点,用户可以方便地在下拉菜单中展开和选择树形结构的数据。 在ExtJS中,下拉列表树控件通常由两个主要部分组成:`ComboBox` 和 `TreePanel`。`ComboBox` 是基础的下拉框...
其中,`ComboTree` 是一个自定义组件,它结合了`ComboBox` 和 `Tree` 的功能,允许用户在一个下拉列表中选择树形结构的数据项。 #### 组件介绍 `ComboTree` 在本文档中被定义为一个自定义类 `Slk.view.ui.ComboTree...
在EXTJS4中,下拉菜单树(ComboBox+Tree)是一种高级UI组件,它结合了ComboBox的下拉选择框和TreePanel的树形结构,提供了一种用户友好的交互方式,用于展示层次化的数据。这种组件特别适用于需要从多个选项中进行...
ComboBoxTree将这两者融合,创建了一个下拉树菜单,用户可以在其中浏览和选择树形结构的数据。 要实现单选功能,ComboBoxTree可能使用了Ext.selection.Model类,通过配置singleSelect选项来限制用户只能选择一个...