1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    28
    Vote Rating
    0
    Ankit.Desai is on a distinguished road

      0  

    Default Unanswered: How to add Ext.window in side an Ext.panel

    Unanswered: How to add Ext.window in side an Ext.panel


    Hello, I am trying to add Ext.window as a child of an Ext.panel. I tried different way like, in show method of window I passed panel id
    Code:
    }).show('pan1')
    or get panel component and add window in side it
    Code:
    Ext.getCmp('pan1').on('load',function(){     win1.show('siteSearchOption');
    });
    none of them worked. My aim is to add window in side a panel as child like we do with other component as xtype:'panel'.

    Please find below full code of the page I am working on. This will display both the window and parent panel but window displayed as independent component so, it is rendering anywhere on the page. I want to restrict its movement only in to parent panel.



    Code:
    Ext.onReady(function(){
    
    
    Ext.create('Ext.panel.Panel', {
              renderTo: Ext.getBody(),
              width: '100%',
              height: 800,
              title: 'Site Register',
              layout: 'column',
              items: [
                  {
                      xtype: 'panel',
                      id:'pan1',
                      title: 'siteSearchPanel',
                      height: 700,
                      width: '55%',
                      items:[new Ext.window.Window({
                        title: 'Search Options',
                        id: 'win',
                        height: 200,
                        width: 650,
                        layout: 'fit',
                        collapsible: true,
                        
                        items: [{
                          xtype: 'panel',
                          height: 100,
                          width: 650,
                          contentEl:'siteSearchOption'
                        }]
            }).show()]
                  },
                  {
                      xtype: 'tabpanel',
                      title: 'Site Information',
                      height: 700,
                      width: '45%',
                      items:[{
                          //contentEl:'siteTabContentsDiv',
                          title:'Site'
                      },{
                          title: 'Pressure',
                          html: 'PRESSURE STUFF GOES HERE'                      
                          },{
                          title: 'Cluster',
                          html: 'CLUSTER STUFF GOES HERE'
                      }]
                  }
                ]
            });
    });
    Hope to see some reply.

    -Ankit

  2. #2
    Sencha User
    Join Date
    Mar 2008
    Posts
    129
    Answers
    2
    Vote Rating
    0
    art.home.ext is on a distinguished road

      0  

    Default don't add ! just constrain ...

    don't add ! just constrain ...


    Maybe it can be done but I would not have set a Window as an item of a Panel.

    Try this instead :
    Code:
    {
                      xtype: 'panel',
                      id:'pan1',
                      title: 'siteSearchPanel',
                      height: 700,
                      width: '55%',
                      html:'',
                      listeners:{
                      afterrender:function(p){
                      	var aBdy = p.el.child(".x-panel-body");
    	                  new Ext.window.Window({
    	                    title: 'Search Options',
    	                    id: 'win',
    	                    height: 200,
    	                    width: 650,
    	                    layout: 'fit',
    	                    collapsible: true,
    	                    constrainTo:aBdy,
    	                    constrain:true,
    	                    x:aBdy.getX(),
    	                    y:aBdy.getY(),
    	                    items: [{
    	                      xtype: 'panel',height: 100,width: 650,contentEl:'siteSearchOption'
    	                    }]
    	        	}).show();
    	                  }
                      },
                  }
    It might be possible to have a floating and draggable Panel as an item instead of a Window too.

  3. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,611
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Here's a similar approach:

    Code:
    var panel = new Ext.panel.Panel({
        height: 600,
        renderTo: Ext.getBody(),
        title: 'Title',
        width: 600
    });
    
    new Ext.window.Window({
        constrainHeader: true, // or just constrain: true if you prefer
        height: 300,
        renderTo: panel.body,
        title: 'Window',
        width: 300
    }).show();
    Use renderTo to add the window to a container, then use either constrain or constrainHeader to keep it within the container. This is all documented here:

    http://docs.sencha.com/ext-js/4-0/#/...-cfg-constrain

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    28
    Vote Rating
    0
    Ankit.Desai is on a distinguished road

      0  

    Default


    Thanks art.home.ext and skirtle for solutions. As, I am more comfortable with panel, I am trying art.home.ext 's second approach to make Panel floating and draggable .

    Ankit

Thread Participants: 2