add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / simple-tasks / app / ux / StatusColumn.js

/**\r
 * @class SimpleTasks.ux.StatusColumn\r
 * @extends Ext.grid.column.Column\r
 * <p>A Header subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.</p>\r
 * <p><b>Note. As of Ext JS 3.3 this no longer has to be configured as a plugin of the GridPanel.</b></p>\r
 * <p>Example usage:</p>\r
 * <pre><code>\r
// create the grid\r
var grid = Ext.create('Ext.grid.Panel', {\r
    ...\r
    columns: [{\r
           text: 'Foo',\r
           ...\r
        },{\r
           xtype: 'statuscolumn',\r
           text: 'Indoor?',\r
           dataIndex: 'indoor',\r
           width: 55\r
        }\r
    ]\r
    ...\r
});\r
 * </code></pre>\r
 * In addition to toggling a Boolean value within the record data, this\r
 * class adds or removes a css class <tt>'x-grid-checked'</tt> on the td\r
 * based on whether or not it is checked to alter the background image used\r
 * for a column.\r
 */\r
Ext.define('SimpleTasks.ux.StatusColumn', {\r
    extend: 'Ext.grid.column.Column',\r
    xtype: 'statuscolumn',\r
\r
    tdCls: Ext.baseCSSPrefix + 'grid-cell-statuscolumn',\r
    \r
    /**\r
     * @event checkchange\r
     * Fires when the checked state of a row changes\r
     * @param {SimpleTasks.ux.StatusColumn} this\r
     * @param {Number} rowIndex The row index\r
     * @param {Boolean} checked True if the box is checked\r
     */\r
\r
    /**\r
     * @private\r
     * Process and refire events routed from the GridView's processEvent method.\r
     */\r
    processEvent: function(type, view, cell, recordIndex, cellIndex, e) {\r
        var me = this,\r
            cssPrefix = Ext.baseCSSPrefix,\r
            target = Ext.get(e.getTarget()),\r
            dataIndex, record, checked;\r
\r
        if (target.hasCls(cssPrefix + 'grid-statusheader-inner')) {\r
            if(type === 'mousedown' && e.button === 0) {\r
                record = view.panel.store.getAt(recordIndex);\r
                dataIndex = me.dataIndex;\r
                checked = !record.get(dataIndex);\r
                record.set(dataIndex, checked);\r
                me.fireEvent('checkchange', me, recordIndex, checked);\r
                // cancel selection.\r
                return false;\r
            } else if(type === 'mouseover') {\r
                target.parent().addCls(cssPrefix + 'grid-statusheader-over');\r
            } else if(type === 'mouseout') {\r
                target.parent().removeCls(cssPrefix + 'grid-statusheader-over');\r
            }\r
        } else {\r
            return me.callParent(arguments);\r
        }\r
    },\r
\r
    // Note: class names are not placed on the prototype bc renderer scope\r
    // is not in the header.\r
    renderer : function(value){\r
        var cssPrefix = Ext.baseCSSPrefix,\r
            cls = [cssPrefix + 'grid-statusheader'];\r
\r
        if (value) {\r
            cls.push(cssPrefix + 'grid-statusheader-checked');\r
        }\r
        return '<div class="' + cls.join(' ') + '"><div class="' + cssPrefix + 'grid-statusheader-inner' + '">&#160;</div></div>';\r
    }\r
});\r