javascript - ExtJs 清除树面板中的复选框

Question

在 extjs 应用程序中，我有一个树面板，正在从商店加载 json 数据。在该信息中，我有一个属性 checked ，它允许在树面板中的一行上操作复选框。

如何通过监听按钮以图形方式取消选中复选框？ (清除所有复选框)

这里有一个 fiddle 可以解释一下这种情况。

https://fiddle.sencha.com/#fiddle/17v3

Answer 1

像这样更新你的代码:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define('modeloCapa', {
            extend: 'Ext.data.Model',
            fields: ['nombre']
        });

        var treeStore = Ext.create('Ext.data.TreeStore', {
            model: 'modeloCapa',
            proxy: {
                type: 'ajax',
                url: "data1.json",
                reader: {
                    type: 'json',
                    root: 'Result'
                }
            }
        });

        var tree = Ext.create('Ext.tree.Panel', {
            title: 'Test',
            width: 500,
            store: treeStore,
            rootVisible: false,
            renderTo: Ext.getBody(),
            columns: [{
                xtype: 'treecolumn',
                flex: 2,
                sortable: true,
                dataIndex: 'titulo'
            }],tbar: [{
                xtype: 'button',
                 id: 'btnApagarCapas',
                 text : 'Button',
                 width: 100,
                 tooltip: 'Uncheck!!',
                 iconAlign : 'center',
                    listeners: {
                        click : function(){
                            treeStore.suspendEvents();
                            treeStore.getRootNode().cascadeBy(function(node) {
                                if (node.get('checked')) {
                                    node.set('checked', false);
                                }
                            });
                            treeStore.resumeEvents();
                            tree.getView().refresh();
                    }
                }
            }]
        });
    }
});

循环所有节点，取消选中的节点。挂起事件是为了防止 View 在未选中的情况下刷新每个节点，只需在最后批量执行即可。