Layout hbox中的extjs 4网格未显示

我不知道该怎么办。。。 如果没有hbox，网格就会出现， 但hbox没有

我为每个子元素添加了&height和flex， 但是它不起作用

提前谢谢

下面是代码：

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()
    });
});

---

在网格上，您不需要“布局”配置，而且在子组件上使用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()
    });
});

JSFIDLE示例：

---

我发现这里有很多问题

高度

和

宽度

配置属性不应大写

flex

、

height

和

width

属性都应该在面板本身上，而不是面板的

布局上

flex

属性将被加权，因此在按钮上使用

flex:1

，在面板上使用

flex:2

几乎肯定不是您想要做的事情

网格上有

renderTo

，它应该在您的面板内，因此它不应该使用此配置

属性列表的末尾有逗号，这会导致很多问题

列上有

类型

，这不是有效的配置

您不需要

网格上的布局

我不能确切地告诉你你想做什么，但是有一个带有按钮的

hbox

布局作为第二个

项目将看起来很奇怪。但是，如果这是你想要的，这可能更符合你的要求：

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()
});

它有效：-）但我面临一个新问题。。。我在hbox面板上得到了我的网格，与另外两个表单共享宽度（用于测试的标签，但稍后将使用网格）。因此，当我不使用固定宽度值时，我只能看到4列。嗯，我在想，也许网格占据了整个窗户的宽度？现在我有一个窗口，包含3个vbox容器，在第一个vbox中我有一个hbox面板。第一种形式是网格，第二种形式是标签，第三种形式也是。我明天去看看工作，现在不行！我在没有固定宽度单元格的网格上使用了
forceFit:true
。现在网格显示整个面板的宽度，您还可以在每列中添加“flex:1”（或任何数字来更改百分比），使它们都适合显示