Extjs: reusing the same grid in TabPanel

Question

In an Extjs application, I have a row of Grid and Tabs. The contents of the grid depend on the selected tab. Tell the tabs the values ​​Jan-Feb-Mar -.... Clicking the tab, I will reboot the grid storage

Question: can duplication of 12 grid components be avoided in favor of having one common instance?

thank

Disclaimer: search on sencha, google, stackoverflow forum failed: (

Answer 1

This, but it will require more effort than it is worth. Just prototype your component so you can quickly create new instances.

Answer 2

, , TabPanel TabPanel, . ( , , vbox ..) GridPanel TabPanel activate, .

Answer 3

, 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'}] 
                           }] 
                  }) 

Answer 4

, , , .

< , . , , boxready resize, .

This is the code for ExtJs 4.2 MVC, which also uses 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);
}
});

Answer 5

try it

    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
            ]
    });

Answer 6

For me, a good solution was to use the left lbar toolbar with a list of buttons and one grid instead of tabpanel