0

I have an html page and render a panel with layout: 'border' on it. I render it to a div with renderBody config. when I run the page I gives this error: layout run fails.

this is my ExtJs code

Ext.create('Ext.panel.Panel', {
    //width: 500,  // I want to fit this panel to parent element
                 //that i render this panel to it
    //height: 300, //
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region',
        region: 'south',
        xtype: 'panel',
        height: 100
    },{
        // xtype: 'panel' implied by default
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        width: 200,
        id: 'west-region-container',
        layout: 'fit'
    },{
        title: 'Center Region',
        region: 'center',
        xtype: 'panel',
        layout: 'fit'
    }],
    renderTo: 'div-Id'
});

What should I do ?

Omid Shariati
  • 1,904
  • 5
  • 22
  • 44
  • can you provide a jsfiddle link for your example ? This might help us figure out what your problem actually is. – SAnDAnGE Sep 26 '13 at 09:06

1 Answers1

4

Give you main panel a height...this will resolve the issue. See here for an example: https://fiddle.sencha.com/#fiddle/ma

existdissolve
  • 3,104
  • 1
  • 16
  • 12
  • thanks, but I want to automatically fit my pabel to width and height of container – Omid Shariati Sep 28 '13 at 09:53
  • 1
    Take a look at the docs for Ext.layout.container.Border: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Border You have to configure east/west with either a fixed width, percentage width, or flex config, and north/south with the same for height. Otherwise, you'll continue getting the error you mentioned. – existdissolve Sep 28 '13 at 16:18