PDA

View Full Version : Implementing column locking in recordForm editor example



bizcatalyst
14 Mar 2013, 9:25 PM
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):


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:


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