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 set width and height of a panel dynamically on click action

    Unanswered: How to set width and height of a panel dynamically on click action


    Hello,

    I have following scenario. On my page there are two panels. On left panel, it has two 3 child panels and right panel is a gmap panel. Now, out of those 3 child panel one is a grid panel. I want to move right side gmap panel to left side as a 4th child panel of left panel and display a tab panel on right side.

    So far I am able to display tab panel on right side
    Code:
    listeners: {
                      cellclick: function(grid, rowIndex, colIndex) {
                                    Ext.getCmp('mainPanel').remove('mapPanel');
                                    Ext.getCmp('mainPanel').add('tabPan');
                                    Ext.getCmp('searchPanel').add('gSiteMap');
                       }
    	      }
    but unable to add gmap panel as a child panel of left side.
    Code:
    Ext.getCmp('searchPanel').add('gSiteMap');
    Full code is as follow.

    Code:
    Ext.onReady(function(){
    // tab pan
    var googleMap = {
                        xtype: 'gmappanel',
                        id : 'gSiteMap',
                        width:624,
                        height:400,
                        zoomLevel: 14,
                        gmapType: 'map',
                        mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                        mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                        setCenter: {
                          geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
                          marker:{ title: 'Central Park'}
                        },
                        markers:[{
                            lat: 42.339641,
                            lng: -71.094224,
                            marker: {title: 'Boston Museum of Fine Arts'}
                        },{
                            lat: 42.339419,
                            lng: -71.09077,
                            marker: {title: 'Northeastern University'}
                        }]
                    };
    var infoPanel = new Ext.tab.Panel({
                      id:'tabPan',
                      title: 'Site Information',
                      height: 700,
                      width: '50%',
                      items:[{
                          //contentEl:'siteTabContentsDiv',
                          title:'Site'
                      },{
                          title: 'Pressure',
                          html: 'PRESSURE STUFF GOES HERE'                      
                          },{
                          title: 'Cluster',
                          html: 'CLUSTER STUFF GOES HERE'
                      }]
                  });
    
    
    //tab pan end
    //  
      var myData =  [
          { siteId : "100", siteName : "Round Lake", address : "1000 Mateny Rd, Silver Spring, MD, 20904", county :"Montgomery"},
          { siteId : "101", siteName : "Virginia Beach", address : "1292 Middlebrook Rd, White Oak, MD, 20901", county :"College Park"}
         ];
     
      // Generic fields array to use in both store defs.
      var fields = [
         {name: 'siteId', type: 'string'},
         {name: 'siteName', type: 'string'},
         {name: 'address', type: 'string'},
         {name: 'county', type: 'string'}
      ];
    
    
        // create the data store
        var gridStore = new Ext.data.Store({
            fields : fields,
        data   : myData
        });
    
    
    
    
      // Column Model shortcut array
      var cols = [
        {header: "Site ID", width: 90, sortable: true, dataIndex: 'siteId'},
        {header: "Site Name", width: 120, sortable: true, dataIndex: 'siteName'},
        {header: "Address", width: 250, sortable: true, dataIndex: 'address'},
        {header: "County", width: 110, sortable: true, dataIndex: 'county'},
        {
                xtype:'actioncolumn', 
                width:50,
                id:'actionCol',
                items: [{
                    icon: '../imgs/edit.gif',  // Use a URL in the icon config
                    tooltip: 'Edit'
                      
                }]
            }
      ];
    
    
      // declare the source Grid
        var grid = new Ext.grid.GridPanel({ 
            ddGroup          : 'gridDDGroup',
            store            : gridStore,
            columns          : cols,
            enableDragDrop   : true,
            stripeRows       : true,
            autoExpandColumn : 'name',
            width            : 600,
            height           : 325,
            listeners: {
                cellclick: function(grid, rowIndex, colIndex) {
                Ext.getCmp('mainPanel').remove('mapPanel');
                Ext.getCmp('mainPanel').add('tabPan');
                var mPan = Ext.getCmp('mapPanel');
    			mPan.setWidth(624);
    			mPan.setHeight(200);
                Ext.getCmp('searchPanel').add('gSiteMap');
    
    
                }
    		}
        });
        var gPanel = Ext.create('Ext.panel.Panel',{
                    id:'mapPanel',
                    title: 'Site Map',
                    width:624,
                    height:400,
                    resizable: true,
                    closeAction: 'hide',
                    collapsible: true,
                    layout: 'fit',
                    collapsible: true,
                    draggable: true,
                    items: [googleMap]
                    });
        
    Ext.create('Ext.panel.Panel', {
              renderTo: Ext.getBody(),
              id:'mainPanel',
              width: '100%',
              height: 800,
              title: 'NOAA Site Register',
              layout: 'column',
              items: [
                  {
                      xtype: 'panel',
                      title: '',
                      id:'searchPanel',
                      height: 700,
                      width: '50%',
                      items:[{xtype: 'panel',
                        title: 'Search Options',
                        id: 'win',
                        height: 100,
                        width: 624,
                        layout: 'fit',
                        collapsible: true,
                        draggable: true,
                        layout: 'fit',
                        contentEl: 'siteSearchOption'
                        },{
                          xtype: 'panel',
                          title: 'Filler Options',
                          height: 100,
                          width: 624,
                          layout: 'fit',
                          collapsible: true,
                          draggable: true,
                          contentEl:'siteFillerOption'
                        },{
                            xtype    :'panel',
                            title: 'List Of Sites',
                            width    : 624,
                            height   : 100,
                            layout   : 'fit',
                            collapsible: true,
                            draggable: true,
                            items    : [grid]
                     }]
                  },gPanel
                ]
            });
     
    });
    Hope to see some reply.

    Ankit

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

      0  

    Default


    alright, I got make it working by making some modification in listener code.

    Code:
    listeners: {
                cellclick: function(grid, rowIndex, colIndex) {
                  var mPanel = Ext.getCmp('mapPanel');
                    mPanel.setHeight(200);
                    Ext.getCmp('searchPanel').add('mapPanel');
                    Ext.getCmp('mainPanel').remove('mapPanel');
                    Ext.getCmp('mainPanel').add('tabPan');
                }
    		}
    Above is the answer to my problem.

    Now if I swap add and remove line of code (which logically seems right as remove and then add other place) as shown below , It would not solve my problem.

    Code:
    listeners: {
                cellclick: function(grid, rowIndex, colIndex) {
                  var mPanel = Ext.getCmp('mapPanel');
                    mPanel.setHeight(200);
                    Ext.getCmp('mainPanel').remove('mapPanel');
                    Ext.getCmp('mainPanel').add('tabPan');
                    Ext.getCmp('searchPanel').add('mapPanel');
                }
    		}
    Any one know why ?

    -Ankit

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi