1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    13
    Vote Rating
    0
    kayakyakr is on a distinguished road

      0  

    Default Ext.ux.grid.xActionColumn: a (young) replacement for RowActions built on ActionColumn

    Ext.ux.grid.xActionColumn: a (young) replacement for RowActions built on ActionColumn


    RowActions was probably my favorite plugin/extension, but I was very happy to see the functionality rolled into primary Ext 3.3 in the form of ActionColumn. Unfortunately, it was missing a bunch of features that I had gotten used to. So here's what I put together to gain the 2 things I needed: autoWidth and hide/showField.

    Usage:
    Code:
    new Ext.grid.GridPanel({
        store: myStore,
        columns: [
            {
                xtype: 'xactioncolumn',
                items: [
                    {
                        icon     : 'sell.gif',                // Use a URL in the icon config
                        width    : 21,
                        height   : 10,
                        showField: 'quantity' // shows if record.get('quantity') is truthy (in this case if quantity > 0)
                    },
                    {
                        icon     : 'buy.gif',
                        hideField: 'no_money' // hides if record.get(hideField) is truthy
                    }
                ]
            }
            //any other columns here
        ]
    });
    Source:
    Code:
    Ext.ns("Ext.ux.grid");
    
    /**
     * @class Ext.ux.grid.xActionColumn
     * @extends Ext.grid.ActionColumn
     * <p>A Grid column type which renders an icon, or a series of icons in a grid cell, and offers a scoped click
     * handler for each icon. This expands on the Action column by including autoWidth and hideable buttons. Example usage:</p>
    <pre><code>
    new Ext.grid.GridPanel({
        store: myStore,
        columns: [
            {
                xtype: 'xactioncolumn',
                items: [
                    {
                        icon     : 'sell.gif',                // Use a URL in the icon config
                        width    : 21,
                        height   : 10,
                        showField: 'quantity' // shows if record.get('quantity') is truthy (in this case if quantity > 0)
                    },
                    {
                        icon     : 'buy.gif',
                        hideField: 'no_money' // hides if record.get(hideField) is truthy
                    }
                ]
            }
            //any other columns here
        ]
    });
    </pre></code>
     */
    Ext.ux.grid.xActionColumn = Ext.extend(Ext.grid.ActionColumn, {
        /**
         * @cfg {String} hideField
         * Optional. The record field that indicates if a button should be hidden. Hides whenever record.get(hideField) is truthy.
         */
        /**
         * @cfg {String} showField
         * Optional. The record field that indicates if a button should be hidden. Hides whenever record.get(showField) is not truthy.
         */
        /**
         * @cfg {Number} height
         * Optional. The height of the image, set on the image for image scaling
         */
        /**
         * @cfg {Number} width
         * Optional. The width of the image, used in calculating auto size and set on the image for image scaling. (default: 16)
         */
        /**
         * @cfg {Array} items An Array which may contain multiple icon definitions, each element of which may contain:
         * <div class="mdetail-params"><ul>
         * <li><code>icon</code> : String<div class="sub-desc">The url of an image to display as the clickable element
         * in the column.</div></li>
         * <li><code>iconCls</code> : String<div class="sub-desc">A CSS class to apply to the icon image.
         * To determine the class dynamically, configure the item with a <code>getClass</code> function.</div></li>
         * <li><code>getClass</code> : Function<div class="sub-desc">A function which returns the CSS class to apply to the icon image.
         * The function is passed the following parameters:<ul>
         *     <li><b>v</b> : Object<p class="sub-desc">The value of the column's configured field (if any).</p></li>
         *     <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
         *         <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
         *         <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell
         *         (e.g. 'style="color:red;"').</p></li>
         *     </ul></p></li>
         *     <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data.</p></li>
         *     <li><b>rowIndex</b> : Number<p class="sub-desc">The row index..</p></li>
         *     <li><b>colIndex</b> : Number<p class="sub-desc">The column index.</p></li>
         *     <li><b>store</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
         * </ul></div></li>
         * <li><code>handler</code> : Function<div class="sub-desc">A function called when the icon is clicked.</div></li>
         * <li><code>scope</code> : Scope<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the
         * <code>handler</code> and <code>getClass</code> functions are executed. Fallback defaults are this Column's
         * configured scope, then this Column.</div></li>
         * <li><code>tooltip</code> : String<div class="sub-desc">A tooltip message to be displayed on hover.
         * {@link Ext.QuickTips#init Ext.QuickTips} must have been initialized.</div></li>
         * <li><code>width</code> : Number<div class="sub-desc">The width of the image, used in calculating auto size and set on the image for image scaling. (default: 16)</div></li>
         * <li><code>height</code> : Number<div class="sub-desc">The height of the image, set on the image for image scaling</div></li>
         * <li><code>hideField</code> : String<div class="sub-desc">The record field that indicates if a button should be hidden. Hides whenever record.get(hideField) is truthy.</div></li>
         * <li><code>showField</code> : String<div class="sub-desc">The record field that indicates if a button should be shows. Hides whenever record.get(showField) is not truthy.</div></li>
         * </ul></div>
         */
    
        /**
         * @cfg {Boolean} autoWidth calculates the width of the column. Overrides any width set in config. Defaults to <tt>'true'</tt>
         */
        autoWidth: true,
    
        /**
         * @cfg {Number} widthExtra Adds extra pixels to the width of the column. Defaults to <tt>8</tt>
         */
        widthExtra: 8,
    
        /**
         * @cfg {Number} widthScope The default width of each button image. Defaults to <tt>16</tt>
         */
        widthScope: 16,
    
        /**
         * @cfg {Number} widthExtra Adds extra pixels to the width of the column. Defaults to <tt>4</tt>
         */
    
        /**
         * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed.  Defaults to <tt>true</tt>.
         */
        fixed: true,
        constructor: function(cfg) {
            var me = this,
                items = cfg.items || (me.items = [me]),
                l = items.length,
                i,
                item;
    
            Ext.ux.grid.xActionColumn.superclass.constructor.call(me, cfg);
    
            if(this.autoWidth){
                if(!cfg.items)
                    me.width = me.widthScope + this.widthExtra; // This is to fix and issue with the column width if we are providing an inline icon definition
                else{
                    var totWidth = 0;
                    for(i = 0; i < l; i++){
                        totWidth += items[i].width || this.widthScope;
                    }
                    this.width = totWidth + this.widthExtra;
                }
            }
    
    //      Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
    //      class name x-action-col-{n}
            me.renderer = function(v, meta, record) {
    //          Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
                v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
    
                meta.css += ' x-action-col-cell';
                for (i = 0; i < l; i++) {
                    item = items[i];
                    // if this field should be hidden or not shown, we need to create a placeholder for the column. Since the css and everything expects and image, let's use the Ext blank image here and stretch it to fill the expected width.
                    if((Ext.isString(item.hideField) && record.get(item.hideField)) || (Ext.isString(item.showField) && !record.get(item.showField)) )
                        v += '<img src="' + Ext.BLANK_IMAGE_URL + '" class="x-action-col-icon"' +
                            ' width="' + ((item.width) ?  item.width : me.widthScope) + '"' +
                            ' height="="' + ' />';
                    else
                        v += '<img alt="' + me.altText + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
                            '" class="x-action-col-icon x-action-col-' + String(i) + ' ' + (item.iconCls || '') +
                            ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||this.scope||this, arguments) : '') + '"' +
                            ((item.width) ? ' width="' + (!cfg.items ? item.width - me.widthExtra : item.width) + '"' : '') +
                            ((item.height) ? ' height="' + item.height + '"' : '') +
                            ((item.tooltip) ? ' ext:qtip="' + item.tooltip + '"' : '') + ' />';
                }
                return v;
            };
        }
    });
    
    Ext.grid.Column.types['xactioncolumn'] = Ext.ux.grid.xActionColumn;
    I make no claim to this code and it is provided as-is, but let me know if you find any problems with it/find this useful.


    edit: fixed a small issue with declaring the buttons outside of the items. or icon-wise a large issue. Don't like the fix, but maybe I'll find a better one later.

  2. #2
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Germany
    Posts
    139
    Vote Rating
    1
    Spirit is on a distinguished road

      0  

    Default


    Would be a nice replacement but i dont know any other way to get groupactions than with rowactions. So i still have to use the extension from saki.

Similar Threads

  1. [3.x] Grid RowActions Plugin
    By jsakalos in forum Ext 3.x: User Extensions and Plugins
    Replies: 24
    Last Post: 12 Sep 2013, 11:11 PM
  2. Ext.ux.grid.RowActions Plugin bigger icons
    By tahseen.ur.rehman in forum Ext GWT: User Extensions and Plugins (1.x)
    Replies: 0
    Last Post: 16 Sep 2009, 11:29 AM
  3. Ext.ux.grid.RowActions: Unable to hide icon
    By randomuser01 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 11 Oct 2008, 3:58 PM
  4. ext young user
    By tiagodksilva in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 29 May 2007, 4:57 AM

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar