'extjs 100% width on panel when resize

I have one div in a page which has 50% width. I attached the panel to this div with renderTo, however when I change the window size my panel doesn't get resize and just keep the original size.

var vp = Ext.create('Ext.panel.Panel',{                      
                     plugins : ['fittoparent'],                      
                     height: 400,
                     layout: 'fit',
                     flex:1,
                     renderTo: Ext.get("scheduler-container"),                               
                     items:[
                         { 
                             xtype: 'resource-list',
                             layout : 'fit',                                
                             resource: resourceResponse,
                             event: eventResponse,
                             serverDateFormat: serverDateFormat,
                             startViewRange:  startDate,               
                             endViewRange: endDate,
                             readOnlyView: true,
                             showCurrentTime: true,
                             dateToScrollTo: now,
                             getEvents: ResourceScheduler.getAllEvents,
                             getResources: ResourceScheduler.getResources,
                             timeZoneOffset: timeZoneOffset
                         }
                     ]
                 });

I came across this http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent&highlight=resize'>plugin and tried if it works. Unfortunately it only works when expanding windows but not when shrinking window. I want to know if someone has successfully accomplish to make panel with 100% width x 100% height.

extjs

Solution 1:^[1]

Sorry for the confusion actually this plugin ( http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent&highlight=resize ) did work. I had set up my page like this

<table>
<tr> 
<td style='width: 50%'>
  <div id='scheduler-container'></div>
</td> 
<td style='width: 50%'></td>
</tr>
<table>

however after replacing table with div it worked ! So after the modification it looks like this

<div class='float-left'>
<div id='scheduler-container' style='width:50%'></div>
</div>
<div class='float-left' style='width:50%'>
</div>
<div class='float-clear'></div>

I hope this would be useful for some run into issue. I don't use table often but some salesforce ui components render as table so I run into this problem.

Solution 2:^[2]

You can use resize event function

resize: function (component, adjWidth ) {
          console.log("resized") ;
        }

you'll get the desired parameters in side those component, adjWidth ,and by using this. using valid conditional statements you set height and weight accordingly

you get height and width by component.dom.style.height,

component.dom.style.width

Solution 3:^[3]

try with these configs

width:"100%"

height:"100%"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shinya Koizumi
Solution 2	Abhishek Bhardwaj
Solution 3	Surya Prakash Tumma

'extjs 100% width on panel when resize

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]