PDA

View Full Version : Fit to parent plugin available for Extjs4?



renganathan
23 Nov 2011, 6:45 AM
Hi all,

Is Fit to parent plugin available for Extjs 4? I was going through this page http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent. i found that its available for Extjs 3.

Guys any suggestions ?

mitchellsimoens
23 Nov 2011, 7:20 AM
Not that I have seen. Port it! Bet you would learn a lot about Ext JS 4

toolware
28 Nov 2011, 7:46 AM
I'd like to see this as well.

Albareto
6 Jul 2012, 6:00 AM
Well, I also needed this and I couldn't find it so I tried to port version 3 to 4, and this is what I got. For me it is working but I don't know if it is correct coding or not, I basically removed a couple of things and move others, nothing very impressive. I did a quick test in IE9, FF, Chrome and Safari and seems to work.



Ext.define('Ext.ux.plugins.FitToParent',
{
alias: 'plugin.fittoparent',

extend : 'Object',

/**
* @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(c)
{
this.component = c;
c.on('render', function(c)
{
this.parent = Ext.get(this.parent || c.getPositionEl().dom.parentNode);
if (c.doLayout)
{
c.monitorResize = true;
c.doLayout = Ext.Function.createInterceptor(c.doLayout, this.fitSize, this);
}
this.fitSize();
Ext.EventManager.onWindowResize(this.fitSize, this);
}, this, {single: true});
},
fitSize: function()
{
var pos = this.component.getPosition(true),
size = this.parent.getViewSize();
this.component.setSize(
this.fitWidth ? size.width - pos[0] - this.offsets[0] : undefined,
this.fitHeight ? size.height - pos[1] - this.offsets[1] : undefined);
}
});


This code is just a modification from Condor's plugin, you can find the original code for ExtJS 3.x here (http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent).

I attach a full example, you just have to change the paths to the ext source files.

Please, comment and help improving this component, I think it is very useful; in my opinion it should be a default in the library.

Cheers!

DCstewieG
13 Jul 2012, 8:58 AM
Thanks Albareto!

b.rameesh
28 Nov 2012, 2:25 AM
Working GREAT for Tab panels but not for GRIDs...Please indicate what changes have to be done to make it compatible with Grids...
Also facing some issues when there are scroll bars in the page...

Thanks in Advance

Albareto
28 Nov 2012, 2:51 AM
In my production application I only use this plugin with grids and never had problems...

This sample code works with the plugin:


Ext.onReady(function()
{
Ext.create('Ext.grid.Panel',
{
autoScroll: true,
renderTo: 'content',
layout : 'fit',
plugins : ['fittoparent'],
store : Ext.create('Ext.data.Store',
{
fields : ['column1', 'column2'],
data :
[
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},
{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'},{column1 : 'first column', column2 : 'some text for second column'}
]
}),
columns :
[
{flex : 1, text : 'column 1', dataIndex : 'column1'},
{flex :1, text : 'column 2', dataIndex : 'column2'}
]
});
});

I tested Chrome, FF and IE9, maybe the plugin is interfering with other code you have. Can you try to pick my example, change the Ext.onReady code to the grid one and test if it works?

b.rameesh
28 Nov 2012, 3:39 AM
Hi Albareto,
The code u gave worked perfectly, but its not working for the code i am using. Really dont know what mistake i am making..Pls help..


var grid = Ext.create('Ext.grid.Panel', {
id : id1,
title: titleVal,
store: store,
layout : 'fit',
plugins : ['fittoparent'],
collapsible:true,
columns:columnModel,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true,
plugins: Ext.create('Ext.ux.ProgressBarPager', {})
}],
renderTo: divId
});
store.loadPage(1);
store.on('load',function() {
Ext.getCmp('DashboardBackend').doLayout();
Ext.getCmp('DashboardGUI').doLayout();
})
addToolbars(divId,sfFinal,pollInterval,type);
return true;

}

I am getting this error.

TypeError: d.clone is not a function

Albareto
28 Nov 2012, 4:02 AM
I guess you will have to debug to see what's in d, why it is undefined and where is coming from, probably will give you a hint of what you are not setting up correctly, I cannot see anything strange in the code you posted.

Other thing, have you tried to remove the plugin to see if you get the error? I think this is not related to the plugin.

b.rameesh
28 Nov 2012, 4:03 AM
Hi Albareto,
I have tried to remove the plugin and tried and its working.. I am in the process of debugging...Will post if i get it working....

Thanks for you help.

senthil41189
17 Dec 2012, 4:31 AM
Albareto,
I am trying to use this plugin for a locked grid and its throwing some CLONE method is undefined exception. So i added a clone method to this plugin but the columns that are not locked are not displayed.
Is there any other configuration to be added for locked grids?

Thanks in Advance,
SenthilKumar Vellore Mohan

Shinya Koizumi
6 Aug 2013, 9:33 AM
I have included the plugins but it only works when expanding the windows.
However, when shrinking the window the panel doesn't get shrinked it stays
at the same width. Someone can tell me what's wrong is my code?

var vp = Ext.create('Ext.panel.Panel',{
plugins : ['fittoparent'],
height: 400,
layout: 'fit',
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
}
]
});