Ext.ux.grid.FlagMark

/**
 * Ext.ux.grid.FlagMark
 * This little column component will allow the addition of marker flags in grid rows. Pass in an array of flag definitions including their dataIcon, iconCls, and a hideIndex and they will configure themselves
 *
 * Example:
 *    ...
 *    columns: [
 *
 *    ...
 *  {
 *      xtype: 'gridflagcol',
 *      flags: [{
 *          dataIcon : '*',
 *          iconCls  : 'favourite',
 *          hideIndex: 'hideFavouriteFlag',
 *              qtip  : 'Marked as a favourite'
 *      },{
 *          dataIcon : 'x',
 *          iconCls  : 'flag',
 *          hideIndex: 'hideFlaggedFlag',
 *          qtip  : 'Marked as flagged'
 *      }]
 *  }
 *    ...
 *    ]
 *    ...
 *
 */
Ext.define( 'Ext.ux.grid.FlagMark', {
    extend       : 'Ext.grid.column.Column',
    alias        : 'widget.gridflagcol',
    eventPrefix  : 'flag',
    eventSelector: '.' + Ext.baseCSSPrefix + 'grid-flag-hd',
    bodySelector : '.' + Ext.baseCSSPrefix + 'grid-flag-body',
    isColumn     : true,
    menuDisabled : true,
    sortable     : false,
    width        : 0,
    align        : 'right',
    cls          : 'grid-flag-col',
    hideMode     : 'display',
    /**
     * @cfg {String} tplRow Template for flags
     * @private
     */
    tplRow       : '\
        <tpl for="flags">\
            <div class="ux-row-flag-item {cls} <tpl if="text">ux-row-flag-text</tpl>" style="{hide}{style}">\
                <span class="ux-flag-cell-triangle"><i <tpl if="qtip">data-tooltip="{qtip}"</tpl> data-icon="{dataIcon}"></i></span>\
            </div>\
        </tpl>',
    init         : function(){
        var me = this;

        me.callParent( arguments );
    },

    initRenderData: function(){

        var me = this;

        me.grid = me.up( 'gridpanel' );
        me.tpl = me.tpl || me.processFlags( me.flags );

        me.grid.on( 'destroy', me.clearListeners, me );

        // setup renderer
        if (!me.renderer){
            me.renderer = Ext.bind( function( value, cell, record, row, col, store ){
                cell.tdCls += (cell.tdCls ? ' ' : '') + 'ux-grid-flag';
                return this.tpl.apply( this.getData( value, cell, record, row, col, store ) );
            }, me );
        }

        // cancel click
        if (true === me.keepSelection){
            me.grid.on( 'beforeitemmousedown', function( view, record, item, index, e, options ){
                return !this.getAction( e );
            }, me );
        }

        return this.callParent( arguments );

    },

    /**
     * Returns data to apply to template. Override this if needed.
     * @param {Mixed} value
     * @param {Object} cell object to set some attributes of the grid cell
     * @param {Ext.data.Record} record from which the data is extracted
     * @param {Number} row row index
     * @param {Number} col col index
     * @param {Ext.data.Store} store object from which the record is extracted
     * @return {Object} data to apply to template
     */
    getData: function( value, cell, record, row, col, store ){
        return record.data || {};
    },

    processFlags: function( flags, template ){
        var fls = [], me = this;

        // actions loop
        Ext.each( flags, function( f, i ){

            if (f.flagId && 'function' === typeof (f.callback || f.cb)){
                me.callbacks = me.callbacks || {};
                me.callbacks[f.flagId] = f.callback || f.cb;
            }

            // data for intermediate template
            var o = {
                cls     : f.iconIndex ? '{' + f.iconIndex + '}' : (f.iconCls ? f.iconCls : ''),
                dataIcon: f.iconIndex ? '{' + f.iconIndex + '}' : (f.dataIcon ? f.dataIcon : ''),
                qtip    : f.qtipIndex ? '{' + f.qtipIndex + '}' : (f.tooltip || f.qtip ? f.tooltip || f.qtip : ''),
                text    : f.textIndex ? '{' + f.textIndex + '}' : (f.text ? f.text : ''),
                hide    : f.hideIndex ? '<tpl if="' + f.hideIndex + '">' + ('display' === this.hideMode ? 'display:none' : 'visibility:hidden') + ';</tpl>' : (f.hide ? ('display' === this.hideMode ? 'display:none' : 'visibility:hidden;') : ''), align: f.align || 'right',
                style   : f.style ? f.style : ''
            };
            fls.push( o );

        }, me );

        var xt = new Ext.XTemplate( template || me.tplRow );
        return new Ext.XTemplate( xt.apply( {flags: fls} ) );

    }
} );