ExtJS：Show/hide 控制复选框选择更改

Question

我有一个 ExtJS 检查树 ExtJS Check Tree，我正在尝试根据项目 checked/unchecked 添加一些控件。虽然它似乎没有正确触发。

当复选框 'A' 被 select 编辑时，我想隐藏文本字段 'testValue'，这有效，但是如果我取消 select 复选框 'A'，我想显示文本字段，'testValue'，这是行不通的。

对于这个测试，我只是想看看 selections.selected.length === 0。但是，当我取消select 任何复选框时，听众似乎没有触发，因为警报消息没有被触发 - 另外，如果我然后尝试再次重新select 复选框它仍然没有开火。

我会使用 selection 模型（如下所述）来实现此目的（因为我知道它有效），但是当我只想拥有叶子时，这会在我所有的树项目上放置复选框带有复选框的节点。

selModel: {
        type: 'checkboxmodel',
        listeners: {
            selectionchange: 'onCheckedNodesChange'
        }
    }

欢迎提出任何建议！

编辑添加 allowDeselect: true 和 select 和 deselect 的监听器有点奏效（我更新了 Fiddle 以展示行为）：

 selModel: {  
                allowDeselect: true,
                listeners: {
                    deselect: function(model, record, index) {
                        text = record.get('text');
                        alert(text);
                    },
                    select: function(model, record, index) {
                        text = record.get('text');
                        alert(text);
                    }
                }

            },

我想确保当 'A' 被 select 编辑时，文本字段保持隐藏状态，但是如果您 select 列表中的另一个项目然后 deselect 它，文本字段 returns.

我试图在 selectionchange 事件发生时单独使用 getChecked() 方法。但是，当我提交时，这似乎只有 return 数据（例如，在 Get checked nodes 控件上）。欢迎提出任何建议。这个应该不难吧。

Answer 1

您看到的复选框不是选择行为的一部分。相反，它们来自 NodeInterface class.

上的 checked configuration

您的树面板正在使用 default selModel，这是基于行的选择，没有取消选择选项。如果您希望树内检查来控制选择，则需要手动配置，可能是通过监听商店中的更改事件。

OTH，如果你只关心找出哪些项目被选中，你可以使用 the getChecked() method on the TreePanel

Answer 2

对于树面板，我们有 checkchange 事件，它类似于 selectionchange 事件。

http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.tree.Panel-event-checkchange

checkchange（节点，检查，eOpts）当一个带有复选框的节点检查属性更改

时，会发射。

参数节点：Ext.data.TreeModel 检查的节点属性已更改。

选中：布尔值节点的新检查状态

eOpts：对象传递给 Ext.util.Observable.addListener.

的选项对象

var fields = [
            {
                name: 'column'
            },
            {
                name: 'leaf',
                type: 'boolean'
            },
            {
                name: 'checked',
                type: 'boolean'
            },
            {
                name: 'cls',
                type: 'string',
                defaultValue: 'x-tree-noicon'
            },
        ];

        this.dataModel = Ext.define('Filter-' + this.getId(), {
            extend: 'Ext.data.Model',
            fields: fields,
        });


     columns: [
                 {
                            xtype: 'treecolumn',
                            width: 200,
                            itemId: "filter",
                            dataIndex: 'column' ,
                            renderer: function (val, metaData, r) {

                            },
                            scope: this,
                        },
                    ],
                    listeners: {
                        'checkchange': Ext.bind(function (node, checked,eOpts)         { 
                        },
                        scope: this

ExtJS：Show/hide 控制复选框选择更改

ExtJS: Show/hide control on checkbox selectionchange

checkbox

listener

show

hide

extjs5