Question

Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
title: 'Container Panel',
items: [
    {
        xtype: 'panel',
        title: 'Child Panel 1',
        height: 100,
        width: '75%'
    },
    {
        xtype: 'panel',
        title: 'Child Panel 2',
        height: 100,
        width: '75%'
    }
]
});

The above code is not being executed… Can you please find the error or bug. I am very new to extjs. I found the above code while going through the documentaion(check ‘containers’ Section). It is executing fine in jsfiddle but not in my project.(other samples are working fine in my project).

ANSWER:

Ext.onReady(function(){
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        width: 400,
        height: 300,
        layout: 'hbox',
        title: 'Container Panel',
        items: [
           {
               xtype: 'panel',
               title: 'Child Panel 1',
               height: 100,                
               flex:1
           },
           {
               xtype: 'panel',
               title: 'Child Panel 2',
               height: 100,
               flex:1
           }
       ]
   });
});

Answer 1

Several problems:

1) You need to wrap the code in an onReady block.

2) The widths are not valid. How can both of them be 75%? In this case, you will want to use an hbox layout, with each child item being flex: 1.