Extjs comboboxtree

最新推荐文章于 2017-04-06 09:38:22 发布

_叔

最新推荐文章于 2017-04-06 09:38:22 发布

阅读量7.1k

点赞数

分类专栏： ExtJS 文章标签： extjs comboboxtree combotree

本文链接：https://blog.csdn.net/wzs298/article/details/45192175

版权

在ExtJS 5.1版本中，由于与3.2版本的差异，原版ComboTree组件无法使用。为满足特定功能需求，如单选/多选模式、不同选择类型，作者重新编写了一个ComboBoxTree组件。组件特点包括四种选择模式：全选、除根结点外可选、仅目录可选和仅叶子结点可选。此外，还提供了清理选中数据和绑定数据的使用示例。

摘要由CSDN通过智能技术生成

Extjs5.1版本，由于版本之间的差异过大，导致3.2上的ComboTree组件在5.1上用不了。
虽说在网上能找到一些可用的ComboboxTree组件，但是功能都不能满足我们的需求，于是自己重新写一个。

主要实现的功能如下：
1、单选/多选模式；
2、节点的选择方式：
    2.1、all:所有结点都可选中；
    2.2、exceptRoot：除根结点，其它结点都可选（默认）；
    2.3、folder:只有目录（非叶子和非根结点）可选；
    2.4、leaf：只有叶子结点可选
    2.5、不设置selectModel或者乱设置：所有节点不带check；只能单选

来几张效果图：

/**
 * Created by TNT on 2014/12/26.
 */
 
Ext.define("Ext.ux.ComboboxTree", {
    extend: "Ext.form.field.Picker",
    alias: "widget.comboboxtree",
    requires: ["Ext.tree.Panel"],
    config:{
        submitValue : ''//用于存放id
    },
    initComponent: function () {
        var self = this;
        Ext.apply(self, {
            fieldLabel: self.fieldLabel,
            labelWidth: self.labelWidth
        });
        self.callParent();
    },
    clearValue : function() {
        var me = this;
        var picker = me.getPicker();
        var root = picker.getRootNode();
        root.cascadeBy(function(node){
            if(node.get('checked')!= null){
                node.set('checked', false);
            }
        });
        me.setSubmitValue("");
        me.setValue("");
    },
    bindValue : function(value, submitValue) {
        var me = this;
        var picker = me.getPicker();
        var root = picker.getRootNode();
        var ids = submitValue.split(";");

        root.cascadeBy(function(node){
            if(node.get('checked')!= null){
                node.set('checked', false);
                for (var i = 0; i < ids.length; i++){
                    if(node.get('id') == ids[i]){
                        node.set('checked', true);
                    }
                }
            }
        });

        me.setSubmitValue(submitValue);
        me.se