Hybrid View

  1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    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 Fit to parent

    Fit to parent


    The ExtJS layout system works perfectly as long as you are using an Ext.Viewport or render to an element with fixed height and width.

    But what if you already have a complete page design and want to fit an Ext component inside a div with flexible height and/or width?

    I've posted the solution several times before, but I realized it would be easier to make a plugin out of it:

    Code:
    Ext.namespace('Ext.ux');
    /**
     * @class Ext.ux.FitToParent
     * @extends Object
     * <p>Plugin for {@link Ext.BoxComponent BoxComponent} and descendants that adjusts the size of the component to fit inside a parent element</p>
     * <p>The following example will adjust the size of the panel to fit inside the element with id="some-el":<pre><code>
    var panel = new Ext.Panel({
        title: 'Test',
        renderTo: 'some-el',
        plugins: ['fittoparent']
    });</code></pre></p>
     * <p>It is also possible to specify additional parameters:<pre><code>
    var panel = new Ext.Panel({
        title: 'Test',
        renderTo: 'other-el',
        autoHeight: true,
        plugins: [
            new Ext.ux.FitToParent({
                parent: 'parent-el',
                fitHeight: false,
                offsets: [10, 0]
            })
        ]
    });</code></pre></p>
     * <p>The element the component is rendered to needs to have <tt>style="overflow:hidden"</tt>, otherwise the component will only grow to fit the parent element, but it will never shrink.</p>
     * <p>Note: This plugin should not be used when the parent element is the document body. In this case you should use a {@link Ext.Viewport Viewport} container.</p>
     */
    Ext.ux.FitToParent = Ext.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 = c.doLayout.createInterceptor(this.fitSize, this);
                } else {
                    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);
        }
    });
    Ext.preg('fittoparent', Ext.ux.FitToParent);
    The following example will adjust the size of the panel to fit inside the element with id="some-el":
    Code:
    var panel = new Ext.Panel({
        title: 'Test',
        renderTo: 'some-el',
        plugins: ['fittoparent']
    });
    It is also possible to specify additional parameters:
    Code:
    var panel = new Ext.Panel({
        title: 'Test',
        renderTo: 'other-el',
        autoHeight: true,
        plugins: [
            new Ext.ux.FitToParent({
                parent: 'parent-el',
                fitHeight: false,
                offsets: [10, 0]
            })
        ]
    });
    The element the component is rendered to needs to have style="overflow:hidden", otherwise the component will only grow to fit the parent element, but it will never shrink.

    Note: This plugin should not be used when the parent element is the document body. In this case you should use an Ext.Viewport container.
    Last edited by Condor; 1 Jun 2010 at 5:14 AM. Reason: Updated for Ext 3.2

  2. #2
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    0
    mabello is on a distinguished road

      0  

    Default Thanks

    Thanks


    Good job Condor, thanks!

  3. #3
    Ext User
    Join Date
    Nov 2007
    Posts
    1
    Vote Rating
    0
    lamtung is on a distinguished road

      0  

    Default


    I've tried it but firefox said "Ext.ux.plugins has no properties" ?
    P.S : I added your code in the beginning of my js file

  4. #4
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Excellent idea!!


    But not work for me. I have a gridpanel in a div and the gridpanel is not resize properly!


    Thanks,

  5. #5
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by galdaka View Post
    Excellent idea!!


    But not work for me. I have a gridpanel in a div and the gridpanel is not resize properly!


    Thanks,
    SOLVED!!: .parentNode.parentNode

    Would be great define in a param the parent level you can adjust it!!!!

    Thanks again

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    89
    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


    I updated the original code to allow you to specify the parent element.

  7. #7
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Excellent plugin!!!

  8. #8
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Excellent plugin!!!

    Thanks again!!

  9. #9
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by lamtung View Post
    I've tried it but firefox said "Ext.ux.plugins has no properties" ?
    P.S : I added your code in the beginning of my js file
    Register namespace: Ext.namespace("Ext.ux.plugins");

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

      0  

    Default


    A suggestion here.

    How about adding a monitorWindowResize option so that it automatically refits the Component to its parent on window resize.

    This would be useful for when the parent element is sized using %ages.

    Then we could help this guy: http://extjs.com/forum/showthread.php?t=66606