PDA

View Full Version : [2.0b1] FormPanel inside Tab not shown (Firefox)



vivid-planet
25 Oct 2007, 12:28 AM
If you put a FormPanel inside the first Tab of a TabPanel it doesn't appear in Firefox 2.0.0.8. If you put the FormPanel into the second Tab everything works fine. Also tried in IE6 - this Browser can display both possibilities.

Ext Version: 2.0 Beta 1
Op-System: Kubuntu 7.04 but also tried on Mac and Windows with the same effect.
Bug-Example-Url: http://www.vivid-planet.com/test/ext/examples/bugs/tabs-forms.html



Ext.onReady(function(){
new Ext.TabPanel({
renderTo: document.body,
activeTab: 0,
width:600,
height:250,
items:[
{
layout:'form',
title: 'Simple Form',

items: [{
xtype: 'textfield',
fieldLabel: 'First Name'
}]
}
]
})
});

tibi
25 Oct 2007, 9:52 AM
I had the same problem. The content shows up though after resizing the browser window.
My guess would be that the 'overflow' event is not handled correctly. Anyway, as a workaround calling <TabPanelObject>.doLayout(); should fix it.

tryanDLS
25 Oct 2007, 11:31 AM
Did you try adding deferredRender:false to the TabPanel?

vivid-planet
26 Oct 2007, 12:43 AM
Anyway, as a workaround calling <TabPanelObject>.doLayout(); should fix it.
that works - thanks


Did you try adding deferredRender:false to the TabPanel?
yes - but the problem is that the visible tab (which is rendered regardless of dererredRender) isn't shown correctly.

MaxT
26 Oct 2007, 3:25 AM
Ext 2.0b1, Fx2.0.0.7

I have a situation that may or may not be related but also involves faulty rendering of forms inside tab panels. So I'm posting the info here in case it is any help in finding the problem

I have a Window containing a tabPanel with two tabs.
Tab1 contains formPanel1, Tab2 contains formPanel2.
I have deferredRender:false.

Either form renders correctly if you set it as the active panel. But the other form on the inactive panel gets messed up. The widths of the fields are being set wrongly and horizontal scroll bars show on each field.

Resizing the Window, or calling formPanel.doLayout() doesn't correct the faulty panel.

Refer to images.

Max

vivid-planet
26 Oct 2007, 6:21 AM
Ext 2.0b1, Fx2.0.0.7
I have a situation that may or may not be related but also involves faulty rendering of forms inside tab panels. So I'm posting the info here in case it is any help in finding the problem

This is maby related with this:
http://extjs.com/forum/showthread.php?t=15354
In your case the combobox has 70px width, in my case only the drop-down-view.

possible workaround: disable deferredRender for the TabPanel

MaxT
26 Oct 2007, 7:42 AM
Yes, it could be related to the other bug you gave a link to.

If I switch deferredRender to true the second initially inactive tab doesn't show anything when you click on it.

If I activate the second tab, execute doLayout() on it, then show the window, it renders fine in Firefox. So this would be a workaround until the bugs are fixed.

Unfortunately, this particular layout doesn't work in IE, so other issues to fix as well.

jsakalos
28 Oct 2007, 3:20 PM
It seems to be relate to this issue: http://extjs.com/forum/showthread.php?t=16180. We will take a look at it.

brian.moeskau
22 Feb 2008, 10:10 PM
Going back through some old layout posts.

@vivid-planet: the reason you need deferredRender:false is because the tab contains a nested layout. For static tab content, it would not be required -- for example, if your first tab just had html:'Foo' instead if a nested panel, it would display fine. For inner layouts, you either need deferredRender:false, or you can manually force it by calling tab1.doLayout() after rendering.

@MaxT: sounds like maybe layoutOnTabChange:true might fix the layout issue. Not sure about the field widths and such, but if there is still an issue that needs to be looked at, please post a test case of working code.

MaxT
25 Feb 2008, 1:06 AM
Hi Brian.

I found out that what I was doing wrong was having hideMode not set. Hence it was using the default value of "display" meaning it could't calculate the widths correctly.

I currently have:
deferredRender:false,
defaults: {hideMode: "offsets"},

I think I tried layoutOnTabChange but don't really like having the tab rendering when clicked.

My current version still doesn't quite work correctly because the initially hidden tab doesn't show anything when it is first clicked click with IE6/7. It subsequently shows ok when you click another tab and then try again for a second time. My current solution is to activate each of the tabs before showing the window, but this shouldn't really be necessary. Not sure if anyone has reported this as a separate bug.

At some point I will try again and reduce it down to a simpler test case.

Max

kairinsama
25 Feb 2008, 8:55 AM
I added the following to the Tab Panel defaults and all the tabs render fine for me regardless of AJAX/Nested/Static.



defaults: {
listeners: { 'activate': function(tab) { tab.doLayout(); } }
}

brian.moeskau
25 Feb 2008, 9:16 AM
Hi Max,

If you can post some code we'll take a loot at it for you.

MaxT
26 Feb 2008, 4:28 AM
Brian, here is a simple test case that shows an issue. It may be too simple because it doesn't show exactly the same bug as my full code which has a second level of panel nesting, but it may be the root of the actual problem.

In this test case the initially hidden panel doesn't show in IE6 and 7. Shows ok in Fx2 and Opera 9. (In my full code the initially hidden panel is displayed when you look at the tab for the second time.)

Tested with Ext 2.0.2, Ext adapter in an html document with HTML 4.01 Transitional DTD.


Thanks,

Max




/**
Tab layout test.

Works in Fx2.
Unactivated tab doesn't show in IE7/6.
*/
Ext.onReady(function() {

var field1 = new Ext.form.TextField({
fieldLabel: "field 1",
name: "field1"
});

var field2 = new Ext.form.TextField({
fieldLabel: "field 2",
name: "field2"
});

var panel1 = new Ext.form.FormPanel({
id: "panel1id",
title: "Panel 1 title",
autoWidth: true,
items: field1
});

var panel2 = new Ext.form.FormPanel({
id: "panel2id",
title: "Panel 2 title",
autoWidth: true,
items: field2
});

var win = new Ext.Window(
{
title: "Window title",
width:316,
autoHeight: true,
modal: true,
shadow: false,
resizable: true,
constrainHeader: true,
plain: true,
border: false,
items:
[
{
xtype: "tabpanel",
id: "maintabpanel",
deferredRender:false,
defaults: {hideMode: "offsets"},
items: [panel1, panel2]
}
]
}
);

win.render(Ext.getBody());

var tabs = Ext.ComponentMgr.get("maintabpanel");
tabs.activate("panel2id");

win.show();

});

MaxT
28 Feb 2008, 4:08 AM
I've spent way to much time on trying to figure out if I'm doing something wrong with the layout configs, or if it is a bug, so I'm going to stick with using one of the workarounds to the problem. I guess at some point I will completely rewrite the layout I'm using to improve the rendering speed, so I guess I might not have the problem then anyway.

Max

Condor
28 Feb 2008, 4:57 AM
The window itself is missing a layout. But if you add layout:'fit' the result is also wrong.

It does work with a fixed height, e.g.:


var win = new Ext.Window({
title: "Window title",
width:316,
height:80,
modal: true,
shadow: false,
resizable: true,
constrainHeader: true,
plain: true,
border: false,
layout:'fit',
items: [{
xtype: "tabpanel",
id: "maintabpanel",
deferredRender: false,
items: [panel1, panel2]
}]
});

MaxT
28 Feb 2008, 8:04 AM
That example worked, but you have missed out this crucial line:

defaults: {hideMode: "offsets"},

Without this my full example doesn't work because the dimensions of the form elements can't be calculated when hideMode is left at the default of display:none.

Why doesn't the example work with hideMode: "offsets"?



BTW. The docs for Window say this:

"If not specified, a default Ext.layout.ContainerLayout will be created and used."

If this is wrong and a layout must be specified the Docs need updating.

I need layout type "auto" for my full layout, not "fit". I assume "auto" is allowed although it doesnt appear to be listed in the docs.


Thanks,

Max

Condor
28 Feb 2008, 8:16 AM
"auto" the the name under which Ext.layout.ContainerLayout is registered.

ContainerLayout isn't very useful because it does no sizing at all.

MaxT
28 Feb 2008, 8:35 AM
I can't use layout: "fit" because I want to add two items to the Window items object in my full version, not just one as in the reduced example.

Max

brian.moeskau
28 Feb 2008, 9:20 AM
Does this work for you?


var win = new Ext.Window(
{
title: "Window title",
width:316,
autoHeight: true,
modal: true,
shadow: false,
resizable: true,
constrainHeader: true,
plain: true,
border: false,
items:
[
{
xtype: "tabpanel",
id: "maintabpanel",
deferredRender:false,
layoutOnTabChange: true,
//defaults: {hideMode: "offsets"},
items: [panel1, panel2]
}
]
}
);

MaxT
28 Feb 2008, 9:46 AM
It works in the test case example.

In my full example it doesn't, the widths of the form elements are wrong in both tabs.

Will try and have another look tomorrow.

Thanks for the help so far.

Max

MaxT
29 Feb 2008, 2:28 AM
Let's have one more go. Here's an even simpler test case. Tab 1 doesn't show in IE or Firefox.



Ext.onReady(function() {
var tabPanel = new Ext.TabPanel({
renderTo: Ext.getBody(),
height: 100,
items: [
new Ext.form.FormPanel({
id: "panel1id",
title: "Panel 1 title",
items: new Ext.form.TextField({
fieldLabel: "field 1",
name: "field1"
})
}),
new Ext.form.FormPanel({
id: "panel2id",
title: "Panel 2 title",
items: new Ext.form.TextField({
fieldLabel: "field 2",
name: "field2"
})
})
]
});
});

jsakalos
29 Feb 2008, 4:02 AM
What about this?



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';

Ext.onReady(function() {
Ext.QuickTips.init();
var tabPanel = new Ext.TabPanel({
renderTo: Ext.getBody(),
height: 100,
layoutOnTabChange:true,
defaultType:'panel',
defaults:{layout:'form'},
items: [{
id: "panel1id",
title: "Panel 1 title",
items: [{
xtype:'textfield',
fieldLabel: "field 1",
name: "field1"
}]
},{
id: "panel2id",
title: "Panel 2 title",
items:[{
xtype:'textfield',
fieldLabel: "field 2",
name: "field2"
}]
}]
});
});
</script>
<title id="title">Tabpanel Test</title>
</head>
<body>
</body>
</html>

Condor
29 Feb 2008, 4:06 AM
What about this?

No, that's not the same (no BasicForm).

But just adding layoutOnTabChange:true fixes the problem.

jsakalos
29 Feb 2008, 4:40 AM
You can change to defaultType:'form' in my example and you have forms there.

jsakalos
29 Feb 2008, 4:43 AM
I mean this:



Ext.onReady(function() {
Ext.QuickTips.init();
var tabPanel = new Ext.TabPanel({
renderTo: Ext.getBody(),
height: 100,
layoutOnTabChange:true,
defaultType:'form',
items: [{
id: "panel1id",
title: "Panel 1 title",
items: [{
xtype:'textfield',
fieldLabel: "field 1",
name: "field1"
}]
},{
id: "panel2id",
title: "Panel 2 title",
items:[{
xtype:'textfield',
fieldLabel: "field 2",
name: "field2"
}]
}]
});
});

MaxT
29 Feb 2008, 6:05 AM
Saki, your alternative code gives the same result as my version. i.e. The first tab is blank when the page loads. It only shows when you click on the second tab, then back on the first tab.

So I assume this has isolated a definitive test case for the bug?

Plenty of workarounds for the bug, as mentioned before.

Thanks,

Max

Condor
29 Feb 2008, 6:50 AM
Saki, your alternative code gives the same result as my version. i.e. The first tab is blank when the page loads. It only shows when you click on the second tab, then back on the first tab.

When the page first displays there is NO tab selected (you didn't specify activeTab:0).

Adding layoutOnTabChange:true is the only thing needed to fix the layout problem.

MaxT
29 Feb 2008, 9:17 AM
Sorry, that test case was a no-brainer, I had forgotten that the default was to show nothing.

Reworking my full original code and trying all the config options doesn't make any difference. I see that I had left out "activeTab" because it prevents IE from displaying it correctly, but didn't make a note in my code at the time.

With the suggestions you have made above my full config looks like the code below.
I don't have time at the moment to do any more testing on this, so if you can't see anything obvioulsy wrong with the code below I suggest we forget it for the minute and that you close this Bug report, assuming the original mentioned issue is resolved. If I manage to put together a proper test case I can open another bug report.

Thanks.

Max




var win = new Ext.Window(
{
title: title,
width:316,
height: 240,
layout: "auto",
modal: true,
shadow: false,
resizable: true,
constrainHeader: true,
plain: true,
border: false,
items:
[
{
xtype: "tabpanel",
id: tabsId,
plain: true,
layoutOnTabChange: true,
deferredRender:false,
activeTab: 1,
defaults: {hideMode: "offsets"},
items:
[
{
id: tabAbs,
title: "Date/time range",
items: absDate.panel
},
{
id: tabRel,
title: "Relative to today",
items: relDate.panel
}
]
}
,
{
layout: "form",
border: false,
cls: "t-filter-plain-panel",
style: "text-align: center",
items: disable
}
],
buttonAlign: "right",
buttons: [
{text: "Save and refresh", handler: apply},
{text: "Save", handler: save},
{text: "Cancel", handler: close}
]
}
);

win.render(Ext.getBody());

var tabs = Ext.ComponentMgr.get(tabsId);
/*
// Activate the selected tab.
// (BUG: Must activate the other tab as well otherwise it doesn't show on the first click in IE.)
if (filter.selected == "rel") {
tabs.activate(tabAbs); //Activate other tab first because of IE7/6 bug.
tabs.activate(tabRel);
} else {
tabs.activate(tabRel); //Activate other tab first because of IE7/6 bug.
tabs.activate(tabAbs);
}
*/
win.alignTo( target, "tl-br?" );
win.show();
};



In IE 7 this is what happens:

Test 1, code as above
When the window first shows the right tab is active but the content area is only 10px or so high.

Click on the left tab. It is displayed full height, but is empty.

Click back on right tab - still truncated.

Click back on left tab and the content shows ok.


Works ok in Fx2.

Test 2
If I comment out the activeTab config both tab panels show correctly on the second click.


Test 3
If I uncomment the Activate code at the bottom and comment out the activeTab config it works perfectly in IE as well as Firefox.

MaxT
3 Mar 2008, 1:53 AM
Saki, I have modified your code to add hideMode:'visibility'. My initial intuition was that my layout problem was a result of using 'offsets' and 'visibility' with hideMode as in my first example.

The code below doesn't work for me in IE 7 or Firefox. The tab that is not the first to be clicked is always blank.

I see that in other bug threads the issue of hideMode:'visibility' is also being discussed.

So, is hideMode:'visibility' a valid config in this situation or not?

hideMode:'offsets' as well as hideMode:'display' seem to work in this particular example.


Thanks,

Max






<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<link rel="stylesheet" type="text/css"
href="../ext/resources/css/ext-all.css">
<script type="text/javascript"
src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript"
src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';

Ext.onReady(function() {
var tabPanel = new Ext.TabPanel({
renderTo: Ext.getBody(),
height: 100,
layoutOnTabChange:true,
defaultType:'form',
defaults: {hideMode:'visibility'},
items: [{
id: "panel1id",
title: "Panel 1 title",
items: [{
xtype:'textfield',
fieldLabel: "field 1",
name: "field1"
}]
},{
id: "panel2id",
title: "Panel 2 title",
items:[{
xtype:'textfield',
fieldLabel: "field 2",
name: "field2"
}]
}]
});
});
</script>
<title id="title">Tabpanel Test</title>
</head>
<body>
</body>
</html>

Animal
3 Mar 2008, 2:11 AM
Try the following override for Ext.form.FormPanel.

It uses a <form> element as the actual body Element, rather than having the body as a <div>, and containing a <form>

This means that the <form> is managed, sized etc as the body, and is sized correctly.

This fixed some form rendering problems (like columnWidths in layout:'column' not being honoured), so perhaps it might have a bearing here:



Ext.FormPanel = Ext.extend(Ext.Panel, {
/**
* @cfg {String} formId (optional) The id of the FORM tag (defaults to an auto-generated id).
*/
/**
* @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
*/
/**
* @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
*/
/**
* @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
*/
buttonAlign:'center',

/**
* @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
*/
minButtonWidth:75,

/**
* @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
* This property cascades to child containers if not set.
*/
labelAlign:'left',

/**
* @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
* fires a looping event with that state. This is required to bind buttons to the valid
* state using the config value formBind:true on the button.
*/
monitorValid : false,

/**
* @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
*/
monitorPoll : 200,

/**
* @cfg {String} layout @hide
*/
layout: 'form',

// private
initComponent :function(){

this.form = this.createForm();
this.bodyCfg = {
tag: 'form',
cls: 'x-panel-body',
method : this.method || 'POST',
id : this.formId || Ext.id()
};
if(this.fileUpload) {
this.bodyCfg.enctype = 'multipart/form-data';
}

Ext.FormPanel.superclass.initComponent.call(this);

this.addEvents(
/**
* @event clientvalidation
* If the monitorValid config option is true, this event fires repetitively to notify of valid state
* @param {Ext.form.FormPanel} this
* @param {Boolean} valid true if the form has passed client-side validation
*/
'clientvalidation'
);

this.relayEvents(this.form, ['beforeaction', 'actionfailed', 'actioncomplete']);
},

// private
createForm: function(){
delete this.initialConfig.listeners;
return new Ext.form.BasicForm(null, this.initialConfig);
},

// private
initFields : function(){
var f = this.form;
var formPanel = this;
var fn = function(c){
if(c.doLayout && c != formPanel){
Ext.applyIf(c, {
labelAlign: c.ownerCt.labelAlign,
labelWidth: c.ownerCt.labelWidth,
itemCls: c.ownerCt.itemCls
});
if(c.items){
c.items.each(fn);
}
}else if(c.isFormField){
f.add(c);
}
}
this.items.each(fn);
},

// private
getLayoutTarget : function(){
return this.form.el;
},

/**
* Provides access to the {@link Ext.form.BasicForm Form} which this Panel contains.
* @return {Ext.form.BasicForm} The {@link Ext.form.BasicForm Form} which this Panel contains.
*/
getForm : function(){
return this.form;
},

// private
onRender : function(ct, position){
this.initFields();

Ext.FormPanel.superclass.onRender.call(this, ct, position);
this.form.initEl(this.body);
},

// private
beforeDestroy: function(){
Ext.FormPanel.superclass.beforeDestroy.call(this);
Ext.destroy(this.form);
},

// private
initEvents : function(){
Ext.FormPanel.superclass.initEvents.call(this);
this.items.on('remove', this.onRemove, this);
this.items.on('add', this.onAdd, this);
if(this.monitorValid){ // initialize after render
this.startMonitoring();
}
},

// private
onAdd : function(ct, c) {
if (c.isFormField) {
this.form.add(c);
}
},

// private
onRemove : function(c) {
if (c.isFormField) {
Ext.destroy(c.container.up('.x-form-item'));
this.form.remove(c);
}
},

/**
* Starts monitoring of the valid state of this form. Usually this is done by passing the config
* option "monitorValid"
*/
startMonitoring : function(){
if(!this.bound){
this.bound = true;
Ext.TaskMgr.start({
run : this.bindHandler,
interval : this.monitorPoll || 200,
scope: this
});
}
},

/**
* Stops monitoring of the valid state of this form
*/
stopMonitoring : function(){
this.bound = false;
},

/**
* This is a proxy for the underlying BasicForm's {@link Ext.form.BasicForm#load} call.
* @param {Object} options The options to pass to the action (see {@link Ext.form.BasicForm#doAction} for details)
*/
load : function(){
this.form.load.apply(this.form, arguments);
},

// private
onDisable : function(){
Ext.FormPanel.superclass.onDisable.call(this);
if(this.form){
this.form.items.each(function(){
this.disable();
});
}
},

// private
onEnable : function(){
Ext.FormPanel.superclass.onEnable.call(this);
if(this.form){
this.form.items.each(function(){
this.enable();
});
}
},

// private
bindHandler : function(){
if(!this.bound){
return false; // stops binding
}
var valid = true;
this.form.items.each(function(f){
if(!f.isValid(true)){
valid = false;
return false;
}
});
if(this.buttons){
for(var i = 0, len = this.buttons.length; i < len; i++){
var btn = this.buttons[i];
if(btn.formBind === true && btn.disabled === valid){
btn.setDisabled(!valid);
}
}
}
this.fireEvent('clientvalidation', this, valid);
}
});
Ext.reg('form', Ext.FormPanel);

Ext.form.FormPanel = Ext.FormPanel;

jsakalos
3 Mar 2008, 2:21 AM
I've tested it too and if you use hideMode:'visibility' then second panel is rendered, position of items inside of it is correct but the whole panel is positioned below the firstly clicked panel.

Visibility hide mode assumes that panel is in correct position and doesn't set its position so it is not suitable for this situation.

MaxT
3 Mar 2008, 2:58 AM
Thanks, I can see why that works now. Tab panels are not controlled by any sort of z-indexing, so using hideMode:'visibility'** won't work because all the tabs are still taking up space. Only the one at the very top will show in the available space for the tab panel.

I'll have to chew over why my full layout doesn't work because it uses hideMode:offsets, which should work at the tab panel level. Hence, probably some other issue further down the layout chain.

Max

jsakalos
3 Mar 2008, 3:01 AM
It can be...

What I'm doing in these cases is that I start simple, e.g. empty layout, then I add components one-by-one testing for each to find out when the problem is introduced. Once isolated, I can focus on fixing it.

MaxT
3 Mar 2008, 3:04 AM
Animal, thanks for the suggestion. I think your fix has a good chance of working because I am using columns to layout the forms in the TabPanel. I don't have time to test it immediately but I will do so in the next few days and let you know the result.

Max

MaxT
4 Mar 2008, 2:45 AM
First up, I tested your code Animal but it didn't make any difference. In my case the Form with column layouts didn't work when hideMode was "display". When I changed to hideMode:"offsets" this fixed the Form layout problems. I take it your solution was not designed to work correctly when hideMode is "display"?

Saki, I took your advice on this one and tried building up a test case rather than reducing down the non-working code which had resulted in an ambiguous test. I eventually came across a solution. I knew that IE would require a height in pixels somewhere to get the layout to work, but I have had to set the width as well as the height on the tab panels. Can anyone explain why the width is required in this case? I had already set a width for the containing window.

The test code below shows the correction. Without the width Tab1 doesn't show on the first click in IE7/6.

I'm glad I've got a solution now. It's taken me something like four days work over several months to get this layout working correctly.

Thanks,

Max




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';

/*
Ref: tablayout10.html

This is a test for the following conditions:

1. deferredRender: false
2. hideMode: 'offsets'
3. layout mode is the default, i.e. 'auto'.

The deferredRender and hideMode options are both required so that
complex Form layouts render correctly.

In IE7/6 Tab1 is blank when you first click it.
On subsequent clicks it shows ok.

Add a width to the TabPanels so that Tab1 shows on the first click.
*/
Ext.onReady(function() {

new Ext.Window(
{
title: "Tab test : hideMode:'offsets'",
width:320, height: 200,
renderTo: Ext.getBody(),
items:
[
{
xtype: "tabpanel",
deferredRender:false,
activeTab: 1,
layoutOnTabChange: true,
defaultType:'form',
defaults: {
hideMode: "offsets",
//width:240, //width is required otherwise Tab1 is blank on first click.
height: 100
},
items: [{
title: "Tab 1",
items: [{xtype:'textfield', fieldLabel: "field 1", name: "field1"}]
},{
title: "Tab 2",
items:[{xtype:'textfield', fieldLabel: "field 2", name: "field2"}]
}]
}
]
}
).show();

});

</script>
<title id="title">Tabpanel in Window Test</title>
</head>
<body>
</body>
</html>

Animal
4 Mar 2008, 3:28 AM
Not much laying out works when hide mode is 'display'. Everything has zero dimensions when in a display:none container.

Condor
4 Mar 2008, 3:33 AM
Your example is missing a layout in the window config, e.g.


new Ext.Window({
title:'Tab test',
width:320,
height:200,
layout:'fit',
items:[{
xtype:'tabpanel',
activeTab:1,
defaultType:'form',
items:[{
title:'Tab 1',
items:[{
xtype:'textfield',
fieldLabel:'field 1',
name:'field1'
}]
},{
title:'Tab 2',
items:[{
xtype:'textfield',
fieldLabel:'field 2',
name:'field2'
}]
}]
}]
}).show();

This doesn't need any kind of special treatment for tabpanel.

MaxT
4 Mar 2008, 4:59 AM
Condor, I don't understand your explanation. I left the layout config out because I want to use layout:'auto', which should be the default. I made this clear in the notes for the test. In my full version layout:'fit' is no good because I want to add more than one item to the Window. So you can get the test to work by changing the layout to 'fit' but this misses the point.

As far as I understand it I can use layout:'auto' since I have specified the dimensions of the window and the tab panels. The dimensions are fixed and no resizing is required. Why can't I use layout:'auto' to give me the ability of adding multiple items? My understanding is that you should be able to add multiple items, and provided the total height of all of them is less than the container then they will just stack vertically and all of them will display ok.

If this is not so, what layout type should be used. Absolute?

I seem to be missing something fundamental about how layout:'auto' works.

An additional point on the test. Dragging the window arround makes the blank tab appear.

Ideas?

Thanks,

Max

Condor
4 Mar 2008, 5:00 AM
layout:'auto' doesn't work in most cases. Can't you use layout:'anchor'?

Animal
4 Mar 2008, 5:16 AM
As long as the items you add size themselves then layout:'auto' is OK.

It just renders the items one after the other, and if they are block elements, they stack up.

MaxT
4 Mar 2008, 9:45 AM
Thanks Condor, I will use an alternative layout to avoid all the problems.

The more I look at it the more I am convinced that it is due to the hideMode:'offsets' rather than layout:'auto'.

IE 7/6 seems to have some sort of bug or different handling for the CSS visibility property. When I look in the IE developer toolbar it gives the visibility property as "inherit", meaning the panel that should be showing, but isn't, should be visible. If I change it manually to visibility:visible the invisible panel pops into view.

Additionally I tried this alternative version for hiding CSS and it appears to work ok when the "width" in the previous example is not specified:


.x-hide-offsets {
position:absolute;
left:-10000px;
right:10000px;
top:-10000px;
bottom:10000px;
visibility: visible;
}

It doesn't set "visibility" to "hidden".


The problem is, there are a stack of other features that use CSS "visibility". I found that the enable() and disable() methods also stop working with hideMode:'offsets', for example.

Hence, if CSS visibility is the problem in IE6/7 then it could be quite awkward to fix. It could also be related to position:'absolute' being different in IE.

Max

MaxT
5 Mar 2008, 1:49 AM
Explanation of similar bug in IE7 when absolute positioning and visibility are combined:

http://www.spawnordie.com/wtcms/

MaxT
6 Mar 2008, 1:56 AM
As far as I can see it, this is a summary.

If you use hideMode:'offsets' and deferredRender:false with a TabPanel you are likely to run into problems with IE6/7. This has nothing to do with using layout:'auto'.

hideMode:'offsets' causes problems in IE in relation to using absolute positioning and/or the visibility property. These lead to to the "usual" hasLayout issues in IE.

Additionally, in IE7, but not IE6, there is an additional hasLayout issue when enabling/disabling. This is due to x-masked using the CSS overflow property which affects hasLayout in IE7 but not IE6.

Hence, in Ext version 2.0.2 if you run into these issues you will have to do something to overcome the hasLayout problems. Either add extra CSS, or use a different Ext layout method.

Max