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);
分享到:
相关推荐
【叨、校长】Ext 下拉树插件_ComboTree_xz 是一个基于ExtJS库的扩展组件,用于在用户界面中实现下拉树形选择功能。这个插件将传统的下拉框与树形结构相结合,提供了更加灵活和直观的数据选择方式,尤其适用于需要...
Extjs4.2自定义ComboTree
3. **创建Combotree组件**:使用ExtJS的`Ext.create`方法,指定组件类型为`Ext.tree.Panel`,并配置相关属性,如store(数据源)、displayField(显示字段)、width、height等。 4. **配置TreeStore**:为Combotree...
通过阅读和理解"ComboTree.js"文件的代码,你可以掌握如何在EXT应用程序中实现下拉框显示树形结构的功能,这将对你的EXT开发技能有所提升。同时,也可以根据实际需求调整代码,实现更复杂的交互和定制化功能。
`ComboTree` 在本文档中被定义为一个自定义类 `Slk.view.ui.ComboTree`,它继承自 `Ext.form.field.Picker` 类,并扩展了额外的功能来支持树形数据的选择。此组件不仅支持单选,还支持多选功能,并且可以通过配置来...
标题中的“Ext扩展整理后吐血奉献”表明这是一篇关于ExtJS框架扩展的深入解析文章,作者可能在研究和整理过程中投入了大量的时间和精力。ExtJS是一个广泛用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件...
var combotree = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择', store: treeStore, // 假设treeStore是预先配置好的树结构数据 displayField: 'text', valueField: 'id', ...
ExtJS 是一个强大的JavaScript应用程序框架,它提供了丰富的用户界面组件,用于构建富客户端应用。`xtype` 是ExtJS中的一个重要概念,它是组件类的简写形式,用于在配置对象中声明组件类型,使得代码更加简洁。...
var treeStore = Ext.create('Ext.data.TreeStore', { model: 'TreeNode', root: {text: '根节点', expanded: true, children: [/* 数据结构 */]} }); var treeCombo = Ext.create('Ext.form.field.Tree', { ...
xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, rootVisible : false, root : new Ext....
目前公司项目用的 ext 6.5 的 前台框架,在开发过程当中需要使用 到下拉树组件 ext原生并未提供此组件,网上的大部分都不能使用,于是乎自己根据需要手动进行封装,有需要的同学可进行下载.
在ExtJS中,下拉树是通过`Ext.form.field.Tree`类实现的,它继承自`Ext.form.field.ComboBox`,增加了树状结构的功能。`ComboTree.js`可能就是实现了这个功能的JavaScript文件,包含了一些定制化的代码或扩展。 ...
var provinceCombo = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '省份', store: provinceStore, queryMode: 'local', displayField: 'name', valueField: 'id', triggerAction: 'all', ...
6、增加combotree对简单数据格式和类标准数据格式的加载,具体参考jquery.easyui.tree.extend.js文件开头说明。 7、修复datagrid.onConfirmEdit事件默认实现bug。 8、增加treegrid.onConfirmEdit事件。 2013-8-12 ...
使用方法: var comb = Ext.create('Ext.ux.ComboTree',{ name:'xzqh', dicName:'test', width : 270, fieldLabel : '行政区划', url:'getDic', all:true, labelWidth : 60, multiple:true });
功能齐全,支持模糊匹配、多选等功能,能满足大部分需求,如果有用过easyui 或者 ext 你会发现其实他们的用法很相似的,配置项参数也基本相同 使用说明:http://blog.csdn.net/lzxadsl/article/details/48859625 ...