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)

    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
    8,910
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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