Threaded View

  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

Thread Participants: 1