ExtJ清除树面板中的复选框

Question

In a extjs app, I have a tree panel that is loading json data from a store. In that information I have a property checked that allows manipulate a checkbox over a row in the tree panel.

How can I do to uncheck graphically the checkbox by listening a button? (Clean all checked boxes)

Here's a fiddle that explain a bit the situation.

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

Answer 1

Update your code like so:

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();
                    }
                }
            }]
        });
    }
});

Loop over all the nodes, uncheck the ones that are checked. The suspend events is to prevent the view from refreshing each node as it is unchecked, just do it in bulk at the end.