CODEWITHSUNDEEP
extjs
Josh
Josh

Reputation: 587

Sencha Ext Panel make Height 100%

I have the following application that contains two panels. The height of the first one set to 75% of the screen area and the second panel set to take up the bottom 25% of the screen. I have been working on this for a couple hours and I the button contained in the second panel that is supposed to be taking up the bottom 25% of the screen always shows up at the top. I am new to Sencha and JS any help would be appreciated:

Ext.application({
    name   : 'MyApp',
    launch : function() 
    {
        Ext.onReady(function () 
        {                               
            var panel = Ext.create('Ext.panel.Panel', {
                title: 'Test 2',
                autoScroll: true,
                forceFit: true,
                layout: { type: 'vbox', align: 'fit', padding: 5},
                items: 
                [
                    { xtype: 'panel', height: '75%', layout: { type: 'vbox', align: 'fit', padding: 5}},
                    { xtype: 'panel', height: '25%', layout: { type: 'vbox', align: 'fit', padding: 5}, items:[ { itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' } ]}
                ]
            });

            var viewport = Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items:  [panel]
            });
        }); 
    }
});

Upvotes: 0

Views: 6206

Answers (1)

lombardo
lombardo

Reputation: 429

You can try use the flex property for the panels, and instead of using percentages, set the panel 1 to fit to entire height and the panel 2 to a specific height, just like the following code:

      layout: { type: 'vbox', align: 'stretch', padding: 5}, 
      items: 
            [
                { xtype: 'panel', flex: 1, layout: { type: 'vbox', align: 'fit', padding: 5}},
                { xtype: 'panel', height: 100, layout: { type: 'vbox', align: 'fit', padding: 5},        
           items:[ 
                { itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' }     
               ]}
       ]

You can check the following example: http://jsfiddle.net/rx7Lfo55/

Upvotes: 2

Related Questions