Results 1 to 7 of 7

Thread: deferredRender not working for Ext 4.1.1 Tabpanel

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    138
    Vote Rating
    3
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    138
    Vote Rating
    3
      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
    138
    Vote Rating
    3
      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
    18,603
    Vote Rating
    874
      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
    Twitter - @evantrimboli

  6. #6
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    138
    Vote Rating
    3
      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 Premium Member
    Join Date
    Nov 2011
    Location
    India
    Posts
    10
    Vote Rating
    2
      0  

    Default deferredrender on tabpanel

    I am also facing the same problem. any solutions?

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
  •