1. #1
    Sencha User Mango_lier's Avatar
    Join Date
    Apr 2007
    Posts
    193
    Vote Rating
    0
    Mango_lier is on a distinguished road

      0  

    Default Some help in porting to 4.

    Some help in porting to 4.


    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.
    PHP Code:
    GridStore Ext.extend(Ext.data.JsonStore, {
        
    constructor: function(cfg) {
            
    cfg cfg || {};
            
    GridStore.superclass.constructor.call(thisExt.apply({
                
    storeId'MyStore',
                
    url'http://localhost/myProject4/zPage.asp',
                
    baseParams: {component'exusersGrid'json1},
                
    root'rows',
                
    totalProperty'totalrecords',
                
    autoLoadfalse,
                
    messageProperty'serverUserMessage',
                
    autoDestroytrue,
                
    autoSavefalse,
                
    remoteSorttrue,
                
    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',
        
    width800,
        
    height350,
        
    stripeRowstrue,
        
    loadMasktrue,
        
    autoExpandColumn'Name',
        
    initComponent: function() {
            
    this.viewConfig = {
                
    //forceFit: true,
                
    emptyText'No records found'
            
    };
            
    this.columns = [
                {
                    
    xtype'gridcolumn',
                    
    dataIndex'user_name',
                    
    header'Name',
                    
    sortabletrue,
                    
    width100,
                    
    id'Name'
                
    },
                {
                    
    xtype'gridcolumn',
                    
    dataIndex'user_email',
                    
    header'Email',
                    
    sortabletrue,
                    
    width100,
                    
    align'left',
                    
    id'Email'
                
    },
                {
                    
    xtype'gridcolumn',
                    
    dataIndex'user_birthdate',
                    
    header'Birthdate',
                    
    sortabletrue,
                    
    width100,
                    
    id'Birthday'
                
    },
                {
                    
    xtype'gridcolumn',
                    
    dataIndex'user_level',
                    
    header'Level',
                    
    sortabletrue,
                    
    width100,
                    
    id'Level'
                
    },
                {
                    
    xtype'templatecolumn',
                    
    header'Badge',
                    
    sortabletrue,
                    
    width100,
                    
    dataIndex'user_badge',
                    
    tpl'<span><img src="{user_badge}"/></span>',
                    
    align'center',
                    
    id'Badge'
                
    },
                {
                    
    xtype'gridcolumn',
                    
    header'Online',
                    
    sortabletrue,
                    
    width100,
                    
    dataIndex'user_online',
                    
    align'center',
                    
    id'Online'
                
    }
            ];
            
    this.bbar = {
                
    xtype'paging',
                
    store'MyStore',   // <-- Store ID
                
    displayInfotrue,
                
    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:0limit:20}});
            });

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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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?

  3. #3
    Sencha User Mango_lier's Avatar
    Join Date
    Apr 2007
    Posts
    193
    Vote Rating
    0
    Mango_lier is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User Mango_lier's Avatar
    Join Date
    Apr 2007
    Posts
    193
    Vote Rating
    0
    Mango_lier is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. Porting Aristo to Ext JS
    By jorries in forum Ext 3.x: User Extensions and Plugins
    Replies: 12
    Last Post: 15 Mar 2011, 2:46 AM
  2. Component Porting
    By psambhus in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 11 May 2009, 11:19 PM
  3. Problems with EXTJS 2.2. porting
    By nanich in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 26 Nov 2008, 3:26 AM
  4. Problems porting V1.1 to V2.
    By Slash in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 7 Apr 2008, 8:16 PM
  5. Linux porting
    By fermo111 in forum Sencha Cmd
    Replies: 3
    Last Post: 31 Jul 2007, 2:41 AM

Thread Participants: 1