PDA

View Full Version : Fit layout with no viewport.



ldadams
26 Mar 2012, 11:26 AM
I am having problems getting a fit layout working when rendering to a div rather then the viewport. I have seen a lot of talk about using the Fit To Parent plugin (http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent&highlight=fitToParent), but was hoping for a native way to do this. I can not seem to come up with any working combinations on configuration for this.

If this is not supported is there any plan to support 100% width and height when rendering into an existing standard html component.

Thanks

mankz
26 Mar 2012, 11:31 AM
What's your code?

ldadams
26 Mar 2012, 12:32 PM
In the process of putting together this sample I did discover a possible mistake. My "viewport" is layout: 'fit', my view rendered into the layout was vbox. When I changed my view(submitview) to fit, it did render my view 100%.

So this leads to a different question. How can I have an outer viewpoint that is 100% and allow for inner forms to use there own layouts such as vbox. Sorry for my ignorance as I am only a couple weeks into extjs.



#moduleContainer {
height:100%;
width:100%;
overflow: hidden;
}
<div id="moduleContainer"></div>

app.js

Ext.application({
name: 'myApp',
appFolder: 'modules/Orders/clientScripts/app',
controllers: ['MyController'],
autoCreateViewport: true
});


app/view/Viewport.js

Ext.define('myapp.view.Viewport', {
extend: 'Ext.panel.Panel',
renderTo: 'moduleContainer',
border: 0,
cls: 'x-reset',
layout: 'fit'
items: [{
xtype: 'submitview'
}],
});

I changed my viewport to have a sub panel with layout: 'fit' and rendered my view into it but not luck...


....
items: [{
xtype: 'panel',
layout: 'fit',
items: [{
xtype: 'ordersubmit'
}]
}]
....

app/view/.../myform.js


Ext.define('myApp.view.....Submit', {
extend: 'Ext.form.Panel',
bodyPadding: 10,
alias: 'widget.submitview',
border: false,
layout: {
type: 'vbox',
align: 'stretch'
},
....


Thanks!

Erikvip
26 Mar 2012, 3:23 PM
Border layout works really good with Viewport. Also, just FYI, you can't use renderTo on a viewport, it has no effect (Viewport always attaches to the body).



Ext.define('myapp.view.Viewport', {
//...
layout: 'border',
items: [{
xtype: 'submitview',
region: 'center'
}]
});

ldadams
26 Mar 2012, 5:14 PM
Border layout works really good with Viewport. Also, just FYI, you can't use renderTo on a viewport, it has no effect (Viewport always attaches to the body).



Ext.define('myapp.view.Viewport', {
//...
layout: 'border',
items: [{
xtype: 'submitview',
region: 'center'
}]
});


I am not extending viewport. I am extending panel. I am using Viewport to follow the mvc pattern... I realize this is not necessary but I want to be consistent.

Erikvip
26 Mar 2012, 8:01 PM
Oh sorry I misread. Height: 100% isn't going to do what you think though, that won't stretch the moduleContainer to fill the viewport. You'd still need to set a pixel height.

And I couldn't get this to work without giving the panel a height either. But you can set the height at runtime...

So maybe something like:


#moduleContainer {
height:700px;
}


Then when you create the panel:


{
xtype:'panel',
renderTo:'moduleContainer',
height: Ext.get('moduleContainer').getViewSize().height,
layout:'fit',
items:[...]


Or if you want the whole screen, you'd use: Ext.getBody().getViewSize().height ... but you'd need to listen for resize events (and that's what viewport is for...)

...seems like this should get the height from moduleContainer's CSS on it's own, but doesn't seem to work like that. I'm not sure why.