Question

我有以下extJs窗口，里面有两个标签。其中一个选项卡有一个柱形图，另一个有一个网格。一切都工作正常但我想在这里完成的是，如果我最大化窗口标签大小+标签中的图表大小也应该。我怎样才能实现它。我在选项卡上方的窗口中也有两个日历字段..

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

在窗口的调整大小事件上，根据需要更改选项卡大小和图表大小的宽度。编写一个将在窗口调整大小事件上执行的函数，在函数中，您可以访问以下字段：

var tab = Ext.getCmp（'tabId'）;

var chart = Ext.getCmp（'chartId'）;

根据您的要求更改标签和图表的长度。查看窗口调整大小事件here。

extJS图表自动宽度/高度

1 个答案: