1. #1
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,526
    Vote Rating
    378
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default [Now Ext 3.0 Compatible] Grid RowActions Plugin

    [Now Ext 3.0 Compatible] Grid RowActions Plugin


    MAJOR UPDATE

    I have updated RowAction to RowActions (plural) that provides much more features. See http://rowactions.extjs.eu for details. See also Grid CellActions Plugin to get the full concept of grid actions.

    Cheers,
    Saki

    Note: You don't need RowAction + RowActions, use only RowActions. I keep RowAction here only as a reference for users who already used it.

    -------- Original post follows -------

    Hi folks,

    this plugin has been around on the Premium Help Forum for some time and I'm keeping referencing it in some of my answers so I thought that it would deserve it's own thread.

    What is it for? Imagine you need some icons in a grid that you want to bind some actions to: delete row, edit row, whatever. That is exactly what this plugin makes easy. It displays an icon and fires two events: beforeaction (return false to cancel) and action (here you put the action you want to execute). Arguments to event contain reference to grid, record of store of row being clicked and index of row.

    Code of plugin:
    PHP Code:
    // vim: ts=4:sw=4:nu:fdc=2:nospell
    /**
     * RowAction plugin for Ext grid
     *
     * Contains renderer for an icon and fires events when icon is clicked
     *
     * @author    Ing. Jozef Sakalos <jsakalos at aariadne dot com>
     * @date      December 29, 2007
     * @version   $Id: Ext.ux.grid.RowAction.js 126 2008-01-31 03:33:50Z jozo $
     *
     * @license Ext.ux.grid.RowAction is licensed under the terms of
     * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
     * that the code/component(s) do NOT become part of another Open Source or Commercially
     * licensed development library or toolkit without explicit permission.
     * 
     * License details: http://www.gnu.org/licenses/lgpl.html
     */

    Ext.ns('Ext.ux.grid');

    /**
     * @class Ext.ux.grid.RowAction
     * @extends Ext.util.Observable
     *
     * Creates new RowAction plugin
     * @constructor
     * @param {Object} config The config object
     *
     * @cfg {String} iconCls css class that defines background image
     */
    Ext.ux.grid.RowAction = function(config) {
        
    Ext.apply(thisconfig);

        
    this.addEvents({
            
    /**
             * @event beforeaction
             * Fires before action event. Return false to cancel the subsequent action event.
             * @param {Ext.grid.GridPanel} grid
             * @param {Ext.data.Record} record Record corresponding to row clicked
             * @param {Integer} rowIndex 
             */
             
    beforeaction:true
            
    /**
             * @event action
             * Fires when icon is clicked
             * @param {Ext.grid.GridPanel} grid
             * @param {Ext.data.Record} record Record corresponding to row clicked
             * @param {Integer} rowIndex 
             */
            
    ,action:true
        
    });

        
    Ext.ux.grid.RowAction.superclass.constructor.call(this);
    };

    Ext.extend(Ext.ux.grid.RowActionExt.util.Observable, {
         
    header:''
        
    ,sortable:false
        
    ,dataIndex:''
        
    ,width:20
        
    ,fixed:true
        
    ,lazyRender:true
        
    ,iconCls:''

        
    // private - plugin initialization
        
    ,init:function(grid) {
            
    this.grid grid;
            var 
    view grid.getView();
            
    grid.on({
                
    render:{scope:thisfn:function() {
                    
    view.mainBody.on({
                        
    click:{scope:thisfn:this.onClick}
                    });
                }}
            });
            if(!
    this.renderer) {
                
    this.renderer = function(valuecellrecordrowcolstore) {
                    
    cell.css += (cell.css ' ' '') + 'ux-grid3-row-action-cell';
                    var 
    retval '<div class="' this.getIconCls(recordrowcol) + '"';
                    
    retval += this.style ' style="' this.style '"' '';
                    
    retval += this.qtip ' ext:qtip="' this.qtip +'"' '';
                    
    retval += '> </div>';
                    return 
    retval;
                }.
    createDelegate(this);
            }
        } 
    // eo function init

        // override for custom processing
        
    ,getIconCls:function(recordrowcol) {
            return 
    this.boundIndex record.get(this.boundIndex) : this.iconCls;
        } 
    // eo function getIconCls

        // private - icon click handler
        
    ,onClick:function(etarget) {
            var 
    recordiconCls;
            var 
    row e.getTarget('.x-grid3-row');
            var 
    col this.grid.getView().getCellIndex(e.getTarget('.ux-grid3-row-action-cell'));

            if(
    false !== row && false !== col) {
                
    record this.grid.store.getAt(row.rowIndex);
                
    iconCls this.getIconCls(recordrow.rowIndexcol);
                if(
    Ext.fly(target).hasClass(iconCls)) {
                    if(
    false !== this.fireEvent('beforeaction'this.gridrecordrow.rowIndex)) {
                        
    this.fireEvent('action'this.gridrecordrow.rowIndexe);
                    }
                }
            }
        } 
    // eo function onClick
    });

    // eof 
    You need also css:
    Code:
    .ux-grid3-row-action-cell .x-grid3-cell-inner {
        padding: 1px 0 0 0;
    }
    .ux-grid3-row-action-cell .x-grid3-cell-inner div {
        background-repeat:no-repeat;
        width:16px;
        height:16px;
        cursor:pointer;
    }
    And an example usage would be:

    PHP Code:
    var action = new Ext.ux.grid.RowAction({iconCls:'xxx',qtip:'yyy'});
    var 
    grid = new Ext.grid.GridPanel({
        
    columns:[action, ....],
        
    plugins:[action, ....]
    });
    action.on('action', function(gridrecord) {...}); 
    Attached Images
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  2. #2
    Sencha User
    Join Date
    Nov 2007
    Posts
    61
    Vote Rating
    0
    vendiddy is on a distinguished road

      0  

    Default


    Thanks! I had some hacked-together code to accomplish something like this, but this is much better.

    I tried it and it works without any issues.

  3. #3
    Ext User
    Join Date
    Apr 2007
    Posts
    379
    Vote Rating
    0
    sfwalter is on a distinguished road

      0  

    Default


    I tried creating two instances but the my action listener seems to get called for all the instance. For example if I have 2 instances (a delete and a rollback button). When I click on the "rollback" button the delete action gets executed and vice versa.

    any thoughts?

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,526
    Vote Rating
    378
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    You need to have one instance per column. I'd suspect there some mismatch there - I use several row actions in one grid w/o troubles.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,526
    Vote Rating
    378
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Some code that illustrates that:
    PHP Code:
        ,initComponent:function() {

            
    this.actionOpen = new Ext.ux.grid.RowAction({
                 
    iconCls:'icon-go-tab'
                
    ,qtip:this.openSetText
            
    });
            
    this.actionDelete = new Ext.ux.grid.RowAction({
                 
    iconCls:'icon-trash-closed'
                
    ,qtip:this.deleteText
            
    });
            
    Ext.apply(this, {
                ......
                ,
    plugins:[
                     new 
    Ext.ux.grid.Search({position:'top'})
                    ,
    this.actionDelete
                    
    ,this.actionOpen
                
    ]
            ..... 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
    jerrybrown5 is on a distinguished road

      0  

    Default


    Saki,
    It looks really nice, but out of curiosity how difficult would it be to allow multiple actions to be in the same column? To take it to the final wish list step would it be possible to put an action item in the middle of a field while using a custom renderer on a grid column?

    Best regards,
    Jerry Brown

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,526
    Vote Rating
    378
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Quote Originally Posted by jerrybrown5 View Post
    Saki,
    It looks really nice, but out of curiosity how difficult would it be to allow multiple actions to be in the same column? To take it to the final wish list step would it be possible to put an action item in the middle of a field while using a custom renderer on a grid column?

    Best regards,
    Jerry Brown
    Something like on screenshot? I'll take a look
    Attached Images
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
    jerrybrown5 is on a distinguished road

      0  

    Default


    Thanks Saki. That is part of what I'm looking for. Also, I was thinking if you can put an action in a custom renderer (of course I would have to put a certain class name around the action button div) then I'll be able to put an action button in a grid grouping row.

    Best regards,
    Jerry Brown

  9. #9
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,526
    Vote Rating
    378
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    You can set your renderer from outside even in the current version. Take a look at the code.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  10. #10
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
    jerrybrown5 is on a distinguished road

      0  

    Default


    Saki,
    I guess I wasn't specific enough on my last question. After thinking about it more there are no troubles since (on my renderer) I can easily mimic the div structure on your renderer without having to add a new column.

    Thanks again.

    Jerry Brown

Thread Participants: 227

  1. franklt69 (10 Posts)
  2. Condor (3 Posts)
  3. Enrico (1 Post)
  4. Dumbledore (2 Posts)
  5. mystix (1 Post)
  6. riets003 (2 Posts)
  7. KRavEN (3 Posts)
  8. sfwalter (1 Post)
  9. Taurus (3 Posts)
  10. fshort (5 Posts)
  11. tchitani (2 Posts)
  12. temporary (1 Post)
  13. pantarhei (2 Posts)
  14. Specks (5 Posts)
  15. spotk (1 Post)
  16. cmendez21 (2 Posts)
  17. anjelika (3 Posts)
  18. askar (3 Posts)
  19. 6epcepk (1 Post)
  20. lkasdorf (1 Post)
  21. Gunmen (1 Post)
  22. mjlecomte (7 Posts)
  23. Nam (2 Posts)
  24. rekam (4 Posts)
  25. ZooKeeper (3 Posts)
  26. cking (1 Post)
  27. JEBriggs (1 Post)
  28. Yossi (9 Posts)
  29. border9 (2 Posts)
  30. justinfalk (1 Post)
  31. Spirit (6 Posts)
  32. gounis (1 Post)
  33. .andy (1 Post)
  34. robin30 (2 Posts)
  35. knt (2 Posts)
  36. Shmoo (2 Posts)
  37. Strati (1 Post)
  38. jerrybrown5 (12 Posts)
  39. KevinChristensen (1 Post)
  40. jon (2 Posts)
  41. BigTitus (2 Posts)
  42. elDub (4 Posts)
  43. fgerneth (2 Posts)
  44. elnove (2 Posts)
  45. vendiddy (1 Post)
  46. ray007 (6 Posts)
  47. dizelland (1 Post)
  48. donssmith (1 Post)
  49. horrikhalid (5 Posts)
  50. wasp (1 Post)
  51. cblin (1 Post)
  52. ncx5 (3 Posts)
  53. mask_hot (1 Post)
  54. teddyjas (2 Posts)
  55. Zolcsi (1 Post)
  56. PTG (5 Posts)
  57. yaroslav (2 Posts)
  58. Yoris (3 Posts)
  59. DhakouaniM (1 Post)
  60. lobo-tuerto (12 Posts)
  61. angelflaree (3 Posts)
  62. skhan (3 Posts)
  63. ibaniski (3 Posts)
  64. achebe (1 Post)
  65. svdb (1 Post)
  66. emily (6 Posts)
  67. jezmck (3 Posts)
  68. SAnDAnGE (1 Post)
  69. eliezerreis (4 Posts)
  70. nutflakes (2 Posts)
  71. RoDush (1 Post)
  72. tonig84 (2 Posts)
  73. kpmonroe (1 Post)
  74. KJedi (1 Post)
  75. javaeedeveloper (2 Posts)
  76. razvanioan (3 Posts)
  77. jla (2 Posts)
  78. max52 (1 Post)
  79. seppy (5 Posts)
  80. adz08 (1 Post)
  81. chalu (10 Posts)
  82. sekaijin (2 Posts)
  83. jimkan (1 Post)
  84. joao_candido (3 Posts)
  85. fanta2k (1 Post)
  86. nctag (3 Posts)
  87. yhwh (2 Posts)
  88. zmijanow (3 Posts)
  89. brizardh (3 Posts)
  90. zxyth (6 Posts)
  91. johnstontrav (2 Posts)
  92. dalad (2 Posts)
  93. niaz (4 Posts)
  94. armandoxxx (8 Posts)
  95. nojutsu (3 Posts)
  96. lfelican (2 Posts)
  97. DamienValentine (2 Posts)
  98. NoahK17 (10 Posts)
  99. shay2501 (2 Posts)
  100. sdileep (1 Post)
  101. pokerking400 (19 Posts)
  102. lacco (2 Posts)
  103. medley (8 Posts)
  104. archmisha (3 Posts)
  105. rizjoj (2 Posts)
  106. thephatp (2 Posts)
  107. descheret (1 Post)
  108. macedge (6 Posts)
  109. ttbgwt (2 Posts)
  110. allistar (3 Posts)
  111. emredagli (1 Post)
  112. Nadril (2 Posts)
  113. mbajema (1 Post)
  114. wwwtd (1 Post)
  115. Besessener (6 Posts)
  116. Chrissu (3 Posts)
  117. pavanextjs (6 Posts)
  118. javauser (2 Posts)
  119. AmitOlsys (7 Posts)
  120. afei (1 Post)
  121. kurtis (6 Posts)
  122. DamianHartin (2 Posts)
  123. kimmking (1 Post)
  124. jollyca (2 Posts)
  125. Rothariger (10 Posts)
  126. ThunderZtorm (3 Posts)
  127. Stephan Schrade (1 Post)
  128. groyk (2 Posts)
  129. bwhitehall (2 Posts)
  130. neteor (2 Posts)
  131. saipkjai (1 Post)
  132. randomuser01 (1 Post)
  133. kisjonnk (1 Post)
  134. divad (2 Posts)
  135. fxmisticat (2 Posts)
  136. dasnk (1 Post)
  137. klascano (1 Post)
  138. sarav (1 Post)
  139. ringfas (1 Post)
  140. iBeb (1 Post)
  141. kjleng (1 Post)
  142. resonante (4 Posts)
  143. wki01 (1 Post)
  144. quen567 (2 Posts)
  145. nightwatch (2 Posts)
  146. SunWuKung (2 Posts)
  147. nar (1 Post)
  148. mnc (1 Post)
  149. wgpubs (3 Posts)
  150. Stju (1 Post)
  151. d4rk knight (2 Posts)
  152. igor_vlad (1 Post)
  153. lassaad (1 Post)
  154. Dumas (5 Posts)
  155. s.m.srinivas (2 Posts)
  156. whodat (7 Posts)
  157. Kudzu (1 Post)
  158. nathanblogs (1 Post)
  159. leonardodaza (2 Posts)
  160. The Edge (1 Post)
  161. tahseen.ur.rehman (1 Post)
  162. Andrelmp (2 Posts)
  163. dfa (1 Post)
  164. cybersys (5 Posts)
  165. flylaputa (3 Posts)
  166. Tawez (2 Posts)
  167. Fred Seyffert (2 Posts)
  168. Jangla (7 Posts)
  169. agent29 (1 Post)
  170. vinaykurudi (1 Post)
  171. Jim.Barrows (2 Posts)
  172. PV-Patrick (1 Post)
  173. jakeext (2 Posts)
  174. quicksilver_in (12 Posts)
  175. dewoob (2 Posts)
  176. gelgoogho (1 Post)
  177. andyatmiami (1 Post)
  178. rat (1 Post)
  179. Margusja (6 Posts)
  180. charcalcado (1 Post)
  181. realjax (2 Posts)
  182. kartikayg (4 Posts)
  183. sanantone (1 Post)
  184. iryndin (2 Posts)
  185. Joel (2 Posts)
  186. jsemmanuel (2 Posts)
  187. jeffcirceo (1 Post)
  188. boldt (1 Post)
  189. schoonmoeder (2 Posts)
  190. kr1pton (2 Posts)
  191. 29er (1 Post)
  192. return1.at (1 Post)
  193. extjsnewb (1 Post)
  194. frrogoy (1 Post)
  195. hotdesc (2 Posts)
  196. a.bongardt (1 Post)
  197. King_Aero (1 Post)
  198. daiei27 (3 Posts)
  199. jasmina (3 Posts)
  200. winsent (1 Post)
  201. hsomesun (2 Posts)
  202. max.bertolini (1 Post)
  203. Dmoney (1 Post)
  204. maxazan (1 Post)
  205. cyChop (2 Posts)
  206. pipiet06 (2 Posts)
  207. asafm (2 Posts)
  208. adetogni (4 Posts)
  209. rebeccapeltz (10 Posts)
  210. enoal (3 Posts)
  211. rrpero (3 Posts)
  212. test45 (1 Post)
  213. kevDawg (3 Posts)
  214. anacab (1 Post)
  215. travin (1 Post)
  216. bidibule (1 Post)
  217. JimR (5 Posts)
  218. apurva_mistry (1 Post)
  219. pramodkhare (3 Posts)
  220. dm7777 (1 Post)
  221. extjs-dev (2 Posts)
  222. aveltens (1 Post)
  223. carlosgoias (1 Post)
  224. oeginc (2 Posts)
  225. schusco (3 Posts)
  226. katxeus (1 Post)
  227. ashetti (2 Posts)