Some help in porting to 4.

[Mango_lier]

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]

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]

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]

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.