Panel within a Modal Panel

[stirucherai]

Hi,


I have requirement to show a list and Panel (with component later) in a modal panel. Following is my observation

1. Modal panel expects width and height to provided for its elements (Flex does not work). Again width and height has to be in pixel -- % does not work (it works only for the Modal Panel only)
2. List element is getting displayed no issues but when we add a panel it does not get displayed -- i tried with background color setting
3. When we add html : " Some text" to the panel takes the width to the size of text only even though we have declared a bigger value for width. Intrestingly if we provide width alone in '%' then it works but height had to be always in PIXEL

Can someone help what I am doing wrong or is it bug. Attaching the modal panel declaration code.

 
Ext.define('NDP.view.menuSetting', {
    extend: 'Ext.Panel',
    xtype: 'menuSetting',
    id:'menuSetting',
    config: {
        modal: true,
        hideOnMaskTap: true,
        centered: true,
        height: '90%',
        width: '90%',
        layout: {
            animation: {
                type: 'slide',
                duration: 500
            }
        },
        items:[
            {
                xtype: 'toolbar',
                title: 'Agent Details',
                docked: 'top'
            },
            {
                xtype: 'panel',
                layout:'hbox',
                items :[
       {
           xtype: 'list',
           deselectOnContainerClick:true,
           store: 'menuList',
        itemTpl:'<span class="item-title">{menuName}</span><tpl if="leaf !== true"><span class="x-list-disclosure"></span></tpl>',
           id:'menuSettingListView',
           width:'30%'
        
        },
        {
         xtype:'panel',
         style:'background-color:green',
         html:'This is for testing',
            width:'70%'       
        }
                      ]
             }]
    }
}); 

[mitchellsimoens]

So you have a Panel with a Toolbar and another Panel. That Panel has a List and another Panel... you are overnesting...

You should have a Panel with a Toolbar, List, and a Panel. The floating Panel should use the hbox unless you need to use card layout and switch between it.

1. Things need a width/height and most things will need a number, not a string.
2. If you are using hbox/vbox layout you should use flex not width/height.
3. same as #2

Something like this:

Ext.create('Ext.Panel', {
    modal      : true,
    centered   : true,
    scrollable : true,
    width      : 400,
    height     : 400,
    layout     : {
        type  : 'hbox',
        align : 'stetch'
    },
    items      : [
        {
            html : 'Left',
            flex : 1
        },
        {
            html : 'Right',
            flex : 2
        }
    ]
}).show();

You can add/remove and based on the flex values, it will take up that portion of the component.