Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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