extjs窗口項目樣式

Question

我正在開發一個應用程序的extJs前端。該頁面有一個包含3個項目的ext.window窗口。這些包括圖表，組合框和文本字段。我已成功放置兩個圖表和組合窗口內的項目，但由於某種原因，圖表佔據了ext.window的所有寬度和高度。出於這個原因，組合框被隱藏在圖表後面。我如何設計窗口的不同項目？

Ext.onReady(function() { 
    Ext.tip.QuickTipManager.init(); 
    Ext.define('State', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      {type: 'string', name: 'abbr'}, 
      {type: 'string', name: 'name'}, 
      {type: 'string', name: 'slogan'} 
     ] 
    }); 

    // The data for all states 
    var states = [ 
     {"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"}, 
     {"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"}, 
     {"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"}, 
     {"abbr":"AR","name":"Arkansas","slogan":"The Natural State"}, 
     {"abbr":"CA","name":"California","slogan":"The Golden State"}, 
     {"abbr":"CO","name":"Colorado","slogan":"The Mountain State"}, 
     {"abbr":"CT","name":"Connecticut","slogan":"The Constitution State"}, 
     {"abbr":"DE","name":"Delaware","slogan":"The First State"}, 
     {"abbr":"DC","name":"District of Columbia","slogan":"The Nation's Capital"}, 
     {"abbr":"FL","name":"Florida","slogan":"The Sunshine State"}, 
     {"abbr":"GA","name":"Georgia","slogan":"The Peach State"}, 
     {"abbr":"HI","name":"Hawaii","slogan":"The Aloha State"}, 
     {"abbr":"ID","name":"Idaho","slogan":"Famous Potatoes"}, 
     {"abbr":"IL","name":"Illinois","slogan":"The Prairie State"}, 
     {"abbr":"IN","name":"Indiana","slogan":"The Hospitality State"}, 
     {"abbr":"IA","name":"Iowa","slogan":"The Corn State"}, 
     {"abbr":"KS","name":"Kansas","slogan":"The Sunflower State"}, 
     {"abbr":"KY","name":"Kentucky","slogan":"The Bluegrass State"}, 
     {"abbr":"LA","name":"Louisiana","slogan":"The Bayou State"}, 
     {"abbr":"ME","name":"Maine","slogan":"The Pine Tree State"}, 
     {"abbr":"MD","name":"Maryland","slogan":"Chesapeake State"}, 
     {"abbr":"MA","name":"Massachusetts","slogan":"The Spirit of America"}, 
     {"abbr":"MI","name":"Michigan","slogan":"Great Lakes State"}, 
     {"abbr":"MN","name":"Minnesota","slogan":"North Star State"}, 
     {"abbr":"MS","name":"Mississippi","slogan":"Magnolia State"}, 
     {"abbr":"MO","name":"Missouri","slogan":"Show Me State"}, 
     {"abbr":"MT","name":"Montana","slogan":"Big Sky Country"}, 
     {"abbr":"NE","name":"Nebraska","slogan":"Beef State"}, 
     {"abbr":"NV","name":"Nevada","slogan":"Silver State"}, 
     {"abbr":"NH","name":"New Hampshire","slogan":"Granite State"}, 
     {"abbr":"NJ","name":"New Jersey","slogan":"Garden State"}, 
     {"abbr":"NM","name":"New Mexico","slogan":"Land of Enchantment"}, 
     {"abbr":"NY","name":"New York","slogan":"Empire State"}, 
     {"abbr":"NC","name":"North Carolina","slogan":"First in Freedom"}, 
     {"abbr":"ND","name":"North Dakota","slogan":"Peace Garden State"}, 
     {"abbr":"OH","name":"Ohio","slogan":"The Heart of it All"}, 
     {"abbr":"OK","name":"Oklahoma","slogan":"Oklahoma is OK"}, 
     {"abbr":"OR","name":"Oregon","slogan":"Pacific Wonderland"}, 
     {"abbr":"PA","name":"Pennsylvania","slogan":"Keystone State"}, 
     {"abbr":"RI","name":"Rhode Island","slogan":"Ocean State"}, 
     {"abbr":"SC","name":"South Carolina","slogan":"Nothing Could be Finer"}, 
     {"abbr":"SD","name":"South Dakota","slogan":"Great Faces, Great Places"}, 
     {"abbr":"TN","name":"Tennessee","slogan":"Volunteer State"}, 
     {"abbr":"TX","name":"Texas","slogan":"Lone Star State"}, 
     {"abbr":"UT","name":"Utah","slogan":"Salt Lake State"}, 
     {"abbr":"VT","name":"Vermont","slogan":"Green Mountain State"}, 
     {"abbr":"VA","name":"Virginia","slogan":"Mother of States"}, 
     {"abbr":"WA","name":"Washington","slogan":"Green Tree State"}, 
     {"abbr":"WV","name":"West Virginia","slogan":"Mountain State"}, 
     {"abbr":"WI","name":"Wisconsin","slogan":"America's Dairyland"}, 
     {"abbr":"WY","name":"Wyoming","slogan":"Like No Place on Earth"} 
    ]; 

    // The data store holding the states; shared by each of the ComboBox examples below 
    var store = Ext.create('Ext.data.Store', { 
     model: 'State', 
     data: states 
    }); 

    /* 
    var simpleCombo = Ext.create('Ext.form.field.ComboBox', { 
     fieldLabel: 'Select a single state', 
     renderTo: 'myid', 
     displayField: 'name', 
     width: 320, 
     labelWidth: 130, 
     store: store, 
     queryMode: 'local', 
     typeAhead: true 
    }); 
    */ 

    var win = Ext.create('Ext.Window', { 
     width: 800, 
     height: 500, 
     minHeight: 400, 
     minWidth: 550, 
     hidden: false, 
     maximizable: true, 
     title: 'Column Chart', 
     renderTo: Ext.getBody(), 
     layout: 'fit', 
     /* 
     tbar: [{ 
      text: 'Reload Data', 
      handler: function() { 
       store1.loadData(generateData()); 
      } 
     }], 
     */ 
     items: [ 
      { 
       id: 'chartCmp', 
       xtype: 'chart', 
       width: 200, 
       height: 200, 

       animate: true, 
       shadow: true, 
       store: store1, 
       axes: [{ 
        type: 'Numeric', 
        position: 'left', 
        fields: ['data1'], 
        label: { 
         renderer: Ext.util.Format.numberRenderer('0,0') 
        }, 
        title: 'Number of Hits', 
        grid: true, 
        minimum: 0 
       }, { 
        type: 'Category', 
        position: 'bottom', 
        fields: ['name'], 
        title: 'Month of the Year' 
       }], 
       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' 
       }] 
      }, { 
       // Simple ComboBox using the data store 
       xtype: 'combo', 
       fieldLabel: 'Select a single state', 
       displayField: 'name', 
       width: 320, 
       labelWidth: 130, 
       store: store, 
       autoselect: true, 
       queryMode: 'local', 
       typeAhead: true 
      } 
     ] 
    }); 
}); 

Answer 1

你要使用的佈局系統。

當前您已指定layout: 'fit'這意味着：將容器內的單個項目展開爲全寬度。

簡單地刪除這條線將使其默認爲layout: 'auto'，這將只將組件放置在彼此之下。

查看layout browser探索所有選項。