PDA

View Full Version : Some help in porting to 4.



Mango_lier
6 Mar 2011, 1:29 PM
Below is a working 3.3.1 code. It seems to fail in grid paging bar creation. What do I have to change to make it ver 4 compliant.


GridStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
GridStore.superclass.constructor.call(this, Ext.apply({
storeId: 'MyStore',
url: 'http://localhost/myProject4/zPage.asp',
baseParams: {component: 'exusersGrid', json: 1},
root: 'rows',
totalProperty: 'totalrecords',
autoLoad: false,
messageProperty: 'serverUserMessage',
autoDestroy: true,
autoSave: false,
remoteSort: true,
fields: [
{name:'user_name', mapping:'user_name', type:'string'},
{name:'user_email', mapping:'user_email', type:'string'},
{name:'user_birthdate', mapping:'user_birthdate', type:'string'},
{name:'user_level', mapping:'user_level', type:'string'},
{name:'user_badge', mapping:'user_badge', type:'string'},
{name:'user_online', mapping:'user_online', type:'string'}
]
}, cfg));
}
});

//new MyStore();


MyGridUi = Ext.extend(Ext.grid.GridPanel, {
title: 'My Grid',
store: new GridStore(), //'MyStore',
width: 800,
height: 350,
stripeRows: true,
loadMask: true,
autoExpandColumn: 'Name',
initComponent: function() {
this.viewConfig = {
//forceFit: true,
emptyText: 'No records found'
};
this.columns = [
{
xtype: 'gridcolumn',
dataIndex: 'user_name',
header: 'Name',
sortable: true,
width: 100,
id: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'user_email',
header: 'Email',
sortable: true,
width: 100,
align: 'left',
id: 'Email'
},
{
xtype: 'gridcolumn',
dataIndex: 'user_birthdate',
header: 'Birthdate',
sortable: true,
width: 100,
id: 'Birthday'
},
{
xtype: 'gridcolumn',
dataIndex: 'user_level',
header: 'Level',
sortable: true,
width: 100,
id: 'Level'
},
{
xtype: 'templatecolumn',
header: 'Badge',
sortable: true,
width: 100,
dataIndex: 'user_badge',
tpl: '<span><img src="{user_badge}"/></span>',
align: 'center',
id: 'Badge'
},
{
xtype: 'gridcolumn',
header: 'Online',
sortable: true,
width: 100,
dataIndex: 'user_online',
align: 'center',
id: 'Online'
}
];
this.bbar = {
xtype: 'paging',
store: 'MyStore', // <-- Store ID
displayInfo: true,
emptyMsg: 'No records to display'
};
this.tbar = {
xtype: 'toolbar'
};
MyGridUi.superclass.initComponent.call(this);

// Grid handler, to load the datastore once the grid is rendered
this.on('afterrender', function(){
this.store.load({params:{start:0, limit:20}});
});

// Grid's datastore handler, to select first row
this.store.on('load', function() {
this.selModel.selectFirstRow();
}, this, true);
}
});
Ext.reg('xMyGrid', MyGridUi);

Animal
6 Mar 2011, 10:22 PM
We need some more details to be able to help. That's a lot of code, and just "fail" is not a good description of the problem.

Is there an error?

Mango_lier
7 Mar 2011, 10:56 AM
Sorry for too much code, most if it is column definition. I am seeing couple of issues.
1) The paging toolbar creation is failing with following errors in IE8
Line: 3722
Error: [Ext.ClassManager] Cannot create an instance of unrecognized alias: widget.paging

2) If I comment the paging toobar code then I see the following error in doLayout
Line: 65805
Error: '0.el' is null or not an object


You can cut and paste the code in the file and will see the same behavior.

Thanks

Mango_lier
7 Mar 2011, 11:18 AM
OK, more debugging reveals
1) Paging toolbar xtype is not 'paging' anymore instead it is 'pagingtoolbar'
2) The gridcolumn xtype is not defined anymore, may be that is the source of error.