[OPEN-1288][3.3 beta] LockingGrid Issue

[JGALFO]

This is a related issue I believe:
I am trying to use the LockingGridView with the EditorGridPanel and when you lock a column that has an editor defined it messes up the layout of the grid. If you enter into the editor field and edit an entry, the columns on the grid (right not locked panel) will offset messing up the layout. I am using 3.3.beta 2

To reproduce this, in the examples/grid folder, temporarily edit the line 28 of the locking-grid.html to read:
<script type="text/javascript" src="locking-grid-issue.js"></script>
Then create a new file locking-grid-issue.js and include the following code: (Note this code is just a variation of edit-grid.js installing the LockingGridView.
Am I configuring something wrong or is this a known issue? (It would be nice to include in the examples this combination by the way if it works)
Thanks.

/*!
 * Ext JS Library 3.3.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    // sample static data for the store
    var myData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],            
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    // create the data store
    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });

    // create the Grid
    // To use locking functionality we must explicitly specify the LockingColumnModel and the LockingGridView
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        colModel: new Ext.ux.grid.LockingColumnModel([
            {header: 'Company',      width: 160, sortable: true, dataIndex: 'company', locked: true, id:'company'},
            {header: 'Price',        width: 85,  sortable: true, renderer: 'usMoney',  dataIndex: 'price', locked: true
			,editor: new Ext.form.NumberField({
                allowBlank: false,
                allowNegative: false,
                maxValue: 100000
            })
			},
            {header: 'Change',       width: 85,  sortable: true, renderer: change,     dataIndex: 'change'},
            {header: '% Change',     width: 85,  sortable: true, renderer: pctChange,  dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 95,  sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ]),
        stripeRows: true,
        height: 350,
        width: 500,
        title: 'Locking Array Grid',
        view: new Ext.ux.grid.LockingGridView()
    });
    
    // render the grid to the specified div in the page
    grid.render('grid-example');
});

[JGALFO]

On a related note Saki, I am using your plugin RowActions and when I tried it the LockingGridView disabled the events. My guess is that it is wrapping the columns in some kind of css that prevents the clicks. It would be nice to use it (provided the other issue with the gridEditor gets fixed). Please let me know if you can think of something to make RowActions work.
Thanks.

[ganncamp]

Another bug - and I'm not sure whether this is in LockingGridView or GridView itself - is that you don't seem to be able to have both a GridView and a LockingGridView in the same application.

Somehow, this LockingGridView code overwrites templates.master in GridView itself. Whichever inits first wins, and the other won't render properly.

     initTemplates : function(){
      var ts = this.templates || {};

        if (!ts.master) {
            ts.master = new Ext.Template(
 // template omitted for brevity
           );
        }

        this.templates = ts;

        Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);
     },

EditorGridView sidesteps the issue by setting class vars outside the templates member, so my patched version does too:

    initTemplates : function(){
        Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);

        var master = new Ext.Template(
// template omitted 
        );
        master.compile();
        this.masterTemplate = master;

    },