Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Problem displaying Window outside Form Panel

  1. #1
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
      0  

    Exclamation [Solved] Problem displaying Window outside Form Panel

    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
    Attached Images Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,593
    Vote Rating
    874
      0  

    Default

    Post your code.
    Evan Trimboli
    Twitter - @evantrimboli

  3. #3
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
      0  

    Exclamation Hear is a sample code...

    Hi,

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

    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.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,593
    Vote Rating
    874
      0  

    Default

    So... the question is, WHY are you rendering the window inside the form if you don't want it inside the form?
    Evan Trimboli
    Twitter - @evantrimboli

  5. #5
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
      0  

    Post Its not as simple as it seems...

    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.

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,593
    Vote Rating
    874
      0  

    Default

    Ok, well if you only give me half the information how am I supposed to help?
    Evan Trimboli
    Twitter - @evantrimboli

  7. #7
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
      0  

    Post You are right. But is it possible ?

    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...

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,593
    Vote Rating
    874
      0  

    Default

    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?
    Evan Trimboli
    Twitter - @evantrimboli

  9. #9
    Ext User ritesh.kapse's Avatar
    Join Date
    May 2008
    Location
    Pune, India
    Posts
    120
    Vote Rating
    0
      0  

    Exclamation My problem is Form Panel not Grid !

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

  10. #10
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,593
    Vote Rating
    874
      0  

    Default

    So render the window OUTSIDE the form and position it over the grid.
    Evan Trimboli
    Twitter - @evantrimboli

Page 1 of 2 12 LastLast

Posting Permissions

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