Threaded View

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


    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:


    Here is the plugin code:

    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>' +
      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;
          '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.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'){
        if (this.getPurchaseStore().getCount()){
            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)
          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 may wish to share!
    Last edited by w_menzies; 10 Dec 2012 at 10:45 PM. Reason: Added caveats

Thread Participants: 1

Tags for this Thread