`
柴秉承
  • 浏览: 87623 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Ext Combotree

阅读更多
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

    【叨、校长】Ext 下拉树插件_ComboTree_xz 是一个基于ExtJS库的扩展组件,用于在用户界面中实现下拉树形选择功能。这个插件将传统的下拉框与树形结构相结合,提供了更加灵活和直观的数据选择方式,尤其适用于需要...

    Extjs4.2自定义ComboTree

    Extjs4.2自定义ComboTree

    Extjs Combotree

    3. **创建Combotree组件**:使用ExtJS的`Ext.create`方法,指定组件类型为`Ext.tree.Panel`,并配置相关属性,如store(数据源)、displayField(显示字段)、width、height等。 4. **配置TreeStore**:为Combotree...

    EXT下拉框显示树形结构源代码

    通过阅读和理解"ComboTree.js"文件的代码,你可以掌握如何在EXT应用程序中实现下拉框显示树形结构的功能,这将对你的EXT开发技能有所提升。同时,也可以根据实际需求调整代码,实现更复杂的交互和定制化功能。

    ExtJs4实现下拉树选择框ComboTree

    `ComboTree` 在本文档中被定义为一个自定义类 `Slk.view.ui.ComboTree`,它继承自 `Ext.form.field.Picker` 类,并扩展了额外的功能来支持树形数据的选择。此组件不仅支持单选,还支持多选功能,并且可以通过配置来...

    Ext扩展整理后吐血奉献

    标题中的“Ext扩展整理后吐血奉献”表明这是一篇关于ExtJS框架扩展的深入解析文章,作者可能在研究和整理过程中投入了大量的时间和精力。ExtJS是一个广泛用于构建富客户端Web应用的JavaScript库,它提供了丰富的组件...

    comboxTree下拉树,实现单选功能

    var combotree = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择', store: treeStore, // 假设treeStore是预先配置好的树结构数据 displayField: 'text', valueField: 'id', ...

    ExtJS的xtype列表

    ExtJS 是一个强大的JavaScript应用程序框架,它提供了丰富的用户界面组件,用于构建富客户端应用。`xtype` 是ExtJS中的一个重要概念,它是组件类的简写形式,用于在配置对象中声明组件类型,使得代码更加简洁。...

    Extjs4 下拉树 TreeCombo

    var treeStore = Ext.create('Ext.data.TreeStore', { model: 'TreeNode', root: {text: '根节点', expanded: true, children: [/* 数据结构 */]} }); var treeCombo = Ext.create('Ext.form.field.Tree', { ...

    ExtJs3下拉树

    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....

    comboboxtree.js

    目前公司项目用的 ext 6.5 的 前台框架,在开发过程当中需要使用 到下拉树组件 ext原生并未提供此组件,网上的大部分都不能使用,于是乎自己根据需要手动进行封装,有需要的同学可进行下载.

    extjs下拉树

    在ExtJS中,下拉树是通过`Ext.form.field.Tree`类实现的,它继承自`Ext.form.field.ComboBox`,增加了树状结构的功能。`ComboTree.js`可能就是实现了这个功能的JavaScript文件,包含了一些定制化的代码或扩展。 ...

    ExtJS 下拉多选框lovcombo

    var provinceCombo = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '省份', store: provinceStore, queryMode: 'local', displayField: 'name', valueField: 'id', triggerAction: 'all', ...

    easyui+增强窗体 demo_ext为实例文件

    6、增加combotree对简单数据格式和类标准数据格式的加载,具体参考jquery.easyui.tree.extend.js文件开头说明。 7、修复datagrid.onConfirmEdit事件默认实现bug。 8、增加treegrid.onConfirmEdit事件。 2013-8-12 ...

    Extjs4 下拉树

    使用方法: var comb = Ext.create('Ext.ux.ComboTree',{ name:'xzqh', dicName:'test', width : 270, fieldLabel : '行政区划', url:'getDic', all:true, labelWidth : 60, multiple:true });

    bootstrap多功能下拉插件

    功能齐全,支持模糊匹配、多选等功能,能满足大部分需求,如果有用过easyui 或者 ext 你会发现其实他们的用法很相似的,配置项参数也基本相同 使用说明:http://blog.csdn.net/lzxadsl/article/details/48859625 ...

Global site tag (gtag.js) - Google Analytics