    /**
     * This is a utility class that can be passed into a {@link Ext.grid.column.Column} as a column config that provides
     * an automatic row numbering column.
     *
     * Usage:
     *
     *     columns: [
     *         {xtype: 'rownumberer'},
     *         {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
     *         {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
     *         {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
     *         {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
     *         {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
     *     ]
     *
     */
    Ext.define('Ext.grid.RowNumberer', {
        extend: 'Ext.grid.column.Column',
        alias: 'widget.rownumberer',

        /**
         * @cfg {String} text
         * Any valid text or HTML fragment to display in the header cell for the row number column.
         */
        text: "&#160",

        /**
         * @cfg {Number} width
         * The default width in pixels of the row number column.
         */
        width: 23,

        /**
         * @cfg {Boolean} sortable
         * @hide
         */
        sortable: false,

        /**
         * @cfg {Boolean} [draggable=false]
         * False to disable drag-drop reordering of this column.
         */
        draggable: false,

        align: 'right',

        constructor : function(config){

            // Copy the prototype's default width setting into an instance property to provide
            // a default width which will not be overridden by AbstractContainer.applyDefaults use of Ext.applyIf
            this.width = this.width;

            this.callParent(arguments);
            if (this.rowspan) {
                this.renderer = Ext.Function.bind(this.renderer, this);
            }
        },

        // private
        resizable: false,
        hideable: false,
        menuDisabled: true,
        dataIndex: '',
        cls: Ext.baseCSSPrefix + 'row-numberer',
        rowspan: undefined,

        // private
        renderer: function(value, metaData, record, rowIdx, colIdx, store) {
            if (this.rowspan){
                metaData.cellAttr = 'rowspan="'+this.rowspan+'"';
            }

            metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
            return store.indexOfTotal(record) + 1;
        }
    });