CODEWITHSUNDEEP
extjs
NikZ
NikZ

Reputation: 660

EXTJS conditionally hide icon

I have an EXTJS grid with 2 actioncolumns with icons only. How do I set the renderer to hide the icon if IsApproved = true? I've tried this.columns[0].items[0].icon = ''; but get an error of this.columns isn't defined.

columns: [
                    { header: 'Name', dataIndex: 'Name', flex: 1 },
                    { header: 'Login', dataIndex: 'Login', flex: 1 },
                    { header: 'Registered', dataIndex: 'RegisteredOn', flex: 1 },
                    { header: 'Invited', dataIndex: 'InvitationSent', flex: 1 },
                    { xtype: 'actioncolumn',
                        width: 40,
                        header: 'Invite',
                        tdCls: 'clickable',
                        renderer: function (value, metadata, record) {
                            if (record.get('IsApproved')) {
                               //HIDE ICON
                            } else {
                                //SHOW ICON
                            }
                        },
                        items: [{
                            icon: '/images/icon_email.png',
                            tooltip: 'Invite',
                            scope: this,
                            handler: this.inviteClick
                        }]
                    },
                    { xtype: 'actioncolumn', width: 40, header: 'Edit', tdCls: 'clickable', items: [{
                        icon: '/images/pencil.png',
                        tooltip: 'Edit',
                        scope: this,
                        handler: this.editClick
                    }]
                    }
                ],

Upvotes: 1

Views: 3832

Answers (1)

Nail Shakirov
Nail Shakirov

Reputation: 654

Try my way - if your condition true, so you put icon in cell, in other situation, you don't: 

                {
                    xtype: 'actioncolumn',
                    width: 70,
                    align: 'center',
                    dataIndex: 'yourDataIndex',
                    menuDisabled: 'true',
                    text: 'sometext',
                    sortable: false,
                    fixed: 'true',
                    renderer: function (value, metadata, record) {
                        if (record.get('IsApproved')) {
                            metadata.tdCls = 'mycss'
                        }
                    }
                }

and add css for your situation: 

.mycss {
    background-position:center  !important;
    width: auto !important;
    background-repeat: no-repeat;
    background-image: url("yourIcon.png") !important; 
}

Upvotes: 3

Related Questions