Extjs: повторно используйте ту же сетку в TabPanel

Это так, но это потребует больше усилий, чем оно того стоит. Просто создайте прототип для своего компонента, чтобы вы могли очень быстро создавать новые экземпляры.

Я не пробовал это сам, но я полагаю, что вы можете создать TabPanel с пустыми вкладками и изменить размер TabPanel так, чтобы была видна только полоса вкладок. При этом (используя соответствующий макет, границу, vbox и т. д.) создайте GridPanel и используйте событие TabPanel activate для перезагрузки сетки на основе активной в данный момент вкладки.

Надеемся, что следующая реализация удовлетворит ваши потребности. 1. Создайте собственную сетку и зарегистрируйте ее. 2. Поместите ее на панель вкладок.

Поскольку сетка создается с использованием xtype, она не будет создавать 12 экземпляров при смене вкладок.

 Application.PersonnelGrid = Ext.extend(Ext.grid.GridPanel, {
         border:false
        ,initComponent:function() {
            Ext.apply(this, {
                 store:new Ext.data.Store({...})
                ,columns:[{...}, {...}]
                ,plugins:[...]
                ,viewConfig:{forceFit:true}
                ,tbar:[...]
                ,bbar:[...]
            });

            Application.PersonnelGrid.superclass.initComponent.apply(this, arguments);
        } // eo function initComponent

        ,onRender:function() {
            this.store.load();

            Application.PersonnelGrid.superclass.onRender.apply(this, arguments);
        } // eo function onRender
    });

    Ext.reg('personnelgrid', Application.PersonnelGrid);

    var panel = new Ext.TabPanel({
                    items:[{  
                            title:'Jan', 
                            items: [{xtype:'personnelgrid'}]
                          }, { 
                            title: 'Feb', 
                            items: [{xtype:'personnelgrid'}]
                          }
                          ....
                           {
                             title: 'Dec',
                             items: [{xtype:'personnelgrid'}] 
                           }] 
                  }) 

Поскольку это единственное место, где это обсуждалось до сих пор, я делюсь тем, что только что нашел.

Трюк заключается в использовании dockedItems в ExtJs 4 (не уверен, что какую-либо сетку можно добавить в tbar в ExtJs 3). При изменении активной вкладки будет изменено только тело, но не закрепленный элемент. Просто установите высоту сетки равной телу во время boxready и resize, чтобы мы больше не могли видеть тело.

Это код для ExtJs 4.2 MVC, в котором также используется refs.

Ext.define('app.controller.Notification', {
extend: 'Ext.app.Controller',
views: ['notification.List'],
stores: ['Notification'],
models: ['Notification'],

refs: [{
    ref: 'pnlNotif',
    selector: 'pnlNotif'
}, {
    ref: 'notifList',
    selector: 'notifList'
}],

init: function () {
    this.control({
        'dbPnlNotif': {
            added: this.pnlNotifAdded,
            boxready: this.calcNotifListSize,
            resize: this.calcNotifListSize,
            tabchange: this.pnlNotifTabChange
        }
    });
},

pnlNotifAdded: function (pnlNotif) {
    pnlNotif.add({ title: '1', html: '1' });
    pnlNotif.add({ title: '2', html: '2' });
    pnlNotif.add({ title: '3', html: '3' });
},

calcNotifListSize: function (pnlNotif) {
    // calc the notification list height to make sure it use the whole body
    // This way we can use only one instance of list to display for each tabs
    // because the list is rendered as dockedItems
    var height = pnlNotif.getHeight();
    var headerHeight = pnlNotif.getDockedItems()[0].getHeight();
    var tabBarHeight = pnlNotif.getDockedItems()[1].getHeight();
    height = height - headerHeight - tabBarHeight;
    if (this.getNotifList().getHeight() !== height) {
        this.getNotifList().setHeight(height - 1);// - 1 to include border bottom
    }
},

pnlNotifTabChange: function (pnlNotif, newTab) {
    // do something to filter the list based on selected tab.
}
});

Ext.define('ML.view.Notification', {
extend: 'Ext.tab.Panel',
alias: ['widget.pnlNotif'],
title: 'Notification',

dockedItems: [{
    xtype: 'notifList'
}]
});

Ext.define('ML.view.notification.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.notifList',
dock: 'top',
store: 'Notification',

initComponent: function () {
    this.columns = [
        ...
    ];
    this.callParent(arguments);
}
});

Попробуй это

    var gridJanName = Ext.create('Ext.grid.Panel', {
        enableColumnHide: false,
        autoScroll:true,
        store: storeJanNameGroup,
        border:true,
        stripeRows: true,
        columnLines:false,
        loadMask: true,
        tbar:tbgridTools,
        margin: '1 1 1 1',
        pageSize: 100,
        maxWidth:700,
        features: [groupFeature],
        selModel: {
            mode: 'MULTI'
        },
        columns: [
            {xtype:'rownumberer',width:50},
            {dataIndex:'id', hidden:true},
        //etc
        ]
    }); 
        var gridFebName = Ext.create('Ext.grid.Panel', {
        enableColumnHide: false,
        autoScroll:true,
        store: storeJanNameGroup,
        border:true,
        stripeRows: true,
        columnLines:false,
        loadMask: true,
        tbar:tbgridTools,
        margin: '1 1 1 1',
        pageSize: 100,
        maxWidth:700,
        features: [groupFeature],
        selModel: {
            mode: 'MULTI'
        },
        columns: [
            {xtype:'rownumberer',width:50},
            {dataIndex:'id', hidden:true},
        //etc
        ]
    });
    //
    //etc grid
    //


    var JanPanel = Ext.create('Ext.panel.Panel', {
        title:'Jan',
        bodyPadding: 5, 
        Width:780,
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [gridJanName]
    });
    var FebPanel = Ext.create('Ext.panel.Panel', {
        title:'Feb',
        bodyPadding: 5, 
        Width:780,
        layout: {
            type: 'hbox',
            align: 'stretch'
        }
        //,items: [gridFebName]
    });
    var MarPanel = Ext.create('Ext.panel.Panel', {
        title:'Mar',
        bodyPadding: 5, 
        Width:780,
        layout: {
            type: 'hbox',
            align: 'stretch'
        }
        //,items: [gridMarName]
    });
    //etc
    var eachMonthstabs = Ext.create('Ext.tab.Panel', {
        minTabWidth: 130,
        tabWidth:150,
        //Width:750,
        scroll:false,
        autoHeight: true,
        id:'timestabs',
        enableTabScroll:true,
        items: [
            {
                xtype:JanPanel
            },
            {
                xtype:FebPanel
            },
            {
                xtype:MarPanel
            }
            ///etc
            ]
    });

Для меня хорошим решением было использовать левую панель инструментов под названием lbar со списком кнопок и одной сеткой вместо панели вкладок.