Results 1 to 4 of 4

Thread: DeferredRender not working for ExtJS 4.1.1 Ext.tab.Panel

  1. #1
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    138
    Answers
    2
    Vote Rating
    3
      0  

    Default Unanswered: DeferredRender not working for ExtJS 4.1.1 Ext.tab.Panel

    Hi All,

    I was previously using ExtJS 4.0.7 tabpanel which had a few tabs.
    Each tab had a grid.
    The tab panel was with following config
    Code:
    var tabForm = Ext.create('Ext.tab.Panel', {
        id: 'myTab',
        plain: true,
        deferredRender: false,
        frame : false,
        border :  false,
        defaults: { hideMode: 'offsets' },
        items: [
                  //some tabs with grids
        ]
    });
    which used to render all the grids with the data on first hit to page.

    But as i tried upgrading to 4.1.1 with same code and click on different tabs it doesnt seems to be working and render grid and its records then and there on activation of tab only. I tried putting viewready listener on gridview in 2nd tab's grid and it fires only when i go to the 2nd tab where as it fired in 4.0.7 as soon as i land on the page.

    Is the way of deferred Rendering changed?
    Or is it a Bug?

  2. #2
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    138
    Answers
    2
    Vote Rating
    3
      0  

    Default Sample code

    Following is the sample code.
    As you see the viewready alert pops up only after going on Tab 2 in ExtJS 4.1.1
    where as it pops up as soon as you land on page in ExtJS 4.0.7.

    Code:
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore1',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [
                {
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224"},
            {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"},
            {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"},
            {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "phone": "555-222-1254"}
            ]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    var grid1 = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore1'),
        columns: [
            {
            text: 'Name',
            dataIndex: 'name'},
        {
            text: 'Email',
            dataIndex: 'email',
            flex: 1},
        {
            text: 'Phone',
            dataIndex: 'phone'}
        ]
    });
    
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore2',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [
                {
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224"},
            {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"},
            {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"},
            {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "phone": "555-222-1254"}
            ]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    var grid2 = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore2'),
        viewConfig: {
            listeners: {
                viewready: function(thisField) {
                    alert("ready 2");
                }
            }
        },
        columns: [
            {
            text: 'Name',
            dataIndex: 'name'},
        {
            text: 'Email',
            dataIndex: 'email',
            flex: 1},
        {
            text: 'Phone',
            dataIndex: 'phone'}
        ]/*,
        listeners: {
            render: function(thisGrid) {
                alert('rendered');
            }
        }*/
    });
    
    var panel1 = new Ext.panel.Panel({
        title: 'tab 1',
        layout: 'fit',
        items: [grid1]
    });
    
    var panel2 = new Ext.panel.Panel({
        title: 'tab 2',
        layout: 'fit',
        items: [grid2]
    });
    
    Ext.create('Ext.tab.Panel', {
        width: 600,
        height: 600,
        activeTab: 0,
        deferredRender: false,
        defaults: { hideMode: 'offsets' },
        items: [
            panel1,
            panel2
            ],
        renderTo: Ext.getBody()
    });?
    

  3. #3
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    138
    Answers
    2
    Vote Rating
    3
      0  

    Default How to Report a Bug

    As i do not get any reply on the thread, either i have written something absurd or this really is a bug.
    Can anyone direct me on how to report a Bug please?

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    44
    Answers
    4
    Vote Rating
    0
      0  

    Default

    I have the same problem with a tab not being rendered although using this property.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •