0

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

2 回答 2

0

我在这里看到了很多问题...

  1. height并且width配置属性不应该大写
  2. 、和属性都应该在面板本身上，而不是在面板flex的heightwidthlayout
  3. 该flex属性将被加权，因此flex: 1在您的按钮和flex: 2面板上使用几乎肯定不是您想要做的
  4. 你有renderTo网格，它应该在你的面板内，所以它不应该使用这个配置
  5. 您在属性列表的末尾有逗号，这可能会导致很多问题
  6. 你有type一个列，这不是一个有效的配置
  7. 你不需要布局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-23T12:25:13.030 回答
0

在网格上，您不需要“布局”配置，当使用 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-23T12:21:33.800 回答