`
a729812804
  • 浏览: 42284 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext下拉树

    博客分类:
  • EXT
阅读更多

创建组件

 

 

 

        var root = new Ext.tree.AsyncTreeNode({expanded:true,id:'0',text:'全部'});
        var tree = new Ext.tree.TreePanel({
            loader: loader,
            id:'tree',
            border :false,
            editable:true,
            rootVisible:true,
            root:root,
            listeners :{
                'click':function(node,e)
                {
                    var title = node.attributes.text;
                     treeNoid = node.attributes.id;

                }

            }
        });

                var treeCombo = new ComboBoxTree({
                    id:'treeCombo',
                    allowBlank : true,
                    width:200,
                    allowUnLeafClick:true,//只允许选择叶子
                    treeHeight:200,
                    emptyText:'请选择栏目',
                    fieldLabel:'栏目',
                    tree:tree
                });

 

 

js 部分

 

 

var columnTitle = '上级栏目';
ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
    passName : 'parentId',
     fieldLabel : columnTitle,
    allowUnLeafClick : true,
    tpl: '<div id="treeTpl"></div>', //html代码
    treeHeight : 180,
    store : new Ext.data.SimpleStore({
        fields : [],
        data : [[]]
    }),
    //Default
    editable : false, // 禁止手写及联想功能
    mode : 'local',
    triggerAction : 'all',
    maxHeight : 500,
    selectedClass : '',
    onSelect : Ext.emptyFn,
    emptyText : '请选择...',
    clearValue : function(){
        if (this.passField){
            this.passField.value = '';
        }
        this.setRawValue('');
    },
    setPassValue: function(passvalue){
        if (this.passField)
        this.passField.value = passvalue;
    },
    onTreeSelected : function(node){

    },

    treeClk : function(node, e){
        if (!node.isLeaf()&& !this.allowUnLeafClick){
            e.stopEvent();// 非叶子节点则不触发
            return;
        }
        this.setValue(node.text);// 设置option值
        this.collapse();// 隐藏option列表
        if (this.passField)
        this.passField.value = node.id;// 以树的节点ID传递
        // 选中树节点后的触发事件
        this.fireEvent('treeselected', node);
    },
    initComponent : function(){
        ComboBoxTree.superclass.initComponent.call(this);
        this.tree.autoScroll = true;
        this.tree.height = this.treeHeight;
        this.tree.containerScroll = false;
        this.tplId = Ext.id();
        // overflow:auto"
        this.tpl = '<div id="' + this.tplId + '" style="' + this.treeHeight
        + '";overflow:hidden;"></div>';

        this.addEvents('treeselected');
        this.on('treeselected',this.onTreeSelected,this);
    },
    onViewClick : Ext.emptyFn,
    assertValue : Ext.emptyFn,
    listeners : {
        'expand' : {
            fn : function(){
                if (!this.tree.rendered && this.tplId){
                    this.tree.render(this.tplId);
                }
                this.tree.show();
            },
            single : true
        },

        'render' : {
        fn : function(){
            this.tree.on('click', this.treeClk, this);
            if (this.passName){
                this.passField = this.getEl().insertSibling({
                tag : 'input',
                type : 'hidden',
                name : this.passName,
                id : this.passId || Ext.id()
                }, 'before', true)
            }
            this.passField.value = this.passValue !== undefined
            ? this.passValue
            : (this.value !== undefined ? this.value : '');
            this.el.dom.removeAttribute('name');
            }
        },
        'beforedestroy' : {
            fn : function(cmp){
                this.purgeListeners();
                this.tree.purgeListeners();
            }
        }
    }
});
Ext.reg('combotree', ComboBoxTree);

  • 大小: 9.7 KB
分享到:
评论

相关推荐

    ext 下拉树 ext2

    标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件,其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序,它提供了一系列...

    ext 下拉树demo

    在IT领域,"ext 下拉树demo"是一个典型的前端开发示例,主要用于构建用户界面,特别是在数据管理和展示层级结构时。...对于前端开发者来说,掌握EXT下拉树的实现不仅能提升项目开发效率,还能增强对EXT框架的理解。

    Ext下拉树、下拉表格

    在本项目中,"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件:下拉树(ComboBox with Tree)和下拉表格(ComboBox with Grid)。这两种组件都是在输入框中展示可选择的列表,但呈现形式不同,下拉树以...

    ext下拉树真正强大可用

    采用同步树原理,真正可以直接用的下拉树,,希望对你有帮助

    ext js 下拉树

    下拉树(Dropdown Tree)是Ext JS中的一种特殊控件,它结合了下拉列表和树结构的功能,通常用于展示层次化的数据,并让用户从中选择一个或多个项。 下拉树的基本结构由两部分组成:一个文本框和一个关联的下拉面板...

    【叨、校长】Ext 下拉树插件_ComboTree_xz

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

    ext 下拉树

    在Ext 4.0版本中,下拉树的实现主要依赖于几个关键组件:`Ext.tree.Panel`(树面板)、`Ext.form.field.Tree`(树形字段)以及可能用到的`Ext.data.TreeStore`(树存储)。下面我们将详细探讨这些知识点: 1. **Ext...

    Ext下拉列表树

    Ext下拉列表树是一种在ExtJS框架中实现的组件,它结合了下拉列表和树形结构的功能,为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见,尤其适用于需要展现多级...

    利用Ext来实现的静态树(一次加载所有节点的树)

    利用Ext实现静态树(一次加载所有节点的树) 在今天的IT行业中,树形结构是一种非常常见的数据结构,尤其是在Web应用程序中。在这种情况下,我们通常会遇到一个问题,即如何将树形结构的数据加载到前台,以便用户...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...

    ext拼音搜索下拉树

    首先声明:本控件并非原创,但是有我的劳动成果。附件中有使用说明文档。如有问题请给我留言。我当时下下来的时候是这样的:比如有“北京贸易公司”这个节点,输入BJ才能搜索到,修改后可以搜索到节点包含的任意字符...

    ext2.0 树的增删改操作

    创建下拉树需要使用`Ext.form.ComboBox`,并配置其`store`为树形数据的`TreeStore`,`displayField`为显示的字段,`valueField`为选定节点时返回的值。此外,可能还需要设置`typeAhead`、`triggerAction`等属性以...

    ExtJS3 实现异步下拉树

    7. **扩展控件**:可能需要创建一个新的组件类,继承自`Ext.form.field.ComboBox`,并覆盖或扩展其默认行为,以实现下拉树的功能。 8. **配置项**:例如,`displayField`定义显示字段,`valueField`定义值字段,`...

    Ext3.0 原创下拉树 treeComoBox ,使用简单方便,亲身测试,绝对能用

    Ext3.0 原创下拉树 treeComoBox ,使用简单方便,亲身测试,绝对能用,该树可拉伸高度宽度,参数基本同ComoBox

    Extjs下拉多选树

    1. **下拉树组件**:在ExtJS中,树形组件(TreePanel)用于展示层次结构的数据。它支持动态加载、拖放操作、节点展开和折叠等功能。而下拉树是将树形结构嵌入到下拉框中,通常用于选择一组相关的项目,比如文件夹...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...

    Extjs4 多选下拉树

    在ExtJS4中,多选下拉树(Multi Select Tree)是一种用户界面组件,它结合了下拉菜单和树形结构,允许用户从层级结构中选择多个项目。这个组件在数据管理、分类选择等场景中非常实用。 在实现多选下拉树时,我们...

    extjs下拉树

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

    ExtJs下拉树

    - **渲染:** 下拉树的视图部分由Ext.view.Tree实现,它将数据模型转化为可视化的树结构。 - **交互:** 用户选择节点时,可以选择单个或多个,选择结果会显示在输入框中,同时可以通过监听事件来处理用户的选中...

Global site tag (gtag.js) - Google Analytics