Results 1 to 2 of 2

Thread: Panel within a Modal Panel

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Aug 2011
    Vote Rating

    Default Panel within a Modal Panel


    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',
        config: {
            modal: true,
            hideOnMaskTap: true,
            centered: true,
            height: '90%',
            width: '90%',
            layout: {
                animation: {
                    type: 'slide',
                    duration: 500
                    xtype: 'toolbar',
                    title: 'Agent Details',
                    docked: 'top'
                    xtype: 'panel',
                    items :[
               xtype: 'list',
               store: 'menuList',
            itemTpl:'<span class="item-title">{menuName}</span><tpl if="leaf !== true"><span class="x-list-disclosure"></span></tpl>',
             html:'This is for testing',
    Last edited by stirucherai; 14 Dec 2011 at 9:46 PM. Reason: Code is not visible correctly

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    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
    You can add/remove and based on the flex values, it will take up that portion of the component.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts