-1

GridPanel と、vbox レイアウトの 2 つの通常の Panel をレンダリングしようとしています (後でユーザー アクションに基づいて Panel を更新します)。

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

こんにちは問題は高さ設定にあります

与えるheight:300（一重引用符を削除する）

ここを参照してくださいjsfiddleリンク

于 2012-12-21T11:14:16.557 に答える