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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar