Fit to parent

[piyuaryan]

I have saved your plugin code as Js file And i have included into my .html File.

Im getting this error when i load page.

"Ext.preg is not a function"
for
Ext.preg('fittoparent', Ext.ux.FitToParent);

[foxmarco]

Anyone are planing a migration to extjs4?

[westvovik]

Generally that not on a topic subject, I will be as soon as I will complete the large-scale project on extjs 3 then it is necessary to pass to 4 version gradually to rewrite all units

[aggie]

Asking same question as Formarco.Any plans for having this in ext4?

[KimSchneider]

/** * @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.define('ux.FitToParent', {
    extend : 'Ext.AbstractPlugin',


    /**
     * @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};
        }


        this.callParent([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);
    }
});

Well, it's not that hard

[renganathan]

Hi condor,

Is "Fit to Parent" plugin is available in Extjs 4 ?

[jgmeredith]

I get the following error when using extjs 4.0.7 on line 65 of the FitToParent class. I am attempting to use the code from post #115. If someone has a working example of this plugin for extjs 4 please share.

Uncaught TypeError: Object function () {
        var me = this,
            layout = me.getLayout();


        if (me.rendered && layout && !me.suspendLayout) {

            if (!me.isFixedWidth() || !me.isFixedHeight()) {

                if (me.componentLayout.layoutBusy !== true) {
                    me.doComponentLayout();
                    if (me.componentLayout.layoutCancelled === true) {
                        layout.layout();
                    }
                }
            }

            else {

                if (layout.layoutBusy !== true) {
                    layout.layout();
                }
            }
        }


        return me;
    } has no method 'createInterceptor'

line 65 of the FitToParent is

c.doLayout = c.doLayout.createInterceptor(this.fitSize, this);

My entry script looks like this

Ext.application({
    name: 'ABC',
    appFolder: 'app',


    requires: [
        'ABC.view.MainViewer',
        'ABC.view.SummaryViewer',
        'ABC.view.Menu',
        'ABC.ux.FitToParent',
    ],


      launch: function() {
           Ext.create('Ext.panel.Panel', {
            renderTo: 'content',
            layout:'border', 
            plugins: ['fittoparent'],
            items: [{
                region: 'north',
                xtype: 'menu'
            }, {
                region: 'center',
                xtype: 'mainviewer'
            }, {
                region: 'west',
                xtype: 'summaryviewer',
                width: 300,
            }]
        });
    }
});

My index.html page looks like this

<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="page-title"></title>
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <style>
    a {color: white;}
    .header {
        padding: 20px; background: black; color: white;
    }
    </style>
</head>
<body>
    <div id="header" class="header"><a href="/assets/ptr/index.html">Portal Navigation Bar Here</div>
    <div id="content"></div>
</body>
</html>

[vamsinarendera]

Hi jgmeredith,
I am aslo getting the same error , and could not find any solution to fix it.iif u found som,e solution could u please help me in fixing it.

Thank You,
Vamsi Narender

[enotha]

Hi

Im using fittoparent in extjs3.4. It works fine in firefox, but in IE8, when i resize the browser i get error

"Ext.fly(..)null or not an object."
It occurs at
if(!c.rendered){ c.render('x-form-el-' + c.id);
}else if(!this.isValidParent(c, target)){
// if(Ext.get(c.id)!=null)//added by enotha to fit to browser on window resize
Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl());
}

this point where the Ext.get(c.id) is null. When i add the line if(Ext.get(c.id)!=null) it works perfectly in IE.but it is not good to add condition in ext-all-debug. how can i solve it?

var panel = new Ext.Panel({
autoScroll:true,
autoHeight:true,
id:'detailPanel',
header:false,
defaults: {
collapsible: false
},
plugins: [new Ext.ux.FitToParent("detailDiv")]
});


panel.add({
layout: 'column',
border:false,
items: [{
columnWidth: .19,
items:[grid]
},
{ columnWidth: .81 ,
items:loadCenterDetails("Planning")}
]
});

panel.render('detailDiv');

and in jsp <div id="detailDiv" style="width:100%;height:100%;overflow: hidden;">
</div>

thanks.

[viran]

Good job Condor, Thanks!