Fit to parent

[Suresh]

I have used this plug-in successfully, but while resizing the window height of the grid is reducing. Is there any problem with my code?

        grid = new Ext.ux.AutoGridPanel({
                //title:'Auto loading columnmodel',
                renderTo: 'sampleGrid',
                height:500, 
                loadMask: true,
                store: store,
                bbar: pagingBar,
                plugins: [new Ext.ux.plugins.FitToParent('sampleGrid')],
    			footer: false,
    			shadow : true,
    			frame : true,
    			loadMask: true,
    			monitorResize:true
         });
         // render grid
         grid.render();
         // load + metadata
         grid.store.load({params: {meta: true, start:0, limit:100}});

div tag is:

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


In IE 6 when I open the page the grid is reducing gradually and after that it not showing the grid data.

Thanks,
Suresh

[Suresh]

Solved! I was wrong. I have to put the sampleGrid in gridParentDiv with height like below.


<div id="gridParentDiv" style="height:400px;">
<div id="sampleGrid" style="width:100%;overflow:hidden"></div>
</div>

        plugins: [summary, new Ext.ux.plugins.FitToParent("gridParentDiv")],

Thanks,
Suresh

[Animal]

I'm upgrading a legacy app to use Ext Components outside of a layout scheme.

I was finding that the getPosition call was returning the Component's absolute position, not its local position relative to its containing element which meant that the size would be set incorrectly. So I needed to change the code to be

Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.FitToParent = Ext.extend(Object, {
    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(true), size = parent.getViewSize();
            this.setSize(size.width - pos[0], size.height - pos[1]);
        }, c);
    }
});

[Animal]

Also, generating a new function to use as the interceptor function's target function every time is not very efficient, so I used a member function, "fitSizeToParent".

Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.FitToParent = Ext.extend(Object, {
    constructor: function(parent) {
        this.parent = parent;
    },

    init: function(c) {
        c.on('render', function(c) {
            this.parent = Ext.get(this.parent || c.el.dom.parentNode);
        });
        c.monitorResize = true;
        c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
    },

    fitSizeToParent: function() {
        var pos = this.getPosition(true), size = this.parent.getViewSize();
        this.setSize(size.width - pos[0], size.height - pos[1]);
    }
});

[Condor]

Also, generating a new function to use as the interceptor function's target function every time is not very efficient, so I used a member function, "fitSizeToParent".

Almost, but the parent isn't passed to the component:

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

ps.
1. I renamed 'parent' to 'fitToParentEl' to avoid property name conflicts.
2. In Ext 3.0 you should use this.getDomPositionEl() instead of this.el.

[Animal]

Ah, well spotted. I'll fix that here, or course I forgot that the scope in that function will be the client Component, not the plugin.

I also always use {single: true} on a render listener to that the listener is removed as soon as it runs.

[Animal]

So, the Ext 3.0 version:

Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.FitToParent = Ext.extend(Object, {
    constructor: function(parent) {
        this.parent = parent;
    },

    init: function(c) {
        c.on('render', function(c) {
            c.fitToElement = Ext.get(this.parent || c.getDomPositionEl().dom.parentNode);
        }, {single: true});
        c.monitorResize = true;
        c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
    },

    fitSizeToParent: function() {
        var pos = this.getPosition(true), size = this.fitToElement.getViewSize();
        this.setSize(size.width - pos[0], size.height - pos[1]);
    }
});

[Condor]

Still wrong:

Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.FitToParent = Ext.extend(Object, {
    constructor: function(parent) {
        this.parent = parent;
    },
    init: function(c) {
        c.on('render', function(c) {
            c.fitToElement = Ext.get(this.parent || c.getDomPositionEl().dom.parentNode);
        }, this, {single: true});
        c.monitorResize = true;
        c.doLayout = c.doLayout.createInterceptor(this.fitSizeToParent);
    },
    fitSizeToParent: function() {
        var pos = this.getPosition(true), size = this.fitToElement.getViewSize();
        this.setSize(size.width - pos[0], size.height - pos[1]);
    }
});

[Animal]

Ouch! yes, a missed arg there.

[hash_man]

Hi,I alway find a way to fit the grid to the screen. I think you have made an excellent work.
But I can't use it. I put the plugin code at the begin of my js file. But the firebug report like below:

Ext.ux.plugins is undefined

How can I use it?

Thanks