1. #121
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    -3
    AlphaBravo can only hope to improve

      0  

    Default


    Has anyone found the fix for comment #115 as stated in comment #117?

  2. #122
    Sencha User
    Join Date
    Jun 2011
    Posts
    52
    Vote Rating
    0
    won.rhee is on a distinguished road

      0  

    Default


    Quote Originally Posted by AlphaBravo View Post
    Has anyone found the fix for comment #115 as stated in comment #117?
    +1 for this

  3. #123
    Sencha User
    Join Date
    Mar 2011
    Posts
    19
    Vote Rating
    0
    JoelB is on a distinguished road

      0  

    Default


    +1 for this too

    But why on earth cant we set 100% width on a panel ??? To always have to set the pixel width on resize sounds so ... heavy.

    //J

  4. #124
    Sencha User
    Join Date
    Sep 2012
    Posts
    9
    Vote Rating
    0
    yvkumar87 is on a distinguished road

      0  

    Default


    Hi I have seen ur post i am not able to fix this issue with this below code
    will u help me in this to resolve my issue I am new to ExtJs what changes i have to do in this below code
    I am expecting the output like which is in attachment "output.png"
    http://www.sencha.com/forum/showthre...521#post892521


    Quote Originally Posted by Condor View Post
    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.

  5. #125
    Sencha User
    Join Date
    Nov 2013
    Location
    Ottawa, ON
    Posts
    4
    Vote Rating
    0
    brunp is on a distinguished road

      0  

    Default


    I am using Sencha Architect and not sure where to add the plugin. I am trying to auto-size a calendar pro module inside my container, which itself is inside a tab panel. The creation of the calendar module requires a fixed width/height to display properly, but I want it to auto-size to the parent's view port setting.

    Any idea's?

    Paul

  6. #126
    Sencha Premium Member
    Join Date
    Jul 2014
    Posts
    2
    Vote Rating
    0
    jeffrey.bolleboom is on a distinguished road

      0  

    Default meaning of condition "if (c.doLayout)"

    meaning of condition "if (c.doLayout)"


    Hi!
    I'm starting to work with ExtJS in a mixed technology application. Some of ExtJS controls are embedded in ASP.NET MVC infrastructure (not really matters as we can treat it as putting ExtJS control into a plain html container).
    The html container has percentage/flex sizes and I would like to force the control to fill the whole container. This is what the plugin is about but is for quite old version. I did a port to ExtJS5 but there is one part of the original code which purpose I do not understand. Could anyone tell me what is the meaning of the following condition and the code inside?
    Code:
    if (c.doLayout) {
        c.monitorResize = true;
        c.doLayout = c.doLayout.createInterceptor(this.fitSize, this);
    }
    Is that some kind of a way to detect if a component uses layout or is placed in a container which uses one?
    Is this needed and if so in what scenario in more recent ExtJS versions (4.2 and 5)? According to the documentation there is no monitorResize property and doLayout is deprecated in favor of updateLayout.

    Maybe this plugin is not even required now but didn't found native way to do this (but that's a question for other forum)...