PDA

View Full Version : How panel have min width?



Silvaria
14 Jul 2009, 11:52 PM
I want panel that have minimal width for display all content but I don't want to fix panel width. It look funny.


var panel = new Ext.TabPanel({
activeTab: 0,
items: [{
xtype: 'panel',
title: 'tab 1',
border: true,
autoScroll: true,
items: [{
xtype: 'panel',
title: 'sub 1',
width: 700,
height: 400,
collapsible: true,
}, {
xtype: 'panel',
title: 'sub 2',
width: 700,
height: 300,
collapsible: true,
}],
}, {
xtype: 'panel',
title: 'tab 2',
border: true,
items: [{
xtype: 'label',
text: 'Hello',
}],
}]
});

new Ext.Viewport({
renderTo : Ext.getBody(),
items: [panel],
layout: 'fit',
});

If viewport width > 700, I want my sub panel have width > 700 too. How should I do?

Animal
15 Jul 2009, 12:16 AM
Use the layout config for the purpose for which it was designed?

Silvaria
15 Jul 2009, 2:31 AM
Sorry for bad example and question. OK. I have panel that need width 803px to display all content. They are sub1 and sub2 in tab1. My problem is when resize browser smaller than 803px in width. I want them show vertical scroll bar. So I add width for them to 803 and they show vertical scrollbar for me. But when browser is fullscreen (1024*768 for me). I want them show with fully width(1022px).


var panel = new Ext.TabPanel({
activeTab: 0,
items: [{
xtype: 'panel',
title: 'tab 1',
//layout: 'accordion',
border: true,
autoScroll: true,
items: [{
xtype: 'panel',
title: 'sub 1',
layout: 'absolute',
width: 803,
height: 400,
collapsible: true,
items: [{
xtype: 'textfield',
x:2, y: 2,
value: 'Start'
}, {
xtype: 'textfield',
x:700, y: 2, width: 100,
value: 'End X'
}, {
xtype: 'textfield',
x:700, y: 350, width: 100,
value: 'End XY'
}],
}, {
xtype: 'panel',
title: 'sub 2',
layout: 'absolute',
width: 803,
height: 300,
collapsible: true,
items: [{
xtype: 'textfield',
x:2, y: 2,
value: 'Start'
}, {
xtype: 'textfield',
x:700, y: 2, width: 100,
value: 'End X'
}, {
xtype: 'textfield',
x:700, y: 250, width: 100,
value: 'End XY'
}],
}],
}, {
xtype: 'panel',
title: 'tab 2',
border: true,
items: [{
xtype: 'label',
text: 'Hello',
}],
}]
});

new Ext.Viewport({
renderTo : Ext.getBody(),
items: [panel],
layout: 'fit',
});


If I add some layout(such as accordion) in my code, It will shown width as I want for full screen browser. But When I resize browser to small size(width < 800), Some component is missing with no vertical scrollbar.

But If I add width: 803 for my sub panel and use default layout, I will shown my sub panel and space for full screen browser. but When I resize browser to small size(width < 800), vertical scrollbar appear.

I want them all (default layout with full inner width when > 800 and show vertical scrollbar when inner width < 800).

Animal
15 Jul 2009, 2:37 AM
Right.

So 'absolute' might not be such a good idea.

Which one might be more suited to your requirements? (I don't know what your requirements are, so I can't tell you!)

Silvaria
15 Jul 2009, 4:23 AM
var A = new Ext.Panel({
title: 'Test',
width: 803,
height: 376,
});

new Ext.Viewport({
renderTo : Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'panel',
autoScroll: true,
items: [A]
}],
});
I have
1. panel A with minimum width = 803
2. viewport that contain panel A

I want
1. panel A to show full (width) of viewport. No scrollbar. Ex. If viewport have width 1000. panel A should display like it have width 1000. (Title of panel A display full viewport)
2. panel A show scrollbar (left<->right) when viewport have width < 803 (viewport smaller than panel A).

If I set width = 803 for panel A and viewport have width 1000, panel A display only 803 because of width = 803. But When viewport have width 500, panel A display 803 with scrollbar.

If I don't set width for panel A and viewport have width 1000, panel A display 1000. But When viewport have width 500, panel A display only 500 with no scrollbar and some content in panel A is missing.

Are you understand me?

Animal
15 Jul 2009, 4:26 AM
No.

The little snippet above uses no layout for the Viewport. It's not useful.

What do you reall really want?

You have that TabPanel, and in oen of the tabs you have two Panels.

How do you want those two layed out? That is what you have to ask, and then choose the layout which will do it.

So. How do you want those two Panels to be layed out?

Silvaria
15 Jul 2009, 9:34 PM
I want

1. When the browser is full screen (1024 x 768). It must look like (picture 3)
http://extjs.com/forum/attachment.php?attachmentid=15037&stc=1&d=1247721250

Note: field 'End X' is at x-position = 700px and width = 100px (and I want it at that position).

2. If the browser is minimized to size about (600 x 600). It must look like (picture 4)
http://extjs.com/forum/attachment.php?attachmentid=15038&stc=1&d=1247721657

Note: You will see horizontal scrollbar at the bottom and panel size is reduced to 800px. That field is at the same position with above.

So I try with

1. No width config in panel, the result is following pictures (in full and minimize like above)

http://extjs.com/forum/attachment.php?attachmentid=15032&stc=1&d=1247721657(picture 1)

http://extjs.com/forum/attachment.php?attachmentid=15033&stc=1&d=1247721657(picture 2)

Note: You will see case full screen show output that I want, but case minimized screen is not (there is no scrollbar and missing field).

Ps: I resize all picture 50%.

Silvaria
15 Jul 2009, 9:40 PM
2. Another case I set panel width = 1022px and result is following pictures (in full and minimize like above)

http://extjs.com/forum/attachment.php?attachmentid=15039&stc=1&d=1247722452(picture 1)
http://extjs.com/forum/attachment.php?attachmentid=15040&stc=1&d=1247722452(picture 2)

Note: You will see full screen show output that I want, but case minimized screen is not (there is space left behind field).

3. If I set panel width = 803px and result is following pictures (in full and minimize like above)
http://extjs.com/forum/attachment.php?attachmentid=15041&stc=1&d=1247722452(picture 3)

http://extjs.com/forum/attachment.php?attachmentid=15042&stc=1&d=1247722452(picture 4)

Note: You will see minimized screen show output that I want, but full screen is not (there is the space left behind panel).

Are you understand more?

aYepiz
9 Sep 2009, 5:39 PM
I have the same problem,

The problematic is easy to understain.

How can you set something like a minimum width (same for the height) to a panel so when the viewport is smaller than that minimum the browser can display an horizontal scrollbar?

As Silvaria said, if you have a lot of controls and if you decrease the width of the browser the controls will be truncated and you can't see them.

Animal
9 Sep 2009, 9:33 PM
http://www.extjs.com/forum/showthread.php?p=163215#post163215