Question

我不知道该怎么办...... 没有hbox，网格出现，但是没有hbox。

我添加＆amp;每个子元素的高度和弹性，但它不起作用......

提前致谢！

这是代码：

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

Answer 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/

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

hbox中的extjs 4网格不会出现

2 个答案: