PDA

View Full Version : Help with viewports



lucia_mgv
20 Oct 2010, 7:45 AM
Hi!

Does anybody know where can I find information about viewports and some examples??? I want to layout an app with a viewport because i want my content to fix with the document.body, but if my contents have a fixed width i want the viewpanel to scroll.

I have checked and i haven't found any mention in the doc. if you could redirect me to any doc explaining that i will apreciate.

Thanks for your help!

Condor
20 Oct 2010, 7:50 AM
Are you planning on using a layout inside the viewport (e.g. border)?

lucia_mgv
20 Oct 2010, 1:24 PM
Yes, i would like to use a column layout, because i want to render some components in columns. some of them will have a fixed width an others will have a percent with the columnWidth property.

steffenk
20 Oct 2010, 1:28 PM
column layout is outdated. use the more flexible hbox layout (or vbox for the other direction)
http://dev.sencha.com/deploy/dev/examples/layout/hbox.html

Condor
20 Oct 2010, 5:32 PM
No, hbox layout is not a replacement for column layout. They each have their own uses.

Do you want a scrollbar on all columns together (column) or on each column separaately (hbox)?

lucia_mgv
20 Oct 2010, 10:36 PM
In al collumns together. I want the scrollbar in the viewport container

Condor
20 Oct 2010, 10:58 PM
A Viewport can't scroll, so you need an extra container, e.g.

new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'container',
autoScroll: true,
layout: 'column',
layoutConfig: {
scrollOffset: Ext.getScrollBarWidth()
},
defaultType: 'box',
defaults: {
autoHeight: true
},
items: [{
width: 100,
el: 'left-content'
},{
columnWidth: 1,
el: 'center-content'
},{
width: 100,
el: 'right-content'
}]
}
});

lucia_mgv
20 Oct 2010, 11:16 PM
:) Thanks condor, that's what I want.

But now I have another question. When I minimize the browser window, the columns move and they become in rows instead of columns... i want the panel to scroll horizontally instead of doing that...

Thank you very much with your help!

steffenk
21 Oct 2010, 12:10 AM
btw - nice to see the person now behind one of the biggest supporter of this forum :)

Condor
21 Oct 2010, 12:22 AM
But now I have another question. When I minimize the browser window, the columns move and they become in rows instead of columns... i want the panel to scroll horizontally instead of doing that...

That is something a ColumnLayout can't do. You would need an extra container with a minBoxWidth for that.

lucia_mgv
21 Oct 2010, 7:33 AM
I have been trying with the extra container and the minBoxWidth but the results are not the expected...maybe i shouldn't use the column layout, but i need it for the content of the app...

This is my sketch of the layout of the app. In the first screen the content fixes with the browser window. I have 3 fixed width panel in the left, and another panel with columnWidth=1 in the right. Each panel has 4 fields with different alignments. So far everything is allright.

22962

My problem comes when I minimize the browser until the items of the panel 4 (the one with no fixed with) can't be rendered in the space left in the browser. I want here to appear a scrollbar, but i don't know how....

22963

If I continue minimizing the borwser, the problem is worst since the columns move and goes to the bottom of the browser.... here I would like to have all the columns in the same row with fixed widths, and the scrollbar.

22964

Can you help me please??? i get totally stuck with this....

here is my code, maybe can help you to undertand...



function start()
{

// mirar si anchor o vbox dependiendo de anchor y align
var panel1 = new Ext.Container(
{
style:'margin-right:20px;',
id:'panel1',
//columnWidth:.25,
width:200,
defaults:{
style:'margin-bottom:30px;'
},
height:500,
layout: 'form',
items : [{
xtype : 'field',
hideLabel:true,
anchor:'100%'
},{
xtype : 'field',
hideLabel:true,
width:150
},{
xtype : 'field',
hideLabel:true,
width:150 ,
id:'field1',
listeners: {
render:function(){
var wPanel=panel1.getWidth();
var wField =150;
var dis = ((wPanel-wField)/2);
var posX = this.el.getX();
this.el.setX(posX+dis);
}
}
},
{
xtype:'form',
border:false,
items:[{
xtype : 'field',
hideLabel:true,
width:150 ,
style:'float:right;'
}]
}]
});



var panel2 = new Ext.Container({
style:'margin-right:20px;',
id:'panel2',
//columnWidth:.25,
width:200,
defaults:{
style:'margin-bottom:30px;'
},
height:500,
layout: 'form',
items : [{
xtype : 'field',
hideLabel:true,
anchor:'100%'
},{
xtype : 'field',
hideLabel:true,
width:150
},{
xtype : 'field',
hideLabel:true,
width:150 ,
id:'field2',
listeners: {
render:function(){
var wPanel=panel2.getWidth();
var wField =150;
var dis = ((wPanel-wField)/2);
var posX = this.el.getX();
this.el.setX(posX+dis);
}
}
},
{
xtype:'form',
border:false,
items:[{
xtype : 'field',
hideLabel:true,
width:150 ,
style:'float:right;'
}]
}]
});



var panel3 = new Ext.Container(
{
style:'margin-right:20px;',
id:'panel3',
//columnWidth:.25,
width:200,
defaults:{
style:'margin-bottom:30px;'
},
height:500,
layout: 'form',
items : [{
xtype : 'field',
hideLabel:true,
anchor:'100%'
},{
xtype : 'field',
hideLabel:true,
width:150
},{
xtype : 'field',
hideLabel:true,
width:150 ,
id:'field3',
listeners: {
render:function(){
var wPanel=panel3.getWidth();
var wField =150;
var dis = ((wPanel-wField)/2);
var posX = this.el.getX();
this.el.setX(posX+dis);
}
}
},
{
xtype:'form',
border:false,
items:[{
xtype : 'field',
hideLabel:true,
width:150 ,
style:'float:right;'
}]
}]
});

// Cuando el panel es fijo no necesita realizar los resizes para los controles centrados, ya que al ser fijo no resiza nunca
// Si es necesario calcular la posicion del centro la primera vez que se renderiza el panel



var panel4 = new Ext.Container({
style:'margin-right:20px;',
id:'panel4',
columnWidth:1,
//width:200,
defaults:{
style:'margin-bottom:30px;'
},
height:500,
layout: 'form',
items : [{
xtype : 'field',
hideLabel:true,
anchor:'100%'
},{
xtype : 'field',
hideLabel:true,
width:150
},{
xtype : 'field',
hideLabel:true,
width:150 ,
id:'field4',
listeners: {
render:function(){
var wPanel=panel4.getWidth();
var wField =150;
var dis = ((wPanel-wField)/2);
var posX = this.el.getX();
this.el.setX(posX+dis);
}
}
},{
xtype:'form',
border:false,
items:[{
xtype : 'field',
hideLabel:true,
width:150 ,
style:'float:right;'
}]
}],
listeners: {
resize:function(){
if(Ext.get('field4'))
{
var f = Ext.get('field4');
var p = Ext.get('panel4');
var wPanel=panel4.getWidth();
var wField =150;
var dis = ((wPanel-wField)/2);
var posX = p.getX();
f.setX(posX+dis);
}
}
}
});


// Container:

new Ext.Viewport({
layout: 'fit',
id:'cont',
items: [{
style : 'padding:20px 20px 20px 20px;overflow:auto;',
xtype:'container',
boxMinWidth:300,
autoScroll: false,
items:[{
xtype: 'container',
layout: 'column',
defaults: {
autoHeight:true
},
items: [
panel1,panel2,panel3,panel4
]
}]
}]
});


}

Ext.onReady(start);

lucia_mgv
25 Oct 2010, 12:49 AM
Condor, you were right, finally with boxMinWidth it works!

here is the final implementation:


new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'container',
autoScroll: true,
layout:'border',
border:false,
items: [{
xtype:'container',
region:'center',
boxMinWidth: 700,
boxMinHeight: 500,
bodyStyle:'padding:5 5 5 5',
layout:'hbox',
defaults: {
margins:'10 10 10 10'
//autoHeight:true
},
items: [
panel1,panel2,panel3,panel4
]
}]
}
});


Thanks!

Condor
25 Oct 2010, 12:58 AM
But my solution has the problem that you get a both a horizontal and vertical scrollbar, even when only one of them was needed (because it doesn't compensate for the presence of the other scrollbar). Doesn't that bother you?

lucia_mgv
25 Oct 2010, 4:22 AM
with the 'fit' and 'border' layouts that's not happening. it only appears one bar and the content accomodates to that width.