You found a bug! We've classified it as EXTJS-7573 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default deferredRender not working for Ext 4.1.1 Tabpanel

    deferredRender not working for Ext 4.1.1 Tabpanel


    REQUIRED INFORMATION



    Ext version tested:
    • Ext 4.1.1 and
    • Ext 4.0.7
    Browser versions tested against:
    • Chrome 14.0
    Description:
    • I have A Tab panel which has a panel in each tab. Each panel contains at least a grid.
      When tab panel has a config of deferredRender : false then all the components(grids along with the record rows) on non active tabs also should get rendered and their viewready events must get fired. It works for 4.0.7 but not 4.1.1. It seems as the Rows are not getting rendered while the Grid on non active tab is not visible.
    The result that was expected:
    • There should be an alert from within the viewready listener of non active tab's grid "ready 2" as soon as we run the code for both Ext 4.0.7 and 4.1.1. The rows should get rendered as well for all the grids.
    The result that occurs instead:
    • There is no alert for 4.1.1 but there is an alert for 4.0.7.For Ext 4.1.1 It appears only when we navigate to second tab. The grids are rendered but the rows gets rendered only when we navigate to that Tab.
    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()
    });


    HELPFUL INFORMATION


    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • WinXP

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,328
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Looking at the DOM the grid elements are rendered but the rows of the grid aren't in your test case. If you comment out the deferredRender, the grid elements are not rendered. So the actual issue is the grid isn't rendering it's rows when it is hidden.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default


    Very true.
    Editing and upgrading the Thread.
    I can not edit the title for the Thread so should i close this and log in a new one or this one will do?
    Do we have any workaround in sight?

    Thanks and Regards

  4. #4
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default


    Anyone working on this?
    Any workaround or temporary fix?

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,995
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You'll want to override the finishRender method in AbstractView.

    Just curious, what is the reasoning behind forcing the render of the whole dataset even though it's not visible? Finding it hard to think of a use case for wanting to do so.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default


    Just curious, what is the reasoning behind forcing the render of the whole dataset even though it's not visible? Finding it hard to think of a use case for wanting to do so.
    I know its kind of weired but its because I am showing some custom display fields in each row of grid depending upon the type of record.
    These custom fields take a little time to get created and rendered making loading (not exactly loading but preparing view of grid with components) of grid slow.
    I want to take loading time hit on the first time so that by the time user navigates from one tab to another all the fields have already been rendered by then.

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    8
    Vote Rating
    1
    ankit_shahin is on a distinguished road

      0  

    Default deferredrender on tabpanel

    deferredrender on tabpanel


    I am also facing the same problem. any solutions?