extjs - Ext JS 6.5 - 现代网格禁用不工作

Question

我正在研究 Ext JS 6.5 现代。我有一些条件可以禁用该grid组件，用户只有查看grid其他人的权限。

我尝试了disabled配置和disable方法，但没有工作。这是我的小提琴。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {

            storeId: 'gridStore',

            fields: ['name'],

            data: [{
                name: 'Test 1'
            }, {
                name: 'Test 2'
            }, {
                name: 'Test 3'
            }, {
                name: 'Test 4'
            }]
        });

        Ext.create({
            xtype: 'grid',

            layout: 'fit',

            fullscreen: true,

            title: 'Baisc grid example',

            store: 'gridStore',

            //Here I have put {disabled: true} but not working
            disabled: true,

            columns: [{
                text: 'Name',
                flex: 1,
                dataIndex: 'name'
            }],

            listeners: {
                childtap: function (grid, location, eOpts) {
                    alert('childtap');
                }
            },

            items: [{
                xtype: 'toolbar',
                items: {
                    xtype: 'button',
                    ui: 'action',
                    text: 'Disabled grid',
                    iconCls: 'x-fa fa-ban',
                    handler: function () {
                        //IT is also not working
                        this.up('grid').setDisabled(true);
                        this.up('grid').disable();
                    }
                }
            }]

            //renderTo:Ext.getBody()

        });
    }
});

有人请帮助我解决禁用该grid组件的方法。

Answer 1

另一种方法是将grid's设置hideMode为opacity，然后将其设置为hidden( this.up('grid').setHidden(true);)。

例如（编辑你的小提琴）

Ext.create('Ext.data.Store', {

        storeId: 'gridStore',

        fields: ['name'],

        data: [{
            name: 'Test 1'
        }, {
            name: 'Test 2'
        }, {
            name: 'Test 3'
        }, {
            name: 'Test 4'
        }]

    });

    Ext.create({
        xtype: 'grid',

        layout: 'fit',

        fullscreen: true,

        title: 'Baisc grid example',

        store: 'gridStore',

        //Here I have put {disabled: true} but not working
        //disabled: true,

        hideMode: 'opacity',

        columns: [{
            text: 'Name',
            flex: 1,
            dataIndex: 'name'
        }],

        listeners: {
            childtap: function (grid, location, eOpts) {
                alert('childtap');
            }
        },

        items: [{
            xtype: 'toolbar',
            items: {
                xtype: 'button',
                ui: 'action',
                text: 'Disabled grid',
                iconCls: 'x-fa fa-ban',
                handler: function () {
                    this.up('grid').setHidden(true);
                }
            }
        }]

        //renderTo:Ext.getBody()

    });

你还需要这个 css 覆盖：

<style>
.x-hidden-opacity {
    opacity: 0.2 !important; //default is 0
    pointer-events: none;
}
</style>

Answer 2

作为一种解决方法，我们可以使用grid.setMasked(true);

这是Fiddle的示例。