extJS图表自动宽度/高度

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

在窗口的resize事件，标签尺寸的变化宽度，但是你想图表的大小。编写一个函数，它将在窗口大小调整事件中执行，在函数中，您可以访问您的字段，如下所示：

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

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

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