• If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

Announcement

Collapse
No announcement yet.

Disable actioncolumn after click

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Disable actioncolumn after click

    Hi Guys. Trying to prevent an extra click to make server call before the first server call is done, which would drop record from Store/grid after refresh. Easy with button on panel, not so figuring out syntax on actioncolumn because the isDisabled config no help. Web forums have no decent ideas here. Is it as simple as putting "this.disable()" in the handler section before firing event to controller?

    Thinking not, that "this" is not just the actioncolumn in this context. So not sure how to get reference to the itemId of actioncolumn in the handler. Any input appreciated. Thanks!

  • #2
    Hi Terry,

    You can do this via the action columns getClass method. Here is a Sencha Fiddle I through together that hides the action after you click it then simulates some process and reshows it after 5 seconds.

    Please let me know if you have any questions.

    Here is the base example:
    Code:
            Ext.create('Ext.grid.Panel', {
                title    : 'Action Column Demo',
                store    : Ext.data.StoreManager.lookup('employeeStore'),
                columns  : [{
                    text      : 'First Name',
                    dataIndex : 'firstname'
                }, {
                    text      : 'Last Name',
                    dataIndex : 'lastname'
                }, {
                    xtype : 'actioncolumn',
                    width : 50,
                    items : [{
                        iconCls  : 'x-fa fa-cog',
                        tooltip  : 'Edit',
                        handler  : function (grid, rowIndex, colIndex) {
                            var rec = grid.getStore().getAt(rowIndex);
                            alert("Edit " + rec.get('firstname'));
    
                            // hide the action
                            //  "just creating a field [hideEdit] on the fly so we can show/hide it"
                            //
                            rec.set('hideEdit', true);
                            rec.commit();
    
                            // simulating doing some type of process
                            //  then reshowing it 5 seconds
                            setTimeout(function () {
                                rec.set('hideEdit', false);
                                rec.commit();
                            }, 5000)
                        },
                        getClass : function (value, meta, rec) {
                            var hideEdit = rec.get('hideEdit');
    
                            // check if we should hide this action based on the record/field hideEdit
                            //
                            if (!Ext.isEmpty(hideEdit) && hideEdit) {
                                // hide the action
                                //
                                return 'x-hidden';
                            }
    
                            // don't hide the action
                            //
                            return 'x-fa fa-cog';
                        }
                    }]
                }],
                width    : 250,
                renderTo : Ext.getBody()
            });

    Comment


    • #3
      Ahhh, I see Johnny. That's what I was struggling with, that column was not in a rec/store, it's just a UI component. Never would have figured out to just manipulate CSS, never used getClass in any of my code.

      I think in this particular use case I'll switch techniques away from actioncolumn, just have a checkbox field in store and use button on grid to submit store to server and process only recs with that have been checked. User and I were leaning to going that direction anyway for another reason. But at least I know how to handle this if I ever need to. Thank you!

      Comment

      Working...
      X