javascript - 使用 selModel (selType :checkboxmodel)) 隐藏树面板中父节点上的复选框

Question

在 ExtJs 应用程序中，我想从树面板中隐藏或删除父节点中的复选框，我的意思是有什么方法可以隐藏主要类别的检查并只放入子节点？并在这些子节点中放置一个单选按钮；我正在使用 extjs 5.1 并且有代码

    Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tip.*',
    'Ext.tree.*'
]);

Ext.define('Post', {
    extend: 'Ext.data.TreeModel',
    idProperty: 'postid',
    fields: [{
        name: "title",
        convert: undefined
    }, {
        name: "threadid",
        convert: undefined
    }, {
        name: "username",
        convert: undefined
    }, {
        name: "userid",
        convert: undefined
    },  {
        name: "dateline",
        type: 'date',
        dateFormat: 'timestamp'
    }, {
        name: "postid",
        convert: undefined
    }, {
        name: "forumtitle",
        convert: undefined
    }, {
        name: "forumid",
        convert: undefined
    }, {
        name: "replycount",
        type: 'int',
        convert: undefined
    }, {
        name: "lastpost",
        dateFormat: 'timestamp',
        convert: undefined
    }, {
        name: "excerpt",
        convert: undefined
    }]
});

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();

    function renderTitle(value, p, record) {
        return value ? Ext.String.format(
            '<a href="http://sencha.com/forum/showthread.php?t={1}" target="_blank">{0}</a>',
            value,
            record.data.threadid
        ) : '';
    }

    function checkPrenderCapa() {

    }

    var store = Ext.create('Ext.data.TreeStore', {
        model: 'Post',
        proxy: {
            type: 'ajax',
            reader: 'json',
            url: 'forum-data.json'
        },
        lazyFill: false
    });

    var tree = Ext.create('Ext.tree.Panel', {
        title: 'Tabla de Contenido',
        width: 500,
        height: 400,
        renderTo: Ext.getBody(),
        reserveScrollbar: true,
        collapsible: true,
        collapseDirection: Ext.Component.DIRECTION_LEFT,
        loadMask: true,
        useArrows: true,
        draggable : true,
        rootVisible: false,
        store: store,
        animate: true,
        selModel: {
            selType: 'checkboxmodel'
        },
        columns: [{
            xtype: 'treecolumn', //this is so we know which column will show the tree
            text: 'Capa',
            flex: 2.5,
            sortable: true,
            dataIndex: 'forumtitle'
        },{
            text: 'Metadato',
            flex: 1,
            dataIndex: 'username',
            sortable: true
        }, {
            text: 'Activaci&oacute;n',
            flex: 2,
            dataIndex: 'title',
            renderer: renderTitle
        }],
        tbar: [{
            labelWidth: 130,
            xtype: 'triggerfield',
            fieldLabel: 'Nombre de la capa',
            triggerCls: 'x-form-clear-trigger',
            onTriggerClick: function() {
                this.reset();
                store.clearFilter();
                this.focus();
            },
            enableKeyEvents: true,
            listeners: {
                keyup: function() {
                    var field = tree.down('textfield'),
                        v;

                    try {
                        v = new RegExp(field.getValue(), 'i');
                        store.filter({
                            filterFn: function(node) {
                                var children = node.childNodes,
                                    len = children && children.length,

                                    // Visibility of leaf nodes is whether they pass the test.
                                    // Visibility of branch nodes depends on them having visible children.
                                    visible = node.isLeaf() ? v.test(node.get('title')) : false,
                                    i;

                                // We're visible if one of our child nodes is visible.
                                // No loop body here. We are looping only while the visible flag remains false.
                                // Child nodes are filtered before parents, so we can check them here.
                                // As soon as we find a visible child, this branch node must be visible.
                                for (i = 0; i < len && !(visible = children[i].get('visible')); i++);

                                return visible;
                            },
                            id: 'titleFilter'
                        });
                    } catch (e) {
                        field.markInvalid('Invalid regular expression');
                    }
                },
                buffer: 250
            }
        }]
    });
});

这是代码的捕获:

https://drive.google.com/file/d/0B6CZzmxH4VxrTVo2RGhjbzZiVEk/view?usp=sharing

Answer 1

我知道这不是您要找的东西，但这是我知道的做类似事情的唯一方法。

您可以通过在节点上设置 checked 属性来向树节点添加复选框。如果 checked:true，则复选框将呈现为已选中。只有具有 checked 属性的节点才会有复选框。

Sencha Fiddle Demo

相关代码:

root: {
    expanded: true,
    children: [{
        text: "detention",
        leaf: true,
        checked: false
    }, {
        text: "homework",
        expanded: true,
        checked: false,
        children: [{
            text: "book report",
            leaf: true,
            checked: true
        }, {
            text: "algebra",
            leaf: true
        }]
    }, {
        text: "other",
        expanded: true,
        children: [{
            text: "buy lottery tickets",
            leaf: true,
            checked: false
        }]
    }]
}