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)

    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