-1

我正在尝试在 vbox 布局中呈现 GridPanel 和两个常规面板（稍后将根据用户操作更新面板）。

http://jsfiddle.net/auVez/

我的商店工作正常

var store = new Ext.data.ArrayStore({
    autoDestroy: true,
    storeId: 'myStore',
    fields: [
       {name: 'categoryId', type: 'int'},
       {name: 'categoryName', type: 'string'}
    ]
});

在我开始使用 vbox 之前，GridPanel 工作正常......

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header:'Category ID', width: 40, sortable: true, dataIndex: 'categoryId', hidden: true},
        {header:'Cat. Name', width: 80, sortable: true, dataIndex: 'categoryName'}
    ],
    flex: 10,
    loadMask: true,
    stripeRows: true,
    viewConfig: { autoFill: true }, //This makes the columns span the screen onLoad
    sm: new Ext.grid.RowSelectionModel({
        singleSelect: true
    })
});

我给 vbox 添加了一个高度，因为我读到它必须有一个......

var mainPanel = new Ext.Panel({
    renderTo: 'myDiv',
    frame: true,
    layout: 'vbox',
    layoutConfig: {
        align: 'stretch'
    },
    height: '200px',
    items: [
        grid,
        {
            flex: 5,
            title: 'Take Action',
            id: 'SelectedItemPanel',
            bodyStyle: {
                background: '#ffffff',
                padding: '6px 15px 0px 15px'
            },
            html: 'Please select item above to take action upon.'
        },
        {
            flex: 5,
            title: 'Preview',
            id: 'SelectedItemPanel2',
            bodyStyle: {
                background: '#ffffff',
                padding: '6px 15px 0px 15px'
            },
            html: 'Magic!'
        }
    ]
});

但它仍然呈现为大约 10 像素高度的灰色边框，并且不会按要求占用 300 像素。

我猜我错过了一些溢出声明或其他东西，但这令人沮丧，因为我已经花了大约 4 个小时来尝试获得如此简单的工作:-(

4

1 回答 1

3

嗨，问题出在高度配置中

give height:300(去掉单引号)

在这里看到jsfiddle 链接

于 2012-12-21T11:14:16.557 回答