1. #1
    Sencha User
    Join Date
    Jul 2008
    Posts
    25
    Vote Rating
    0
    Leonhart is on a distinguished road

      0  

    Default [Help!] Multiple Windows within layout

    [Help!] Multiple Windows within layout


    I have a page with borderlayout as follows:

    Ext.onReady(function()
    {
    Ext.QuickTips.init();

    var win1 = new Ext.Window({...............});

    var mainPanel = new Ext.Panel
    ({
    id: 'mainpanel',
    name: 'mainpanel',
    title: 'Main Frame',
    region: 'center',
    margins: '0 0 0 0',
    autoScroll: true,
    scope: this
    });

    var itemPanel= new Ext.Panel ({
    id: 'itemtree',
    name: 'itemtree',
    region: 'north',
    split: true,
    height: 300,
    autoScroll: true,

    });

    var taskPanel = new Ext.Panel
    ({
    id: 'taskpanel',
    name: 'taskpanel',
    title: 'Task',
    region: 'center'
    });

    new Ext.Viewport
    ({
    layout: 'border',
    items: [{
    layout: 'border',
    id: 'defaultlayout',
    name: 'defaultlayout',
    title: 'Items',
    region: 'west',
    collapsible:true,
    split: true,
    width: '20%',
    margins: '0 0 0 0',
    items: [treePanel, taskPanel]
    },
    mainPanel
    ],
    renderTo: Ext.getBody()
    });
    });
    I want the mainPanel to be able to contain multiple Ext.Window(s), and I want these windows to be bounded inside the mainPanel..! (unlike now they just go on top of the whole layout....)

    I tried rendering the window to the mainPanel but it doesn't work......

    Please Help!

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Render them to mainPanel's Element.

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    1. try using code tags, not quote tags
    2. try indenting your code
    3. try the layout browser example to see what layout you want

  4. #4
    Sencha User
    Join Date
    Jul 2008
    Posts
    25
    Vote Rating
    0
    Leonhart is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    Render them to mainPanel's Element.
    Render to mainpanel's Element?? What that mean....?? something like this...??

    win1.render(Ext.getCmp('mainpanel').getEl())
    ??

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Tried it?

  6. #6
    Sencha User
    Join Date
    Jul 2008
    Posts
    25
    Vote Rating
    0
    Leonhart is on a distinguished road

      0  

    Default


    I have done it by adding the window as an item within the mainPanel......

    However.... when I drag and drop the window.... the window moves itself to the right (east) on the X axis by approximately the width of the west border layout.....

    I played around with the dd object within the window object.....

    Please help.... I am trying to remove this effect....

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    A Window cannnot be a child item of a Container.

    Just render it to the mainPanel's Element.

  8. #8
    Sencha User
    Join Date
    Jul 2008
    Posts
    25
    Vote Rating
    0
    Leonhart is on a distinguished road

      0  

    Default


    Why not?? I got the window to work find with in the Ext.Panel Object.... and it is bounded inside the mainPanel......

    I tried rendering it to the mainPanel's Element..... By it isn't any better...... The Ext.Window object still sits on top of the whole layout....

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Well, I can run up the examples/layout/complex.html example here, and type this into the Firebug console:

    Code:
    new Ext.Window({title: 'Foo', width:100, height:100, renderTo: 'ext-comp-1013', constrain: true}).show()
    (ext-comp-1013 is ID of the "center" Panel which is a TabPanel in this case)

    And the Window can be dragged around in the center region, and won't move out of it.

Thread Participants: 2