1. #1
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    11
    Vote Rating
    2
    w_menzies is on a distinguished road

      1  

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

    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:

    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:

    Code:
          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

    Code:
      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

    Code:
      _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)

    Code:
      _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!
    Last edited by w_menzies; 10 Dec 2012 at 10:45 PM. Reason: Added caveats

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,341
    Vote Rating
    490
    scottmartin has a spectacular aura about scottmartin has a spectacular aura about scottmartin has a spectacular aura about

      0  

    Default

    Thank you for the contribution.

    Regards,
    Scott.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    11
    Vote Rating
    2
    w_menzies is on a distinguished road

      1  

    Default

    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 !

Thread Participants: 1

Tags for this Thread