/**
* @type String
* @description 员工树型下拉框
*/
//-----定义userComboBox对象的expand事件所需要的TreePanel------
var userTree=function(combo){
userTree.superclass.constructor.call(this,{
id : 'deptTree',
animate : true,
enableDD : false,
rootVisible : false,
border:false,
root : new Ext.tree.AsyncTreeNode({
expanded : false,
text : '组织结构'
}),
loader :tl=new Ext.tree.TreeLoader({
url : 'sysuserpoweraction.do?option=getAll'
}),
listeners:{"click":function(node,event){
var val=node.id;
if(val.indexOf('dep')<0){//判断叶子节点为部门时,不允许选择
if(node.leaf){//员工为叶子时,给combo、userId赋值
combo.setValue(node.text);
Ext.getCmp('userId').setValue(node.id);
combo.collapse();
}else{
node.toggle();
}
}
}}
});
};
Ext.extend(userTree, Ext.tree.TreePanel);//userTree继承Ext.tree.TreePanel
//-----定义树型下拉框类-----------------
var userComboBox=function(label,wid,eText,bText){
var user=this;
userComboBox.superclass.constructor.call(this,{
id:'userCombo',
isFormField: true,
valueField: "value",
displayField: "text",
fieldLabel:label,
emptyText: eText,
width: wid,
store :new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable: false,
allowBlank: false,
blankText:bText,
mode: 'local',
triggerAction: 'all',
tpl : "<tpl for='.'><div style='height:200px'><div id='deptUser'></div><div></tpl>",
listeners:{"expand":function(){
(new userTree(user)).render('deptUser');
},"collapse":function(){
document.getElementById('deptUser').innerHTML="";
}
}
});
};
Ext.extend(userComboBox, Ext.form.ComboBox);//userComboBox继承Ext.form.ComboBox
分享到:
相关推荐
Ext JS 是一个强大的JavaScript库,专门用于构建富客户端应用程序。在Web开发中,它提供了丰富的组件库,包括各种用户界面元素,如表格、面板、窗口、菜单等。下拉树(Dropdown Tree)是Ext JS中的一种特殊控件,它...
在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...
在ExtJS中,为了实现一个具有下拉树结构的ComboBox,即ComboBoxTree,通常需要自定义组件,因为原生的ExtJS库并不直接提供这样的功能。以下是对标题和描述中所述知识点的详细解释: 1. **自定义组件**: 在ExtJS中...
在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...
本文将深入探讨如何在ExtJS中实现下拉列表树控件,并基于提供的文件`extjs实现下拉框树形结构.js`来解析关键知识点。 首先,让我们理解下拉列表树控件的基本结构。在ExtJS中,下拉列表通常由`Ext.form.field....
8. treepanel - xtype: 'treepanel', 描述: 树型面板 9. flash - xtype: 'flash', 描述: 显示 Flash 的组件(Since 3.0) 编辑器 1. editor - xtype: 'editor', 描述: 编辑器 2. grid - xtype: 'grid', 描述: 表格...
8. **`treepanel`** - `Ext.tree.TreePanel`,树型面板,用于展示层级结构的数据。 9. **`flash`** - `Ext.FlashComponent`,自3.0版本起支持,用于显示Flash内容的组件。 10. **`grid`** - `Ext.grid.GridPanel...
8. **`treepanel`:** 树型面板组件,用于展示层次结构的数据,通过`Ext.tree.TreePanel`类实现。 9. **`flash`:** Flash组件,用于在页面中嵌入Flash内容,自3.0版本开始支持,通过`Ext.FlashComponent`类实现。 ...
- **`treepanel` (Ext.tree.TreePanel)**: 树型面板组件,用于展示层次结构的数据。 - **`flash` (Ext.FlashComponent)**: 自3.0版本开始支持,用于嵌入Flash内容。 - **`grid` (Ext.grid.GridPanel)**: 表格组件,...
- **描述**: 下拉框,提供一个可滚动的列表供用户选择。 - **用途**: 选择国家、地区、类别等。 **Ext.form.DateField** - **描述**: 日期选择项,用户可以输入或选择日期。 - **用途**: 事件日期、出生日期等。 *...