基于网格数据extjs 6.2禁用tbar按钮

Question

有条件地我需要禁用基于网格 json 数据的工具栏按钮，如果状态不是 "New"

tbarItems.push(
            "->",
            {
                text: t('import'),
                id: 'masterdata_import',
                iconCls: 'pimcore_icon_import',
                disabled: false,
                scale: 'small',
                handler: this.importJob.bind(this),
                dataIndex: 'status',
                renderer: function (value, rowIndex, record) {
                    if (value !== 'New') {
                        tbar.disable();
                    }
                },
            }
        );

https://i.stack.imgur.com/8hVmN.png

知道怎么做吗？谢谢

Answer 1

我在 sencha fiddle 做了一个例子。看看：

https://fiddle.sencha.com/#view/editor&fiddle/2qs3

您可以将禁用的参数绑定到 viewModel 的参数，而 viewModel 可以更新，例如当存储中的数据更改时（触发事件 datachanged）。

getLayout: function () {

if (this.layout == null) {

    var itemsPerPage = pimcore.helpers.grid.getDefaultPageSize(70);
    this.store = pimcore.helpers.grid.buildDefaultStore(

        '/admin/referenceapp/import/get-import-files?processed=0',
        ['date','time','sourceFileLocation','sizeReadable','status','jobReference'],

        itemsPerPage,
        {autoLoad: true}
    );


    // only when used in element context
    if(this.inElementContext) {
        var proxy = this.store.getProxy();
        proxy.extraParams["folderDate"] = this.element.folderDate;
    } else {

    }

    this.pagingtoolbar = pimcore.helpers.grid.buildDefaultPagingToolbar(this.store);



    var tbarItems = [];

    tbarItems.push(
        "->",
        {
            text: t('import'),
            id: 'masterdata_import',
            iconCls: 'pimcore_icon_import',
            //disabled: false,
            scale: 'small',
            bind: {
                disabled: "{one_different_than_new}"
            },
            handler: this.importJob.bind(this)
        }
    );


    var tbar = Ext.create('Ext.Toolbar', {
        cls: 'main-toolbar',
        items: tbarItems
    });

    var columns = [
        {text: t("date"), sortable: true, dataIndex: 'date', flex: 100, filter: 'date'},

        {text: t("time"), sortable: true, dataIndex: 'time', flex: 100, filter: 'string'},

        {text: t("source_file_location"), sortable: true, dataIndex: 'sourceFileLocation', filter: 'string', flex: 200},

        {text: t("size"), sortable: true, dataIndex: 'sizeReadable', filter: 'string', flex: 200},

        {text: t("status"), sortable: true, dataIndex: 'status', filter: 'string', flex: 200},

        {text: t("jobReference"), sortable: true, dataIndex: 'jobReference', filter: 'string', flex: 200},

        ];

    columns.push({
        xtype: 'actioncolumn',
        menuText: t('delete'),
        width: 40,
        dataIndex: 'status',
        renderer: function (value, rowIndex, record) {
            if (value !== 'New') {
                rowIndex.tdCls = 'importnotdelete'
            }
        },
        disabled:false,
        items: [{
            tooltip: t('icon_delete_import'),
            icon: "/bundles/pimcoreadmin/img/flat-color-icons/delete.svg",
            handler: this.removeVersion.bind(this)
        }]
    });

    var plugins = [];

    this.grid = new Ext.grid.GridPanel({
        frame: false,
        title: t('plugin_referenceapp_masterdataname_importview'),
        store: this.store,
        region: "center",
        columns: columns,
        columnLines: true,
        bbar: Ext.create('Ext.PagingToolbar', {
            pageSize: 0,
            store: this.store,
            displayInfo: true,
            limit:0
        }),
        tbar: tbar,
        stripeRows: true,
        autoScroll: true,
        plugins: plugins,
        viewConfig: {
            forceFit: true
        },
        viewModel: {
            data: {
                "one_different_than_new": false
            }
        },

        //listeners: {
        //    afterrender : function(model) {
        //        console.log(model.store.data.items);
        //
        //        for(i = 0; i<model.store.data.items.length; i++){
        //
        //            if (model.store.data.items[i].status !== 'New') {
        //                tbar.disable();
        //                //console.log('test');
        //            }
        //
        //            else{
        //                //console.log('no new');
        //            }
        //        }
        //
        //    }
        //}
    });

    this.grid.on("rowclick", this.showDetail.bind(this));

    this.detailView = new Ext.Panel({
        region: "east",
        minWidth: 350,
        width: 350,
        split: true,
        layout: "fit"
    });


    var layoutConf = {
        items: [this.grid, this.detailView],
        layout: "border",
        //closable: !this.inElementContext
    };

    if(!this.inElementContext) {
        //layoutConf["title"] = t('product_versions');
    }

    this.layout = new Ext.Panel(layoutConf);

    this.layout.on("activate", function () {
        this.store.load();

        var check = function () {
             var isDifferentThanNew = false;
             this.store.each(function (r) {
                 if (r.get('status') != 'New') {
                     isDifferentThanNew = true;
                 }
             });
             this.grid.getViewModel().set('one_different_than_new', isDifferentThanNew);
        }

        // Listen on datachanged and update
        this.store.on('update', function (s) {
            check();
        });

        this.store.on('datachanged', function (s) {
            check();
        });

        check();




    }.bind(this));

}

return this.layout;
},

基于网格数据extjs 6.2禁用tbar按钮

Disable tbar button based on grid data extjs 6.2

extjs

extjs6.2