выбрана панель вкладок в extjs4 с различными хранилищами, которая загружается только на определенную вкладку

Question

Я использую extjs4 и пытаюсь создать панель вкладок, чтобы каждая вкладка имела свою сетку, которая загружает данные из магазина. (каждая сетка отличается магазином) Я хотел бы загрузить конкретный магазин только тогда, когда пользователь нажимает на соответствующей вкладке. Я не вижу, как я могу поймать щелчок пользователя на панели.

Как я могу это сделать?

Answer 1

У меня была похожая проблема с загрузкой производительности, но я не смог ее решить с помощью deferredRender. Вы должны добавить событие activate для вкладки, которую вы хотите загрузить, когда вкладка активирована:

{
        title: 'tab2',
        bodyPadding: 10,
        html : 'A simple tab',
        listeners: {
                'activate' : function(){ 
                    store2.load(); 
                },
        }

}

У меня сработало нормально, даже если это временное решение. Extjs 4.1 должен улучшить производительность загрузки / рендеринга. Посмотрим.

Answer 2

Вы можете активировать панель, поместив setActiveItem() в обработчик вкладок.

Answer 3

Хорошо, я понял, мне просто нужно было иметь deferredRender = true и добавить соответствующий store.load () в событие beforerender на каждой вкладке:

    var lowerTabPanel = Ext.create('Ext.tab.Panel', {
        deferredRender: true,
        items: [
            {
            title: 'tab1',
            bodyPadding: 10,
            html : 'A simple tab',
            listeners: {
                    'beforerender' : function(){ 
                        store1.load(); 
                    },
            }

           },
            {
            title: 'tab2',
            bodyPadding: 10,
            html : 'A simple tab',
            listeners: {
                    'beforerender' : function(){ 
                        store2.load(); 
                    },
            }

           },
        ]
    });

Answer 4

Ext.TabPanel имеет опцию конфигурации deferredRender . Может быть, это поможет вам.
Документация:
Значение true по умолчанию, чтобы отложить рендеринг дочерних элементов в DOM браузера до тех пор, пока не активируется вкладка. false отобразит все содержащиеся элементы, как только будет отображен макет. Если в панели, которые не отображаются по умолчанию, отображается значительный объем содержимого или большое количество тяжелых элементов управления, установка значения true может повысить производительность.

Обновление: Также посмотрите параметр конфигурации autoLoad в Ext.data.JsonStore , это должно быть false.