extjs 4格在hbox中不出現

我不知道該怎麼辦... 沒有hbox格子出現，但與hbox沒有。extjs 4格在hbox中不出現

我加入&高度和柔性，以每個子元素，但它不工作...

提前感謝！

而這裏的代碼：

Ext.onReady(function() { 
    var myStore = Ext.create('Ext.data.SimpleStore', { 
     fields: [ 'bMin', ], }); 

    var myData = [ { "bMin": 10, } ]; 

    myStore.loadData(myData); 

    var grid = new Ext.grid.GridPanel({ 
     layout : { type : 'hbox', align : 'stretch', flex:2, 
     Height: 150, 
     Width: 300, 
     }, 
     cls: 'custom-grid', 
     store: myStore, 
     columns: [ 

      {text: "bMin", dataIndex: 'bMin', type: 'float',}, 
     ], 
     viewConfig: { 
     emptyText: 'No records', 
     forceFit : true, 
     }, 
     renderTo: Ext.getBody(), 
    }); 

    var myPanel = new Ext.Panel({ 
     layout : { 
     type : 'hbox', 
     align : 'stretch', 
     }, 
     title: 'Hello', 
     minHeight : 150, 
     minWidth: 300, 
     Height: 150, 
     Width: 300, 
     items: [ 
      grid, 
      {xtype: 'button', width: 50, height: 50, flex: 1} 
     ], 
     renderTo: Ext.getBody() 
    }); 
});

來源

2013-08-23 Roman

使用與HBox高度和寬度上，以便使用Flex子組件忽略，當你不需要「佈局」的配置，也網格的方式去。我還爲hbox佈局添加了一個'pack'屬性。

試試這個：

Ext.onReady(function() { 
    var myStore = Ext.create('Ext.data.SimpleStore', { 
     fields: [ 'bMin', ], }); 

    var myData = [ { "bMin": 10, } ]; 

    myStore.loadData(myData); 

    var grid = new Ext.grid.GridPanel({ 
     flex: 1, 
     cls: 'custom-grid', 
     store: myStore, 
     columns: [ 
      {text: "bMin", dataIndex: 'bMin', type: 'float',}, 
     ], 
     viewConfig: { 
     emptyText: 'No records', 
     forceFit : true, 
     }, 
     renderTo: Ext.getBody(), 
    }); 

    var myPanel = new Ext.Panel({ 
     layout : { 
      type : 'hbox', 
      align : 'stretch', 
      pack: 'start' 
     }, 
     title: 'Hello', 
     minHeight : 150, 
     minWidth: 300, 
     Height: 150, 
     Width: 300, 
     items: [ 
      grid, 
      {xtype: 'button', flex: 1, text: 'test'} 
     ], 
     renderTo: Ext.getBody() 
    }); 
});

的jsfiddle例子： http://jsfiddle.net/vzURb/2/

來源

2013-08-23 12:21:33 drew630

它的作品。不過我現在面臨一個新的問題......我得到了我的網格中的橫向盒面板上，共享寬還有兩種形式（標籤用於測試，但稍後會採用網格）。所以當我不使用固定的寬度值，我只能看到4列。嗯，我只是想，也許網格需要整個窗口的寬度？現在我有一個窗口，包含3個vbox容器，而在第一個vbox中我有一個hbox面板。裏面的第一個形式是網格，第二個是標籤，第三個也是。我明天在工作時會看看，現在我不能 – Roman

明白了！我在沒有固定寬度單元格的網格上使用'forceFit：true'。現在網格需要整個面板的寬度來顯示 – Roman

您也可以將'flex：1'（或任何數字來改變百分比）添加到每一列以使它們全部適合 – drew630

我看到了一些問題，在這裏...

height和width配置屬性不應該大寫
The flex ，height和width屬性都應該是面板本身上，而不是在面板的layout
的flex屬性將被加權，因此使用的面板上flex: 1你的按鈕，flex: 2幾乎肯定不會是你正在尋找什麼做
你有renderTo對電網，這應該是你的面板裏面，所以它不應該使用這個配置
你必須在屬性列表的末端逗號，這會導致很多的問題
列上有type，這不是一個vali d配置
你不需要在grid

佈局我不能告訴它到底是什麼，你想做的事，但有一個hbox佈局的按鈕作爲第二item會看很奇怪。但是，如果這是您打算什麼，這可能是更你想要什麼：

var grid = new Ext.grid.GridPanel({ 
    cls: 'custom-grid', 
    store: myStore, 
    columns: [ 
     {text: "bMin", dataIndex: 'bMin'} 
    ], 
    viewConfig: { 
     emptyText: 'No records', 
     forceFit : true 
    } 
}); 

var myPanel = new Ext.Panel({ 
    layout : { 
     type : 'hbox', 
     align : 'stretch' 
    }, 
    title: 'Hello', 
    height: 150, 
    width: 300, 
    items: [ 
     grid, 
     {xtype: 'button', width: 50, height: 50, flex: 1} 
    ], 
    renderTo: Ext.getBody() 
});

來源

2013-08-23 12:25:13 kevhender

extjs 4格在hbox中不出現

回答

相關問題