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


    The content div might be height:100%, but that doesn't work correctly in some browsers.

    You should make both the HTML and BODY tags height:100% and use the body for the FitToParent 'parent' config option (optionally specify offsets to leave room for a footer).

  2. #102
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    102
    Vote Rating
    0
    scaddenp is on a distinguished road

      0  

    Default


    I'm beginner at this and it is not working as I expect. I have markup of:
    Code:
    <body style="height:100%">
    
    <div id="hdr" style="position:relative;; z-index:2;">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="127">
        <tr>
          <td width="91%"  height="100" background="images/HEADER.gif" background-repeat="no-repeat"><p class="pageName" align="center"> <font color="#ffffff">My Title,  New Zealand</font></p></td>
          <td height="100" width="9%"><div align="center"> <img src="images/GNS_new.gif" width="60" height="100" align="center" /></div></td>
        </tr>
      </table>
    </div>
    <div id= "AllContents" style=" width:100%; height:100%">
            <div id= "MapFrame" frameborder="no" scrolling="no" style="overflow:hidden; width:100%; height:100%">
            </div>
    </div></body>
    and within a included js have:
    Code:
         mapPanel = new GeoExt.MapPanel({
            title: "GeoExt MapPanel",
            renderTo: "MapFrame",
            stateId: "MapFrame",
            map: map,
            autoHeight:true,
            bodyBorder:false,
            border:false,
            header:false,
            zoom:5,
            collapsible: false,
            plugins: ['fittoparent'],
            tbar: mapTBar
            // getState and applyState are overloaded so panel size
            // can be stored and restored
        });
    Now what I had hoped is that the mapframe div would be expanded to fill viewport and that fittoparent will fit mapPanel into it. If I specify a height for mapPanel, all is well. However, without a height, the clientHeight returned by getViewSize is just the height of tbar.

    Have I can an issue with fittoparent, or with my html? Thanks.

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


    Not only the <body>, but also the <html> needs to be height:100%.

    But you're probably better off using an Ext.Viewport anyway.

  4. #104
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    102
    Vote Rating
    0
    scaddenp is on a distinguished road

      0  

    Default


    Interesting. If I make that change, then viewport size increases but the setsize seems to be ignored. If I remove autoHeight:true from the panel, then wow, suddenly its there. However, the size is wrong. The parent div (mapFrame) appears to be set to the same size as the whole viewport, pos and offsets are zero. I wondered if this was due to position relative but removing position attributes makes no difference. The size of the divs earlier in the flow is being ignored.

    I am reluctant to use Ext.Viewport. I am trying to make a js to include into many pieces of existing marking. I would prefer the js requires no knowledge of the markup it is being embedded into aside the name of div to use. As far as I can see from examples, using Ext.viewport would require me to boxcomponent the divs in the existing markup.

  5. #105
    Sencha User
    Join Date
    Oct 2009
    Posts
    39
    Vote Rating
    0
    mvbaffa is on a distinguished road

      0  

    Default


    Hi,

    I have a Viewport and in the central panel two DIVS and I would like to use your plugin. With so many replies I am lost.

    Condor, would you please reply with the last version of the plugin. I am working with 3.3 version.

    Thanks in advance.

  6. #106
    Sencha User
    Join Date
    Jan 2008
    Posts
    4
    Vote Rating
    0
    motofix is on a distinguished road

      0  

    Default Changes to original post to make it work in my case

    Changes to original post to make it work in my case


    I'm definitivaly not a javascript nor ExtJS expert, but I think it may be usefull to share the modification I made to the plugin in order to make it work in my case, and using ExtJS 3.2.1

    I'm generating a grid in an existing div using the 'applyTo' attribute. The issue I got with the plugin is the parent node width calculation, mainly with InternetExplorer, (<troll>this crappy browser ;-p</troll>). It was always for too large width, and resizing-down never worked.

    Therefore, I modified the plugin to get the width of the parent at init time. I also take the size of the body as upper limit. Of course the following code can be simplified.
    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;
            this.maxWidth = Ext.get(document.body).getWidth(true)-12;
            this.originalSize = Ext.get(c.initialConfig.applyTo).getWidth(true);
            c.on('render', function(c) {
                this.parent = Ext.get(this.parent || c.getPositionEl().dom.parentNode.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 ?  Math.min(this.maxWidth, Math.min(this.originalSize, size.width)) - pos[0] - this.offsets[0] : undefined,
                this.fitHeight ? size.height - pos[1] - this.offsets[1] : undefined);
        }
    });
    Ext.preg('fittoparent', Ext.ux.FitToParent);
    Motofix - "La route est longue, mais la voie est libre"
    http://www.jujunie.com

  7. #107
    Sencha User
    Join Date
    May 2011
    Posts
    2
    Vote Rating
    0
    erdeisz is on a distinguished road

      0  

    Default Ext 4?

    Ext 4?


    What about Ext JS 4?
    FitToParent doesn't work for me with Ext JS 4.

  8. #108
    Sencha User justusvm's Avatar
    Join Date
    May 2010
    Location
    Chennai, TN
    Posts
    10
    Vote Rating
    0
    justusvm is on a distinguished road

      0  

    Default


    Please post the same thing using extjs 4.0

  9. #109
    Sencha User
    Join Date
    Sep 2008
    Posts
    107
    Vote Rating
    0
    foxmarco is on a distinguished road

      0  

    Default


    Quote Originally Posted by justusvm View Post
    Please post the same thing using extjs 4.0
    i also need the same thing!!! plz post solution for ext4

  10. #110
    Sencha User
    Join Date
    Jan 2011
    Location
    Rotterdam
    Posts
    25
    Vote Rating
    -1
    wawrek is an unknown quantity at this point

      0  

    Default ext4 grid

    ext4 grid


    yes , it would be great to have the same plugin for ext4