CODEWITHSUNDEEP
layoutextjs
lvil
lvil

Reputation: 4326

Problem with layouts

My goal is to make somethink like this:
enter image description here There is viewport with border layout. "Container" and "center" both have "fit" layout. The "Panel" has 'vbox' layout and has three elements. The grid has one row when loaded the first time. I want all the grid to catch all the height and the button panels on top and in the bottom of it. If I don't specify the height of the grid or "container" or "Panel", I don't see anything.
How can I make it work?

Upvotes: 0

Views: 1681

Answers (3)

pllee
pllee

Reputation: 3959

It would be helpful if you posted some code. If the panel has a tbar and bbar and it's only items is a gridpanel then you could give the gridpanel a flex (I think any number will work)and you probalbaly want the layoutConfig to be align : 'stretch' . In a vbox layout if a child's flex is not provided it will use the original height of the child. 

Panel({
     layout: {
                type: 'vbox',
                align: 'stretch'
     },
     tbar: {},
     bbar: {},
     items : [{
         xtype:'grid',
         flex: 1
    }]
})

Upvotes: 0

owlness
owlness

Reputation: 2936

Remove the excess panels and make the grid panel itself the center region of the border layout. The "button panels" should be toolbars of the grid panel:

new Ext.Viewport({
    layout: 'border',
    items: [
        {
            region: 'center',
            xtype: 'grid',
            // ... other required grid properties, like 'store' and 'columns'
            tbar: [
                // Top toolbar. Items are Ext.Button instances.
                {
                    text: 'Button 1'
                },
                {
                    text: 'Button 2'
                }
            ],
            bbar: [
                // Bottom toolbar. Items are Ext.Button instances.
                {
                    text: 'Button 3'
                },
                {
                    text: 'Button 4'
                }
            ]
        }
    ]
});

Upvotes: 2

Fourth
Fourth

Reputation: 9351

The problem is that grids and elements will want to use the least amount of vertical space possible unless you set a fixed height on them. The best solution is to use a min-height style to allow the grid to grow as long as it wants but always be at least some minimum value.

Upvotes: 0

Related Questions