Fit to parent

[Condor]

You probably have a grid with a lot of rows and/or columns and set forceFit or autoResizeColumn.
Either don't use forceFit/autoResizeColumn or try to reduce the amount of rows by using a paging toolbar (or use the LiveGrid extension).

[andrew.howard@gtri.gatech.edu]

The following html used in conjunction with this plugin can make many problems associated with embedding an Ext.Panel into a percentage width/height element (table/div/etc) go away:

<div style="position:relative; width: 100%; height: 100%;">
  <div id="mainContainer"
    style="overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; left: 0;"/>
</div>

[galdaka]

I modify the plugin for configure the adjust manually in some cases:

 
Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.FitToParent = function(parent, width, height) {
 return {
  init: function(c) {
   c.on('render', function(c) {
    parent = Ext.get(parent || c.el.dom.parentNode);
   });
   c.monitorResize = true;
   c.doLayout = c.doLayout.createInterceptor(function(){
    var pos = this.getPosition(), size = parent.getViewSize();
    var w = width || pos[0];
    var h = height || pos[1];
    this.setSize(size.width - w, size.height - h);
   }, c);
   c.on('resize', function(c){
    c.doLayout();     
   });
  }
 }
}

Example of usage:

 
new Ext.ux.plugins.FitToParent(null, null, 48)

Greetings,

[Condor]

I modify the plugin for configure the adjust manually in some cases:

Why did you add:

c.on('resize', function(c){
  c.doLayout();
});

Setting c.monitorResize = true already makes Ext.Container call doLayout on resize, so in your code doLayout gets called twice!

[galdaka]

Why did you add:

c.on('resize', function(c){
  c.doLayout();
});

Setting c.monitorResize = true already makes Ext.Container call doLayout on resize, so in your code doLayout gets called twice!

If I remove this line not work properly in my case, When resize west panel in www.galdaka.es

[Condor]

If I remove this line not work properly in my case, When resize west panel in www.galdaka.es

Ah... You're using the plugin in way I never planned for (fixing accordion layout issues).

In your case you shouldn't use the monitorResize:true, because this option is meant for standalone components, not components in a layout.

[galdaka]

Thanks for your reply,

Another question. In west panel I have a "SeacrhField"; Is posible resize the field when the west panel is resized with your plugin?

Thanks in advance,

[mysticav]

I was having problems. Passing the document body has the parent fixed it:

new Ext.Panel({
		layout: 'border',
		renderTo:'viewPort',
		plugins: [new Ext.ux.plugins.FitToParent(Ext.getBody())], ...

[nbourdeau]

I'm having problems trying to get this work.

I have a div with : width: 100%.
I renderTo the grid in.
But the grid gets a wrong width (getting out the screen !!!)

Can someone please give an example of the code and the html used to have a grid fit 100% width of a non-Extjs container ? (ex. a div)

[Condor]

Did you set the div to overflow:hidden?