PDA

View Full Version : Ext.ux.FitToParent migration Extks4



foxmarco
1 Jul 2011, 2:18 AM
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
14 Jul 2011, 1:15 AM
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
14 Jul 2011, 3:36 AM
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
14 Jul 2011, 3:46 AM
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
14 Jul 2011, 11:42 PM
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
22 Feb 2012, 10:51 AM
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;
}

Jay Ahuja
17 Dec 2013, 11:08 PM
Hello am still getting error. can you please provide proper code so that i can implement in project.