Threaded View

  1. #1
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar