EXTJS actionclomn点击切换图标单独设置disable

最新推荐文章于 2023-04-05 22:00:43 发布

绿苹果果

最新推荐文章于 2023-04-05 22:00:43 发布

阅读量2.3k

点赞数 1

分类专栏： ExtJs 文章标签： EXTJS actionclomn

本文链接：https://blog.csdn.net/dongshaoshuai/article/details/38729271

版权

ExtJs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

actionclomn列代码：

{
                            xtype: 'actioncolumn',
                            id: 'operate',
                            icon: '',
                            items: [
                                {
                                    handler: function(view, rowIndex, colIndex, item, e, record, row) {
                                        this.fireEvent('edit',record);
                                    },
                                    icon: 'images/edit.gif',
                                    tooltip: '编辑'
                                },
                                {
                                    handler: function(view, rowIndex, colIndex, item, e, record, row) {
                                        this.fireEvent('allow',rowIndex,record);
                                    },
                                    getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                                        if(store.getAt(rowIndex).get('allowlend')=="是")
                                        return 'icon_forbidden';
                                        else
                                        return 'icon_allow';

                                    },
                                    isDisabled: function(view, rowIndex, colIndex, item, record) {
                                        if(record.get('category')=="商业")
                                        return true;
                                    },
                                    tooltip: '是否允许借出'
                                },
                                {
                                    handler: function(view, rowIndex, colIndex, item, e, record, row) {

                                        this.fireEvent('delete',record);
                                    },
                                    disabled: false,
                                    icon: 'images/del.gif',
                                    tooltip: '删除'
                                }
                            ]
                        }

contoller部分代码：

 onActioncolumnDelete: function(record) {
        Ext.Msg.confirm("确认框", "确认删除《"+record.get('name')+"》?", function (btn) {
           if(btn=='yes')
               Ext.getCmp('book_gridpan').store.remove(record);
           });
    },

    onActioncolumnAllow: function(rowIndex, record) {
        if(record.get('allowlend')=="是")
            Ext.getStore('BookStore').getAt(rowIndex).set('allowlend','否');
        else
            Ext.getStore('BookStore').getAt(rowIndex).set('allowlend','是');
    },

实现操作列：
若'allowlend'字段为‘是’则显示icon-forbidden图标，点击该图标切换为‘icon-allow’并将'allowlend'字段改为’否’；为‘否’则显示‘icon-allow’图标，点击图标切换为icon-forbidden图标并将'allowlend'字段改为’是‘。

若‘category’字段为‘商业’则’allowlend‘字段不可修改