cms.form.ComboTree = function(options) {
cms.form.ComboTree.superclass.constructor.call(this, options);
};
Ext.extend(cms.form.ComboTree, Ext.form.TriggerField, {
triggerClass : 'x-form-arrow-trigger',
shadow : 'sides',
lazyInit : true,
initComponent : function() {
cms.form.ComboTree.superclass.initComponent.call(this);
},
onRender : function(ct, position) {
Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
var hiddenName = this.name;
this.hiddenField = this.el.insertSibling({
tag : 'input',
type : 'hidden',
name : hiddenName
}, 'before', true);
this.hiddenField.value = this.value !== undefined ? this.value : 0;
this.el.dom.removeAttribute('name');
this.id = this.name;
if (!this.lazyInit) {
this.initList();
} else {
this.on('focus', this.initList, this, {
single : true
});
}
},
initList : function() {
if (this.list) {
return;
}
this.list = new Ext.Layer({
shadow : this.shadow,
cls : 'x-combo-list',
constrain : false
});
this.root = new Ext.tree.AsyncTreeNode({expanded :true});
this.list.setWidth(Math.max(this.wrap.getWidth(), 70));
tree = new Ext.tree.TreePanel({
autoScroll : true,
height : 200,
border : false,
root : this.root,
loader : this.loader
});
delete this.loader;
tree.on('click', this.onClick, this);
tree.render(this.list);
this.el.dom.setAttribute('readOnly', true);
this.el.addClass('x-combo-noedit');
},
expandNode : function(n, v){
var cs = n.childNodes;
for(var i = 0, len = cs.length; i < len; i++) {
if(cs[i].id == v){
return true;
}
if(expandNode(cs[i], v)){
cs[i].expand();
return true;
}
}
return false;
},
validateValue : function(value) {
return true;
},
validateBlur : function() {
return !this.list || !this.list.isVisible();
},
onDestroy : function() {
if (this.wrap) {
this.wrap.remove();
}
if (this.list) {
this.list.destroy();
}
cms.form.ComboTree.superclass.onDestroy.call(this);
},
isExpanded : function() {
return this.list && this.list.isVisible();
},
collapse : function() {
if (this.isExpanded()) {
this.list.hide();
}
},
onClick : function(node) {
this.setValue(node);
this.collapse();
},
setValue : function(v) {
var val = v;
if(typeof v === 'object'){
this.hiddenField.value = ((this.root && v.id == this.root.id) ? 0 : v.id);
val = v.text;
}
cms.form.ComboTree.superclass.setValue.call(this, val);
},
initEvents : function() {
cms.form.ComboTree.superclass.initEvents.call(this);
this.el.on('mousedown', this.onTriggerClick, this);
},
onTriggerClick : function() {
if (this.disabled) {
return;
}
if (this.isExpanded()) {
this.collapse();
this.el.focus();
} else {
this.onFocus({});
this.list.alignTo(this.wrap, 'tl-bl?');
this.list.show();
}
}
});
Ext.reg('combotree', cms.form.ComboTree);
做了些修改,重新发了代码,用法和普通field没有什么区别,功能也一样。目前没有遇到什么BUG。
- 大小: 16.3 KB
分享到:
相关推荐
实现Ext JS下拉树的关键在于正确配置`Ext.form.field.Tree`组件。以下是一些核心配置项的详细解释: 1. **store**:下拉树的数据源,通常是一个`Ext.data.TreeStore`实例,它管理着树结构中的节点数据。你需要定义...
综上所述,ExtJS 4.x的ComboboxTree组件是实现下拉树形菜单的强大工具,它结合了下拉框的简洁和树结构的层次感,提供了丰富的定制选项,能满足多种场景下的需求。理解并熟练掌握其用法,将极大地提升开发效率和用户...
组件名为`Ext.ux.comboboxtree`,它扩展了`Ext.form.field.Picker`,这表示我们是在原有的下拉选择框基础上添加自定义功能。`xtype`属性用于标识组件类型,方便在其他地方引用。 2. **配置项**(config): - `...
在ExtJS中,下拉列表通常由`Ext.form.field.ComboBox`类创建,而树结构则通过`Ext.tree.Panel`或`Ext.tree.View`来实现。要在下拉列表中展示树形数据,我们需要对这两个组件进行一些定制。 1. **组合框配置**: - ...
8. **`treepanel`:** 树型面板组件,用于展示层次结构的数据,通过`Ext.tree.TreePanel`类实现。 9. **`flash`:** Flash组件,用于在页面中嵌入Flash内容,自3.0版本开始支持,通过`Ext.FlashComponent`类实现。 ...
在ExtJS中,为了实现一个具有下拉树结构的ComboBox,即ComboBoxTree,通常需要自定义组件,因为原生的ExtJS库并不直接提供这样的功能。以下是对标题和描述中所述知识点的详细解释: 1. **自定义组件**: 在ExtJS中...
- **`checkbox` (Ext.form.Checkbox)**: 多选框组件,用于实现多选功能。 - **`combo` (Ext.form.ComboBox)**: 下拉框组件,提供了一个下拉列表供用户选择。 - **`datefield` (Ext.form.DateField)**: 日期选择项...
3. **`combo`** - `Ext.form.ComboBox`,下拉框组件,用于创建下拉选择框。 4. **`datefield`** - `Ext.form.DateField`,日期选择项,用于输入日期。 5. **`timefield`** - `Ext.form.TimeField`,时间录入项,...
- **用途**: 实现多标签页界面,便于组织大量信息。 **Ext.tree.TreePanel** - **描述**: 树型面板,用于展示层次结构的数据。 - **用途**: 文件系统、目录结构的可视化表示。 **Ext.FlashComponent** - **描述**:...
- **Ext.quicktips.init()**: 初始化快速提示功能,ExtJS 使用 `Ext.ToolTip` 和 `Ext.QuickTips` 两个组件来实现浮动提示功能。 - **Xtype 描述**: 定义了 ExtJS 中的基本组件类型及其描述,如按钮、滑动条、进度条...