1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    64
    Vote Rating
    0
    stirucherai is on a distinguished road

      0  

    Default Panel within a Modal Panel

    Panel within a Modal Panel


    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.




    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%'       
            }
                          ]
                 }]
        }
    }); 
    
    Last edited by stirucherai; 14 Dec 2011 at 9:46 PM. Reason: Code is not visible correctly

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1