extjs 100% width on panel when resize

Question

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.

Shinya Koizumi Shinya Koizumi · Accepted Answer · 2013-08-08T06:46:48

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.

extjs 100% width on panel when resize

3 Answers