pagingtoolbar not initialised

Hello,

I’m quite a newbie with extjs but I think I will love it (maybe in a coupleof week, for now I have to dig in).

I’m in trouble with a grid’s pagingtoolbar that stay uninitialized. I spend for now a couple of hour and I really need help.

In short, the paging toolbar is bound to a grid which is located in a tab (not the default one).

Unfortunately, when I click on the second tab (the one with the grid), the grid does correctly display values but the pagingtoolbar shows “No data to display”. The toolbar display correct value only when I click on its refresh button.

I suspect this is due to the fact that the grid (and its toolbar) is loaded when the current tab displayed on the screen is not the tab that contains the grid. By playing a bit and moving the code of the grid in the first tab, everything is ok.

I would really appreciate any help. Thanks in advance.

Code:

Ext.define('DB.view.project.Edition', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.project-edition',
    requires: [
        'DB.view.project.EditionController',
        'DB.view.project.EditionModel',
        'Ext.tab.Panel'

    ],

    controller: 'edition',
    viewModel: {
        type: 'edition'
    },


    bodyPadding: 20,

    items: [
        {
            title: 'Data',
            xtype: 'form',
            reference: 'form',
            layout: 'anchor',
            defaultType: 'textfield',
            items: [
            
            ///  Other place for the grid
            
                {
                    fieldLabel: 'Name',
                    name: 'name',
                    allowBlank: false,
                    bind: '{theProject.name}'
                },
                {
                    fieldLabel: 'Description',
                    name: 'desription',
                    allowBlank: false,
                    bind: '{theProject.description}'
                }
            ]
        },
        {
            title: 'Follow',
            items: [
                {
                    title: 'Data',
                    xtype: 'grid',
                    reference: 'eventLogGrid',
                    bind: {
                        store: '{eventLogs}'
                    },
                    columns: [
                        {
                            text: 'Date',
                            dataIndex: 'date'
                        },
                        {
                            text: 'Event',
                            dataIndex: 'eventTypeEnum'
                        },
                        {
                            text: 'Description',
                            dataIndex: 'description'
                        },
                        {
                            text: 'User',
                            dataIndex: 'user'
                        }
                    ],
                    tbar: {
                        xtype: 'pagingtoolbar',
                        bind: {
                            store: '{eventLogs}'
                        },
                        dock: 'bottom',
                        displayInfo: true,
                        pageSize: 25
                    }
                }]
        }
    ]

});

Code:

Ext.define('DB.view.project.EditionModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.edition',

    requires: [
        'DB.model.Step',
        'DB.model.EventLog'

    ],

    stores: {
        eventLogs: {
            model: 'DB.model.EventLog',
            autoLoad:  true,
            pageSize: 25

        }
    }
});

Code:

Ext.define('DB.model.EventLog', {
    extend: 'DB.model.Base',

    fields: [
        { name: 'date', type: 'date' },
        { name: 'description', type: 'string' },
        { name: 'eventTypeEnumId', reference: 'EventTypeEnum', type:'int' },
        { name: 'userId', reference: 'User', type:'int'}
    ],

    proxy: {
        reader: {
            type: 'json',
            rootProperty: 'eventLog'
        }
    }

});

Code:

Ext.define('DB.model.Base', {
    extend: 'Ext.data.Model',

    fields: [{
        name: 'id', type: 'int',
        name: 'active', type: 'boolean'
    }],

    schema: {
        namespace: 'DB.model',  // generate auto entityName

        proxy: {
            type: 'rest',
            url: 'http://localhost/dbprojet/api/{entityName:lowercase}/',
            extraParams: {projectId : 1},
            reader: {
                type: 'json',
                rootProperty: '{entityName:lowercase}',
                totalProperty: 'total'
            }
        }
    }
});

pagingtoolbar not initialised