Fit to parent plugin available for Extjs4?

[renganathan]

Hi all,

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

Guys any suggestions ?

[mitchellsimoens]

Not that I have seen. Port it! Bet you would learn a lot about Ext JS 4

[toolware]

I'd like to see this as well.

[Albareto]

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.

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]

Thanks Albareto!

[b.rameesh]

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]

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]

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]

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]

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.