Ext.ux.FitToParent migration Extks4

[foxmarco]

I hope someone will be pleased by the migration of this plugin. Plz check the code and post here any comments or bug fix. Thanks a lot to the owner of plugin Mr Saky, this is only the porting in ext4.




Ext.define('Ext.ux.FitToParent', {
alias: 'plugin.fittoparent',
extend: 'Ext.AbstractPlugin',
/**
* @cfg {HTMLElement/Ext.Element/String} parent The element to fit the component size to (defaults to the element the component is rendered to).
*/
/**
* @cfg {Boolean} fitWidth If the plugin should fit the width of the component to the parent element (default <tt>true</tt>).
*/
fitWidth: true,
/**
* @cfg {Boolean} fitHeight If the plugin should fit the height of the component to the parent element (default <tt>true</tt>).
*/
fitHeight: true,
/**
* @cfg {Boolean} offsets Decreases the final size with [width, height] (default <tt>[0, 0]</tt>).
*/
offsets: [0, 0],

/**
* @constructor
* @param {HTMLElement/Ext.Element/String/Object} config The parent element or configuration options.
* @ptype fittoparent
*/
constructor: function(config) {
config = config || {};
if(config.tagName || config.dom || Ext.isString(config)){
config = {parent: config};
}
Ext.apply(this, config);
},

init: function(grid) {
grid.on('render',this.onRender, this, {single: true});
},

onRender: function(grid) {
var me = this;
me.component = grid;
me.parent = Ext.get(me.parent || grid.getPositionEl().dom.parentNode);
if(grid.doLayout){
grid.monitorResize = true;
grid.doLayout = Ext.Function.createInterceptor(grid.doLayout, me.fitSize, me);
} /*else {
me.fitSize();
Ext.EventManager.onWindowResize(me.fitSize, me);
}*/
Ext.EventManager.onWindowResize(me.fitSize, me);
},

fitSize: function() {
var me = this;
var pos = me.component.getPosition(true),
size = me.parent.getViewSize();
me.component.setSize(
me.fitWidth ? size.width - pos[0] - me.offsets[0] : undefined,
me.fitHeight ? size.height - pos[1] - me.offsets[1] : undefined);
return true;
}
});

[samueleorso]

first of all thanks a lot for this porting..
I put this plugin on my extjs4 web page and it works fine when the browser resize from smaller to bigger but no in the opposite direction (from bigger to smaller).

In your opinion is a wrong configuration of my panel or a strange behavior of this plugin?

[foxmarco]

I've tried both direction but i can't see nothing strange...

i usually use the plugin in this way:


Ext.create("Ext.ux.FitToParent",{offsets:[0, 150]});

Where 150 is the height in pixel of my fix header :)

[samueleorso]

I never used a plugin in the way you suggested.
Could you please write a very small example of an Extjs 4 panel that use this plugin and render itself into an html div? What style's attributes do you use for the div?

Thanks a lot in advance...

[foxmarco]

I use the plugin in this way....

This is the DIV element


<div id="container" style="overflow:hidden; width: 100%; height: 100%"></div>


This is the js




var grid = Ext.create("Ext.panel.Grid", {
....
plugins: [
Ext.create("Ext.ux.FitToParent",{offsets:[0, 150]})

]

});

[mwinkler]

Thanks for converting to ExtJS4.

Size does not always set correctly on IE7. El.getViewSize() can return zero for width and height. The following adds a call to getStyleSize for IE.



fitSize: function() {
var me = this,
pos = me.component.getPosition(true),
size = me.parent.getViewSize();

// verify with getStyleSize for IE
if (Ext.isIE && Ext.isStrict && (size.width == 0 || size.height == 0)) {
size = me.parent.getStyleSize();
}

me.component.setSize(
me.fitWidth ? size.width - pos[0] - me.offsets[0] : undefined,
me.fitHeight ? size.height - pos[1] - me.offsets[1] : undefined);
return true;
}