Question

如何在Extjs中使用if条件禁用删除按钮ex;我想在满足if条件的情况下禁用该按钮if if else保持启用状态。如果（validAction（entityHash.get（ 'entity.xyz'），actionHash.get（ 'action.delete'）））

这是网格删除按钮代码。

Ext.reg("gridheaderbar-inActive", Ad.GridInActiveButton,{     
             xtype: 'tbspacer', width: 5
});  

Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {

    //text: 'Delete',

    cls: 'ad-img-button',
    width:61,
    height:40,
    iconCls: 'ad-btn-icon',
    icon: '/webapp/resources/images/btn_del.png',
    handler:function(){

        statusChange(this.parentBar.parentGrid, 'Delete')
    }
});

Answer 1

创建actioncolumn并制作自定义渲染器：

{
    xtype: 'actioncolumn',
    width: 38,
    renderer: function (val, metadata, record) {
        this.items[0].icon = '${CONTEXT_PATH}/images/' + record.get('fileType') + '.png';
        this.items[0].disabled = !record.get('isDownloadActionEnable');
        this.items[1].disabled = !record.get('isDeleteActionEnable');
        metadata.style = 'cursor: pointer;';
        return val;
    },
    items: [
        {
            icon: '${CONTEXT_PATH}/images/pdf.png',  // Use a URL in the icon config
            tooltip: 'Download',
            handler: function (grid, rowIndex, colIndex) {
                //handle
            }
        },
        {
            icon: '${CONTEXT_PATH}/images/delete.png',  // Use a URL in the icon config
            tooltip: 'Delete',
            handler: function (grid, rowIndex, colIndex) {
                handle
            }
        }
    ]
}

在此示例中您还可以看到如何动态更改图标。

Answer 2

解决此问题的一种方法是在删除按钮上附加一个唯一ID，并将侦听器绑定到SelectionModel的 selectionchange 事件，每当选择更改时，您可以检查所需内容并启用/根据需要禁用按钮。

即。

Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
    id: 'btnDelete',
    cls: 'ad-img-button',
...
});

并在您的selectionmodel中执行以下操作：

var sm = new Ext.grid.CheckboxSelectionModel({
    ...
    ,listeners: {
        'selectionchange' : {
            fn: function(sm) {
                if (sm.hasSelection()) {
                    var selected = sm.getSelected();
                    if (selected.get('field') == value) {
                        Ext.getCmp('btnDelete').disable();
                    }
                    else {
                        Ext.getCmp('btnDelete').enable();
                    }
                }
            }
            ,scope: this
        }
    }
});

如何在Extjs中使用if条件禁用删除按钮

2 个答案: