PDA

View Full Version : Window with 3 columns and form layout



[Daniel]
7 Aug 2010, 7:42 AM
Hi there,

let me give you a picture first:

21833

I'm trying to create a window which contains a form. The form is splitted into three columns, two in the first row and one in the second.

The two columns above shall have a width of 50% each and a specified height.

The third column shall have a variable height so that it adapts to the resized window.

Well, my idea was the following:


var operationCreateWindow = new Ext.Window({
title: 'Einsatzerstellung / Anrufannahme',
width: 700,
height: 600,
layout: 'fit',
items: [{
layout: 'form',
items: [{
layout: 'table',
layoutConfig: { columns: 2 },
items: [{
layout: 'fit',
html: 'test'
},{
layout: 'fit',
html: 'grid'
},{
layout: 'fit',
colspan: 2,
html: 'unteres Feld :-)'
}]
}]
}],
buttons: [{
text: 'Einsatz speichern & Alarmierung'
}],
listeners: {
beforeclose: function() {
// Just hide the window
this.hide();
return false;
}
}
});One window, one form and one table layout panel with three columns. Sounds easy, but it doesn't strech to the window's size. A screenshot:

21834

Which is the best (or at least a possible..) way to implement this?

Thanks in advance :)

Animal
7 Aug 2010, 9:28 AM
Simpler



new Ext.Window({
title: 'Einsomething..',
height: 600,
width: 700,
layout: {
type: 'vbox',
padding: 5,
align: 'stretch'
},
items: [{
xtype: 'container',
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
title: 'Form',
margins: '0 2 5 0',
flex: 1
}, {
title: 'Grid',
margins: '0 0 5 3',
flex: 1
}]
}, {
title: 'Other stuff',
flex: 1
}]
}).show()

[Daniel]
7 Aug 2010, 9:31 AM
Hi,

thank you!
My second (or third? can't remember..) try was quite similar, but did not really work that well :)

lucia_mgv
5 Nov 2010, 1:58 AM
Hi,

I have a similar problem. I want a table with 3 width fixed columns and a 4th one which fit with the size of the viewport. Which layout should I implement??

Condor
5 Nov 2010, 2:01 AM
hbox and column can both do that.

lucia_mgv
5 Nov 2010, 2:14 AM
Yes, but my problem is that I want the 4th column to have some fixed width elements, and I want the viewport to scroll when the browser's width is less than the fixed width elements. As i know the hbox and column layout can't scroll.

I also tried with an extra 'anchor' container, who contains the hbox layout container, and scrolls the viewport, but it was necessary to set a minWidth to the hbox container, and I don't want to do that.

I tried with the table layout, and it supports scrolling when the container's width is less than fixed columns and fixed elements inside columns, but i don't know if i could setWidth 100% or someting like that...

Condor
5 Nov 2010, 3:02 AM
No, hbox can't scroll, so you have to nest the hbox container inside another container that does support scrolling.