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);
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);
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
Asking same question as Formarco.Any plans for having this in ext4?
Well, it's not that hardCode:/** * @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); } });![]()
Kim Schneider
Lead Developer
Server-Eye
Alte Koßmannschule
Koßmannstraße 7
66571 Eppelborn
Germany
Email: kim.schneider@server-eye.de
Homepage: www.server-eye.de
Do you know our revolution in network- and servermonitoring?
www.server-eye.de
Hi condor,
Is "Fit to Parent" plugin is available in Extjs 4 ?
Thanks,
RENGANATHAN M G
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.
line 65 of the FitToParent isCode: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'
My entry script looks like thisCode:c.doLayout = c.doLayout.createInterceptor(this.fitSize, this);
My index.html page looks like thisCode: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, }] }); } });
Code:<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>
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
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.