1. #21
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    19
    Vote Rating
    0
    Suresh is on a distinguished road

      0  

    Question height of the grid is reducing for every resize of window

    height of the grid is reducing for every resize of window


    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?


    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

  2. #22
    Ext JS Premium Member
    Join Date
    Jul 2007
    Posts
    19
    Vote Rating
    0
    Suresh is on a distinguished road

      0  

    Default


    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>

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

    Thanks,
    Suresh

  3. #23
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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

    Code:
    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);
        }
    });

  4. #24
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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".

    Code:
    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]);
        }
    });

  5. #25
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by Animal View Post
    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:
    Code:
    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.

  6. #26
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  7. #27
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So, the Ext 3.0 version:

    Code:
    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]);
        }
    });

  8. #28
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Still wrong:
    Code:
    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]);
        }
    });

  9. #29
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Ouch! yes, a missed arg there.

  10. #30
    Ext User
    Join Date
    Aug 2007
    Posts
    61
    Vote Rating
    0
    hash_man is on a distinguished road

      0  

    Default How can I use it?

    How can I use it?


    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
    Michael Gao