extJS Chart auto width/height

Question

I have the following extJs window which has two tabs in it. One of the tab has got a column chart and the other one has a grid. Everything is working fine but what i want to accomplish here is that if i maximize the window the tabs size+ the charts size in the tabs should too. How can i accomplish it. I also have two calendar fields in the window above the tabs..

var win = Ext.create('Ext.Window', {
    width: eachWindowWidth,
    height: eachWindowHeight,
    hidden: false,
    maximizable: true,
    title: 'Registered Hosts',
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'datefield',
            name: 'time',
            fieldLabel: 'From',
            anchor: '90%'
        },
        {
            xtype: 'datefield',
            name: 'time',
            fieldLabel: 'To',
            anchor: '90%'
        },
        {
            xtype: "label",
            fieldLabel: text,
            name: 'txt',
            text: text
        },
        {
            xtype: 'tabpanel',
            activeTab: 0,
            width: eachTabWidth,
            height: eachTabHeight,
            plain: true,
            defaults: {
                autoScroll: true,
                bodyPadding: 10
            },
            items: [
                {
                    title: 'Normal Tab',
                    items: [
                        {
                            id: 'chartCmp',
                            xtype: 'chart',
                            height: 300,
                            width: 300,
                            style: 'background:#fff',
                            animate: true,
                            shadow: true,
                            store: store1,
                            axes: [
                                {
                                    type: 'Numeric',
                                    position: 'left',
                                    fields: ['data1'],
                                    label: {
                                        renderer: Ext.util.Format.numberRenderer('0,0')
                                    },
                                    grid: true,
                                    minimum: 0
                                },
                                {
                                    type: 'Category',
                                    position: 'bottom',
                                    grid: true,
                                    fields: ['name']
                                }
                            ],
                            series: [
                                {
                                    type: 'column',
                                    axis: 'left',
                                    highlight: true,
                                    tips: {
                                        trackMouse: true,
                                        width: 140,
                                        height: 28,
                                        renderer: function(storeItem, item) {
                                            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
                                        }
                                    },
                                    label: {
                                        display: 'insideEnd',
                                        'text-anchor': 'middle',
                                        field: 'data1',
                                        renderer: Ext.util.Format.numberRenderer('0'),
                                        orientation: 'vertical',
                                        color: '#333'
                                    },
                                    xField: 'name',
                                    yField: 'data1'
                                }
                            ]
                        }
                    ]
                },
                {
                    title: 'Table View',
                    xtype: 'grid',
                    width: 200,
                    height: 200,
                    collapsible: false,
                    store: store1,
                    multiSelect: true,
                    viewConfig: {
                        emptyText: 'No information to display'
                    },
                    columns: [
                        {
                            text: 'Devices',
                            flex: 50,
                            dataIndex: 'name'
                        },
                        {
                            text: 'Pass',
                            flex: 50,
                            dataIndex: 'data1'
                        }
                    ]
                }
            ]
        }
    ]
}); 

Answer 1

On resize event of window, change width of tabs size and the charts size however you want. Write a function which will execute on window resize event, In function you can access your fields like below :

var tab = Ext.getCmp('tabId');

var chart = Ext.getCmp('chartId');

change lengths of tab and chart according to your requirement. Check out window resize event here .