【问题标题】:ExtJs clear checkboxes in a tree panelExtJs 清除树面板中的复选框
【发布时间】:2016-03-31 05:46:18
【问题描述】:

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

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

这是一个可以解释情况的小提琴。

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

【问题讨论】:

    标签: javascript extjs extjs5


    【解决方案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();
                        }
                    }
                }]
            });
        }
    });
    

    遍历所有节点,取消选中已选中的节点。挂起事件是为了防止视图在未选中时刷新每个节点,最后批量执行即可。

    【讨论】:

    • 不要忘记suspendEvents() 在控制器中调用时不能正常工作。
    猜你喜欢
    • 1970-01-01
    • 2023-03-18
    • 2011-01-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多