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。