hbox中的extjs 4网格没有出现答案

【问题标题】：extjs 4 grid in hbox does not appearhbox中的extjs 4网格没有出现
【发布时间】：2013-08-23 20:25:13
【问题描述】：

我不知道该怎么办... 没有 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()
    });
});

【问题讨论】：

标签： layout extjs hbox

【解决方案1】：

在网格上，您不需要“布局”配置，当使用 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/

【讨论】：

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

【解决方案2】：

我发现这里有很多问题...

height 和 width 配置属性不应大写
flex、height 和 width 属性都应该在面板本身上，而不是在面板的 layout 上
flex 属性将被加权，因此在您的按钮上使用 flex: 1 和在面板上使用 flex: 2 几乎肯定不会是您想要做的事情
你在网格上有renderTo，它应该在你的面板内，所以它不应该使用这个配置
属性列表末尾有逗号，这会导致很多问题
您的列上有type，这是无效的配置
您不需要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()
});

【讨论】：