Hello,
I've taken the example at http://recordform.extjs.eu/ and tried implementing column locking by including the extjs 3.4 version of the locking grid js and css files, adding the view: new Ext.ux.grid.LockingGridView(), and changing the columns definition (inside the initComponent function) to be a columnModel definition. For some reason I am getting an error that c is undefined in the if (Ext.isEmpty(c.id)) statement below (taken from ext-all-debug-w-comments_3_4.js line 75418):
Code:
for (i = 0, len = config.length; i < len; i++) {               c = Ext.applyIf(config[i], this.defaults); 

             
              // if no id, create one using column's ordinal position 

              if (Ext.isEmpty(c.id)) { 

                    c.id = i; 

              }
As you can tell I'm using extjs 3.4 which works well with the recordform example but I'd like to add column locking to it. The relevant code is below:
Code:
        var store;
        //Create the store param
        store = new Ext.data.Store({
                reader:new Ext.data.JsonReader({
                     id:'VesselID'
                    ,totalProperty:'totalCount'
                    ,root:'results'
                    ,fields:[
                         {name:'VesselID', type:'int'}
                        ,{name:'Location', type:'string'}
                        ,{name:'LocationID', type:'int'}
                        ,{name:'VesselStatusID', type:'int'}
                        ,{name:'VesselStatus', type:'string'}
                        ,{name:'VesselTypeID', type:'int'}
                        ,{name:'VesselType', type:'string'}
                        ,{name:'PickupID', type:'int'}
                        ,{name:'Label', type:'string'}
                        ,{name:'qtip1', type:'string'}
                        ,{name:'action1', type:'string'}
                        ,{name:'Note', type:'string'}
                        ,{name:'CreatedDate', type:'date'}
                        ,{name:'OriginalWeight', type:'int'}
                    ]
                })
                ,proxy:new Ext.data.HttpProxy({url:'ajax/vesselData.php'})
                ,baseParams:{cmd:'getData'}
                ,sortInfo:{field:'VesselStatus', direction:'ASC'}
                //,autoLoad:true
                //,autoSync:true
                ,remoteSort:true
            });

        grid = Ext.extend(Ext.grid.EditorGridPanel, {
            border:true
            //,layout:'fit'
            ,stateful:true
            ,url:'ajax/vesselData.php'
            ,objName:'vessel'
            ,store:store
            ,idName:'VesselID'
            ,width:1200
            ,height:310
            ,columnLines:true
            ,title:'Show Vessels'
            ,stripeRows: true//applies css classname to alternate rows, defaults to false
            ,renderTo: 'grid-vessels'//could also render it directly to document.body 
            ,view: new Ext.ux.grid.LockingGridView()
            ,initComponent:function() {
                this.recordForm = new Ext.ux.grid.RecordForm({
                     title:'Ext.ux.grid.RowRecord Example'
                    ,iconCls:'icon-edit-record'
                    ,columnCount:2
                    ,ignoreFields:{VesselID:true,CreatedDate:true,PickupID:true,action1:true,qtip1:true,VesselTypeID:true,VesselStatusID:true,LocationID:true}
                    ,formConfig:{
                         labelWidth:80
                        ,buttonAlign:'right'
                        ,bodyStyle:'padding-top:10px'
                    }
                });

                // create row actions
                this.rowActions = new Ext.ux.grid.RowActions({
                     actions:[
                              {
                         iconCls:'icon-print'
                        ,qtip:'Print Label'
                    },
                    {
                         iconCls:'icon-edit-record'
                        ,qtip:'Edit Record'
                    }]
                    ,widthIntercept:Ext.isSafari ? 4 : 2
                    ,id:'actions'
                    ,getEditor:Ext.emptyFn
                });
                this.rowActions.on('action', this.onRowAction, this);               

                Ext.apply(this, {
                    // {{{
                    store:store
                    //,columns:columns // this is replaced by the colModel definition below
                    ,colModel:new Ext.ux.grid.LockingColumnModel([
                                                                  {
                                                                    header:'VesselID'
                                                                   ,id:'VesselID'
                                                                   ,dataIndex:'VesselID'
                                                                   ,width:160
                                                                   ,locked:true
                                                                   ,sortable:true
                                                                    ,filter: [{xtype:"numberfield", filterName:"vIDMin"},{xtype:"numberfield", filterName:"vIDMax"}]
                                                                },
//rest of fields here
                                                                 {   header:'OriginalWeight'
                                                                   ,dataIndex:'OriginalWeight'
                                                                   ,width:40
                                                                   ,sortable:true
                                                                   ,editable:false
                                                                   ,editor:new Ext.form.TextField({
                                                                        allowBlank:true
                                                                   })
                                                                    ,filter: [{xtype:"numberfield", filterName:"weightMin"},{xtype:"numberfield", filterName:"weightMax"}]
                                                                }, this.rowActions                                                           
                                                            ])
                     ,plugins:[this.rowActions, this.recordForm,new Ext.ux.grid.GridHeaderFilters()]
                    ,viewConfig:{forceFit:true}                    
                    ,tbar:[{
                         text:'Add Vessel'
                        ,tooltip:'Add Vessel with Form'
                        ,iconCls:'icon-form-add'
                        ,listeners:{
                            click:{scope:this, buffer:200, fn:function(btn) {
                                this.recordForm.show(this.addRecord(), btn.getEl());
                            }}
                        }
                    }]
                
                }); // eo apply

                this.bbar = new Ext.PagingToolbar({
                     store:store
                     //store:this.store
                    ,displayInfo:true
                    ,pageSize:10
                });

                // call parent
                grid.superclass.initComponent.apply(this, arguments);
            } // eo function initComponent
            ,onRender:function() {
                // call parent
                grid.superclass.onRender.apply(this, arguments);

                // load store
                this.store.load({params:{start:0,limit:10}});

            } // eo function onRender
            ,addRecord:function() {
                var store = this.store;
                if(store.recordType) {
                    var rec = new store.recordType({newRecord:true});
                    rec.fields.each(function(f) {
                        rec.data[f.name] = f.defaultValue || null;
                    });
                    rec.commit();
                    store.add(rec);
                    return rec;
                }
                return false;
            } // eo function addRecord
            ,onRowAction:function(grid, record, action, row, col) {
                switch(action) {
                    case 'icon-print':
                        this.printLabel(record);
                        //this.deleteRecord(record);
                    break;

                    case 'icon-edit-record':
                        this.recordForm.show(record, grid.getView().getCell(row, col));
                    break;
                }
            } // eo onRowAction
//other functions here, like add/delete/print
        }); // eo extend

        // register xtype
        Ext.reg('vesselGrid', grid);

        // app entry point
        Ext.onReady(function() {
            Ext.QuickTips.init();
            Ext.override(Ext.form.Field, {msgTarget:'side'});

            var win = new Ext.Window({
                 id:'rfwin'
                ,title:'Show Vessels for Pickup <?php echo intval($_GET["PickupID"]); ?>'
                ,iconCls:'icon-grid'
                ,width:1200
                ,height:310
                ,stateful:true
                ,x:320
                ,y:82
                ,plain:true
                //,layout:'fit'
                ,closable:true
                ,border:false
                ,maximizable:true
                ,items:{xtype:'vesselGrid', id:'vesselGrid'}
//                ,plugins:[new Ext.ux.menu.IconMenu()]
            });
        }); // eo onReady
        // eof
        //
        </script>
        <div id='grid-vessels'></div>
Has anyone else done this combination successfully? Can anyone help me understand the error I'm getting?
Thank you,
Robert