Simple plugin to add icon in grid column header (using 4.1.1a in MVC Architecture)

[w_menzies]

This is a very simple plugin to satisfy my initial requirement...and here is my requirement:

• provide an Action Column to delete a selected row

• provide a clickable image in the column header to quickly delete all rows

Here is an example image of the requirement:

ColumnHeaderImage.jpg

Here is the plugin code:

Ext.ns('Ext.ux');
Ext.define('Ext.ux.ColumnButton', {
  extend: 'Ext.Component',
  alias: 'plugin.columnbutton',
  requires: ['Ext.Component'],

  btnCls    : '',
  btnTip    : '',
  
  renderTpl :   //taken from ..src/grid/Column.js
        '<div id="{id}-titleEl" {tipMarkup}class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
            '<div id="{id}-buttonEl" class="{btnCls}" ' +  //add markup for button 
                '<tpl if="btnTip !== \'\'">'+              //add button tip if set
                  'data-qtip="{btnTip}"' +
                '</tpl>' +
                'style="width:16px;height:22px;position:relative;left:-5px;cursor:pointer;">' +
            '</div>' +
            '<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'column-header-text">' +
                '{text}' +
            '</span>' +
            '<tpl if="!menuDisabled">'+
                '<div id="{id}-triggerEl" class="' + Ext.baseCSSPrefix + 'column-header-trigger"></div>'+
            '</tpl>' +
        '</div>' +
        '{%this.renderContainer(out,values)%}',
        
  init: function(column) {
    var me = this;
    me._column = column;
    me._column.renderTpl  = me.renderTpl;
    me._column.renderData = {
      'btnCls' : me.btnCls,  //mandatory
      'btnTip' : me.btnTip
    };
    me._column.renderSelectors = {
      'btnEl' : 'div.' + me.btnCls    //define property to directly access element in controller 
    };
    me._column.childEls.push('buttonEl');   //add buttonEl to array so it will be destroyed automatically
    me._column.menuDisabled = true;
    me._column.text = '';
  }, //eo init
});

Here is how the plugin is used in the View model:

      xtype     : 'actioncolumn',
      width     : 20,
      sortable  : false,
      items     : [{
        tooltip : 'Delete Topup',
        iconCls : 'icon-cross',
        handler : function(grid, row, col){
          OTiS.UL.getApplication().fireEvent('deletepurchase', grid, row, col);
        }
      }],
      plugins   : [{
        ptype   : 'columnbutton',
        itemId  : 'btnDelete',
        btnCls  : 'icon-cross', //image CSS class name 
        btnTip  : 'Delete all topups' //set help tip to display
      }]

and finally here is the code for the Controller model.
There are 3 separate sections required

1st section - define an 'afterrender' action after the action column header has been rendered

  init: function(){
    var me = this;
    me.control({
      'topuppurchaselist > headercontainer > actioncolumn'  : {
        afterrender: me._onAfterRenderActionColumn
      }
    });
  }, // eo init

2nd section - after the render process...get the actual image element and define the 'click' handler you require when its clicked

  _onAfterRenderActionColumn: function(sender){
    var me = this;
    Ext.fly(sender.buttonEl).on(
      'click', 
      Ext.bind(me._onClickBtnDelete, me, [sender.buttonEl])
    );
  }, // eo _onAfterRenderActionColumn

3rd section - define 'click' handler (the actual action that will be performed when the image is clicked)

  _onClickBtnDelete: function(sender){
    var _callback = function(btn){
      if (btn == 'yes'){
        this.getPurchaseStore().removeAll();
      }
    };
    if (this.getPurchaseStore().getCount()){
      OTiS.UL.showMsg({
        form: this, 
        centerToWorkspace: true, 
        msg: 'Please confirm you wish to delete all the topups purchased.', 
        buttons: Ext.Msg.YESNO, 
        icon : Ext.Msg.QUESTION, 
        cb : Ext.bind(_callback, this)
      });
    }else{
      OTiS.UL.showMsg({form: this, centerToWorkspace: true, msg: 'Sorry, this action cannot be performed as there are no topup purchase added to your list.'}); 
    } 
  }, // eo _onClickBtnDelete

Few caveats:

• future version of Ext JS may change the column definition of renderTpl

• the use of column menu for the action column is forcefully disabled

• also column text for the action column is forcefully set to blank i.e. no text will be displayed

As I stated at the beginning, this is a very simple implementation for my needs...feel free to improve or expand to suit your requirement...or if you have a better or more elegant implementation...you may wish to share!

[scottmartin]

Thank you for the contribution.

Regards,
Scott.

[w_menzies]

No problem...it's all about sharing the knowledge...so others can understand and build better apps.

Thought I should add a couple of important caveats ! (see original post)

@Sencha Team....Keep up the excellent work !