PDA

View Full Version : Extjs - Browser window resizing, no scroll bar



corneadoug
7 Oct 2012, 9:58 PM
Hi,

I am trying to make something I consider really simple and that can be represented like that in HTML:

<body style="margin: 0 auto;padding: 0;">
<div id="content" style="width: 900px;height: 450px;margin: auto;padding: 0;background-color:blue;">
</div>
</body>

I want to make a fixed size container, and after doing it and centering it with css, I realized that once the browser window size is smaller that the container, no scroll bars appear....

My code:

Ext.application({
requires: ['Ext.container.Viewport'],
name: 'ScrollMe',


appFolder: 'app',

controllers: [
'Main'
],


launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
xtype: 'mainview'
}
],
style: 'background-color: blue;'
});
}
});

and


Ext.define('ScrollMe.view.main.MainView', {
extend: 'Ext.container.Container',
alias: 'widget.mainview',

layout: {
type: 'vbox'
},
width: 1024,
height: 768,
style: 'background-color:red;margin:0 auto;'
});


Or even more simplified:

Ext.require('Ext.container.Viewport');
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
xtype : 'container',
layout: {
type: 'vbox'
},
width: 600,
height: 200,
style: 'background-color:blue;'
}
]
});
}
});

I tried adding some autoScroll: true or minWidth, minHeight but didn't work...
Somebody know how to do something like that?

Thanks

vietits
8 Oct 2012, 12:03 AM
Try this:


Ext.onReady(function(){
Ext.getBody().setStyle('overflow', 'auto');
Ext.create('Ext.container.Viewport', {
items: [{
xtype : 'container',
layout: {
type: 'vbox'
},
width: 600,
height: 200,
style: 'background-color:blue;'
}]
});
});

corneadoug
8 Oct 2012, 12:33 AM
Wow, awesome!
Too bad Viewport doesn't support autoScroll: true, which is supposed to do exactly the same.

haiml
28 Nov 2012, 4:40 AM
Hi,
What if I want to have minimum width for the box?

Now the box has width of 600, but what if for example I want the box to have width of 100% of the page, but if the page's width is less than 600 then I'll have the scroll bar. Is that possible?

corneadoug
28 Nov 2012, 11:54 PM
Well, that's exactly the same, you just need a good layout, this is what I have (working exactly like the one you want):

content = Ext.create('Ext.container.Container', {
region : 'center',
layout : 'fit',
items: [
xtype: 'container',
layout : {type : 'vbox', align : 'stretch'},
// autoScroll:true,
items: [ Whatever you want]
]
});

viewPort = Ext.create('Ext.container.Viewport', {
layout : 'border',
minWidth: 800,
minHeight: 600,
id: 'DaViewPort',
autoScroll: true,
items: [content]
});


Of course don't forget the 'overflow: auto' on the body

haiml
29 Nov 2012, 12:19 AM
Thanks a lot!!

haiml
29 Nov 2012, 12:29 AM
Just tried it, and if I try to shorten the width, I get both a vertical and an horizontal scroll bars for no reason (I should get only horizontal scroll bar).

Any suggestion on how to fix that?

Still thanks a lot, it's a big progress since I didn't want to use CSS to set the width&height.

deepakbellale
2 May 2013, 12:48 AM
where should i put this code?

Ext.getBody().setStyle('overflow', 'auto');

My code is:

Ext.define('MyApp.view.MasterPage', {
extend : 'Ext.container.Viewport',


layout : {
type : 'border'
},

initComponent : function() {
Ext.getBody().setStyle('overflow', 'auto');
var me = this;

Ext.applyIf(me, {
items : [{
xtype : 'panel',
region : 'west',
itemId : 'menuId',

width : 135,


Code is generated by Sencha Architect.

Please help I'm new to sencha.


My Requirement is when the resolution of the screen is reduces automatically scroll has to come.

corneadoug
2 May 2013, 12:54 AM
Haiml, Do you have code for me to try?

deepakbellale
2 May 2013, 1:30 AM
I have attached my whole code of front page.

please look into it.

Jay Ahuja
17 Dec 2013, 5:29 AM
Can u guys help me, i am following same step but it giving error item is not a function