Problem displaying Window outside Form Panel

[ritesh.kapse]

Hi,

I have got a window which is rendered to Form Panel. I want to display it outside the Form Panel boundaries. I could display such Window but only if its not the part of (not rendered to) Form Panel. See the screen shot. Can anyone help ?

Thanks

[evant]

Post your code.

[ritesh.kapse]

Hi,

Thanks for your early reply. Hear is the simplified code.

var theseSpecWindowConfig = ({
    id: 'thesespecwindow',   
    title: 'Choose your specialities',
    width: 340,
    autoHeight: true,
    closeAction: 'hide',
    plain: true,
    layout: 'fit',
    animateTarget: 'tspec',
    draggable: false,
    buttonAlign: 'center',
    resizable: false,
    
    items: [{
        
        xtype: 'panel',
        baseCls: 'window-bg',
        bodyStyle: 'background:transparent; padding:5px;',
        border: true,
        id: 'thesespecpanel',
        layout: 'fit',
        autoHeight: true,
        //some form components inside this panel
        items:[{html:'item 1'},{ html:'item 2'},{html: 'item3'}]       
    }],
    
    buttons: [{
        text: 'Done',
        handler: function(){          
            Ext.getCmp('thesespecwindow').setVisible(false);
        }
    }]

});

var theseSpecWindow ;
 searchtoobarpanel = new Ext.FormPanel({
        renderTo: document.body,
        title: 'Search Jobs',
        id: 'searchtoolbarform',
        collapsible: true,
        width: 300,
        height: 100,
        layout: 'border',
        items: [{
            region: "center",
            layout: 'fit',
            style: 'padding:5px 1px 5px 1px',
            tbar: ['<b>Search travel jobs for</b>', {
                text: '<b><u>these specialities</u></b>',
                id: 'tspec',
                onClick: function(){
                    
                    //create these specaialty window if not created yet
                    if (!theseSpecWindow) {
                        theseSpecWindow = new Ext.Window(theseSpecWindowConfig);
                        theseSpecWindow.render(Ext.getCmp('searchtoolbarform').getForm().getEl());
                    }
                    
                    //on click of these specialty link  - hide window if already on display. show it if hidden.
                    if (theseSpecWindow.isVisible()) {
                        theseSpecWindow.hide();
                    }
                    else {
                        theseSpecWindow.setPosition(Ext.get('tspec').getX(), Ext.get('tspec').getY());
                        theseSpecWindow.show('tspec');
                    }
                    
                }
            }] }] });

You can try this in firebug.

[evant]

So... the question is, WHY are you rendering the window inside the form if you don't want it inside the form?

[ritesh.kapse]

Hi,

Thanks again...

I have simplified the code. I am displaying a Grid below this Form Panel. I want to display the Window over the Grid.

[evant]

Ok, well if you only give me half the information how am I supposed to help?

[ritesh.kapse]

The question is "is it possible ?".

I am actually integration the components. Everything is done accept the fact that Window is not getting displayed as intended.

I have already wasted a day solving this...

[evant]

Why are you using a window?

If you want to display something in the place of the grid, why not just hide the grid and put another panel (not window) in its place?

[ritesh.kapse]

Please see the Screen shots. From the requirements I have, the window should be displayed outside the Form panel.

[evant]

So render the window OUTSIDE the form and position it over the grid.