PDA

View Full Version : [2.0] Two tabs, fieldsets, columns and forms



leandrorc
26 Oct 2007, 11:28 AM
Hi,

Bug's details:
Tested on Internet Explorer 6 and 7, Firefox 1.5 and 2.0 and Opera 9.
ExtJs 2.0-beta1

I have the following problem:

Two tabs, each tab has one fieldset inside it, each fieldset has two columns inside it and each column has two form field inside it.

When i run it in the browser, the content of the second tab only is showed when i make some change in the browser window like add a toolbar, open the firebug (in firefox) and etc. That's a insane thing.

The code is the following:


<script type="text/javascript">
Ext.onReady(function(){
var tabs = new Ext.FormPanel({
labelWidth:75,width:550,border:false,frame:true,bodyStyle:'padding:5px 5px 0',renderTo:document.body,title:'Barco',
items:[
{
xtype:'tabpanel',activeTab:0,bodyStyle:'background-color:transparent;padding:8px',height:240,
items:[
{
title:'Dados 1',
items:[
{
xtype:'fieldset',title:'User Information',collapsible:true,height:90,layout:'column',
items:[
{
columnWidth:.5,layout:'form',
items:[
{xtype:'textfield',fieldLabel:'First Name',name:'first',size:20},
{xtype:'textfield',fieldLabel:'Company',name:'company',size:20}
]
},
{
columnWidth:.5,layout:'form',
items:[
{xtype:'textfield',fieldLabel:'Last Name',name:'last',size:20},
{xtype:'textfield',fieldLabel:'Email',name:'email',vtype:'email',size:20}
]
}
]
}
]
},
{
title:'Dados 2',
items:[
{
xtype:'fieldset',title:'User Information 2',collapsible:true,height:90,layout:'column',
items:[
{
columnWidth:.5,layout:'form',
items:[
{xtype:'textfield',fieldLabel:'First Name 2',name:'first2',size:20},
{xtype:'textfield',fieldLabel:'Company 2',name:'company2',size:20}
]
},
{
columnWidth:.5,layout:'form',
items:[
{xtype:'textfield',fieldLabel:'Last Name 2',name:'last2',size:20},
{xtype:'textfield',fieldLabel:'Email 2',name:'email2',vtype:'email',size:20}
]
}
]
}
]
}
]
}
]
});
});
</script>

jsakalos
28 Oct 2007, 2:58 PM
If you set deferredRender:false on tabpane fields on second tab show but they are misaligned until you resize the browser window. Seems to be related to this issue: http://extjs.com/forum/showthread.php?t=16180. We will take a look at it.

roystontay
1 Nov 2007, 11:55 AM
Same issues, I'm trying to get two fieldsets, with two columns within each of them. Tried everything suggested on the forum like "anchor:'100%'", "hideMode:'offsets'", "layout:'anchor'", etc.. the most i managed was getting the first fieldset to render correctly. the contents within the 2nd fieldset refuses to render till browser resizes. The code i used are as below.


var profileForm = new Ext.form.FormPanel({
title:'User Profile', bodyBorder: false, border: false,
labelAlign: 'right', frame: true, bodyStyle:'padding: 4px', labelWidth: 40,
layout: 'anchor', defaults:{border:false, bodyBorder:false}, items:[
{xtype:'fieldset', title:'Personal Information', layout:'column',
autoHeight:true, autoWidth:true, anchor:'100%', items:[
{columnWidth:0.6, defaultType:'textfield', layout:'form',
defaults:{readOnly: true, cls:'profile-field read-only', anchor:'100%'}, items:[
{fieldLabel: 'Name', name: 'name'},
{fieldLabel: 'Email', name: 'email', vtype:'email'}
]},
{columnWidth:0.4, defaultType:'textfield', layout:'form',
defaults:{readOnly: true, cls:'profile-field read-only', anchor:'100%'}, items:[
{fieldLabel: 'ID', name: 'cId'}, {fieldLabel: 'Type', name: 'type'}
]}
]},
{xtype:'fieldset', title:'Tracking Information', autoHeight:true,
autoWidth:true, layout: 'anchor', items:[
{layout:'column', autoHeight:true, autoWidth:true, anchor:'100%', items:[
{columnWidth:0.5, defaultType:'textfield', layout:'form',
defaults:{anchor:'100%', readOnly: true, cls:'profile-field read-only'}, items:[
{fieldLabel: 'Location', name: 'location'},
{fieldLabel: 'Title', name: 'page_title'}
]},
{columnWidth:0.5, defaultType:'textfield', layout:'form', labelWidth: 45,
defaults:{anchor:'100%', readOnly: true, cls:'profile-field read-only'}, items:[
{fieldLabel: 'IP Addr', name: 'ip'},
{fieldLabel: 'Score', name: 'intention_score'}
]}
]},
{layout:'form', defaultType:'textfield', anchor:'100%',
defaults:{anchor:'100%', readOnly: true, cls:'profile-field read-only'}, items:[
{fieldLabel: 'URL', name: 'page_url'},
{fieldLabel: 'Tags', name: 'intention_tags'}
]}
]}
]
});

BigBen4711
3 Nov 2007, 2:15 AM
Hi,

same on Safari 3.0.4.

dafimoto
7 Nov 2007, 1:39 AM
I've encountered probably the same problem.

Using a formpanel with tabpanels in it.
I set deferredRender to false on the tabpanel and hideMode to offsets for the panel in it.

When opening any other tabs it showed blank in IE (7). In FF2 was just fine.
I have attached a listener for show event and tested a couple of properties for that
I have discovered that the panel that was blank had view size set to 0,0 for its element "el".

If I was clicking on other tab and then back to the recent shown it displayed correctly.

I've added a handler like this


onTab_Show : function (comp)
{
if (comp.alreadyOpened) return;
comp.alreadyOpened = true;
comp.el.setSize(comp.lastSize);
}


Probably on IE it does not set the size for that panel.

There is more :D
Problems with FF too.

The same configuration with deferredRender to false and hideMode to offsets. But I think this also applies for hideMode visibility.

I have decided to disable the second (of three) tabs.
Looks good, I agree.
But the 3rd tab was not showing. Ok i saw it started on the bottom of the panel.
The problem was because of the style="position:relative" of the disabled panel (2nd panel in list).
So I decided to setStyle('position','absolute') BACK and it was fine;
I've added a listener for the panel for disable events




denyTabStyle = function(comp)
{
comp.el.setStyle('position','absolute');
}
...
listeners:
{
disable: denyTabStyle
},


of course there must be also a handler for enable event that should set the position not to absolute.

Best Regards,
Bogdan

jsakalos
7 Nov 2007, 6:44 AM
Yeah, it's on the bug list.

roystontay
11 Dec 2007, 9:14 PM
hi, any updates on this bug? it doesn't seem to be fixed yet.. i'm using the latest 2.0 stable release (as of 11/12/2007). Calling form.doLayout (as suggested in another thread doesn't seem to do it for me). in fact, i called doLayout on just about every container (viewport, panel, fieldset, etc..) just to try my luck but it still refuses to render correctly. only resizing my browser makes the contents of my fieldset appear.

jsakalos
12 Dec 2007, 8:14 AM
I have tried the following code in FF-2.0.0.11@Linux and it seems to work. Can you please try it on your end? (It's my form test code so it may contain some unrelated components.)



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
<!-- A Localization Script File comes here -->
<script type="text/javascript">
Ext.onReady(function() {
var win = new Ext.Window({
title:'Form with Tabs in Window Example'
,width:640
,height:480
,layout:'fit'
,border:false
,items:[{ // form
xtype:'form'
,border:false
,items:[{ // tabpanel
xtype:'tabpanel'
,activeTab:0
,anchor:'100% 100%'
,bodyStyle:'padding:10px'
,items:[{ // tabs
title:'Tab 1'
,layout:'form'
,labelWidth:60
,defaults:{xtype:'textfield', anchor:'100%'}
,items:[{ // fields
fieldLabel:'Field 3'
,name:'field3'
},{
fieldLabel:'Field 4'
,name:'field4'
}]
},{
title:'Tab 2'
,layout:'fit'
,labelWidth:60
,defaults:{xtype:'textfield', anchor:'100%'}
,items:[{ // fieldset
xtype:'fieldset'
,title:'Fieldset'
,layout:'column'
,defaults:{border:false, style:'padding:10px'}
,items:[{
columnWidth:0.5
,layout:'form'
,defaults:{xtype:'textfield', anchor:'95%'}
,items:[{
fieldLabel:'Field 1'
,name:'field1'
},{
fieldLabel:'Field 3'
,name:'field3'
}]
},{
columnWidth:0.5
,layout:'form'
,defaults:{xtype:'textfield', anchor:'95%'}
,items:[{
fieldLabel:'Field 2'
,name:'field2'
},{
fieldLabel:'Field 4'
,name:'field4'
}]
}]
}]
}]
}]
}]
,buttons:[{
text:'Submit'
},{
text:'Cancel'
}]
,tbar:[{
xtype:'datefield'
}, '-', {
text:'Button'
}]
});
win.show();
});
</script>
<title>Form with Tabs in Window Example</title>
</head>
<body>
</body>
</html>

Nash-T
14 Dec 2007, 3:27 PM
I've got the same bug but I may have a workaround. In my sandbox application I am able rendering a formpanel with two fieldsets to the document body and then hiding the rendered component. Then when the tab in the window is activated, the form with the fieldset appears ok. I don't know how well this will work in full applications...

Tim

btw, Saki, if you comment out the render/hide you will see that there is still a problem in your code when there are two fieldsets in a tab.







Ext.onReady(function() {
Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';


var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 350,

items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'First Name',
name: 'fsffirst',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'fsflast'
},{
fieldLabel: 'Company',
name: 'fsfcompany'
}, {
fieldLabel: 'Email',
name: 'fsfemail',
vtype:'email'
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'fsfhome',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'fsfbusiness'
},{
fieldLabel: 'Mobile',
name: 'fsfmobile'
},{
fieldLabel: 'Fax',
name: 'fsffax'
}
]
}]

, buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});



fsf.render(document.body);
fsf.hide();




var win = new Ext.Window({
title:'Form with Tabs in Window Example'
,width:640
,height:480
,layout:'fit'
,border:false
,items:[{ // form
xtype:'form'
,border:false
,items:[{ // tabpanel
xtype:'tabpanel'
,activeTab:0
,anchor:'100% 100%'
,bodyStyle:'padding:10px'
,items:[{ // tabs
title:'Tab 1'
,layout:'form'
,labelWidth:60
,defaults:{xtype:'textfield', anchor:'100%'}
,items:[{ // fields
fieldLabel:'Field 3'
,name:'field3'
},{
fieldLabel:'Field 4'
,name:'field4'
}]
},fsf,{
title:'Tab 2'
,layout:'fit'
,labelWidth:60
,defaults:{xtype:'textfield', anchor:'100%'}
,items:[{ // fieldset
xtype:'fieldset'
,title:'Fieldset'
,layout:'column'
,defaults:{border:false, style:'padding:10px'}
,items:[{
columnWidth:0.5
,layout:'form'
,defaults:{xtype:'textfield', anchor:'95%'}
,items:[{
fieldLabel:'Field 1'
,name:'field1'
},{
fieldLabel:'Field 3'
,name:'field3'
}]
},{
columnWidth:0.5
,layout:'form'
,defaults:{xtype:'textfield', anchor:'95%'}
,items:[{
fieldLabel:'Field 2'
,name:'field2'
},{
fieldLabel:'Field 4'
,name:'field4'
}]
}]
}]
}]
}]
}]
,buttons:[{
text:'Submit'
},{
text:'Cancel'
}]
,tbar:[{
xtype:'datefield'
}, '-', {
text:'Button'
}]
});
win.show();


});

brian.moeskau
22 Feb 2008, 9:54 PM
OK, I am going back through and clearing up some outstanding layout-related threads. Forgive me if you've already figured out the solution or moved on to something else. ;)

@leandrorc: add layoutOnTabChange:true to your TabPanel config.

@roystontay: your layout works fine for me (slight issue in IE was fixed by making the label widths a bit wider). You may have seen a bug that has since been fixed in 2.0.1.

@dafimoto: not sure about your issue, but I'm guessing layoutOnTabChange:true might fix it.

@Nash-T: I can't tell if the issue you're referring to is the fact that the second fieldset gets cut off slightly when they are both expanded. If so, the answer is either to make the container taller to begin with, add logic to monitor the fieldsets and dynamically size the container, or simply add autoScroll:true to the config of the panel for that tab. There's no way for the container itself to know whether or not to resize itself in that case.

If anyone still has any issues, please start a new thread as the issues brought up here are not all directly related to each other.

Nash-T
23 Feb 2008, 12:52 PM
Brian,
Thanks for revisiting this. The code I posted was my workaround. To see the problem, use the code I posted but comment out the following two lines:

fsf.render(document.body);
fsf.hide();

You will see that the second tab doesn't display the fieldsets at all. (firefox2 on mac tiger)

I haven't checked this problem with the very latest extjs so maybe it has been fixed already.

Here is what I am using:
//==========================================
// Ext JS Release Notes
//==========================================
// Release Date: December 3, 2007
// Current Version: 2.0 (rev 1450)
// Previous Version: 2.0 RC-1 (rev 1372)
//==========================================

Thanks!
Nash-T



@Nash-T: I can't tell if the issue you're referring to is the fact that the second fieldset gets cut off slightly when they are both expanded. If so, the answer is either to make the container taller to begin with, add logic to monitor the fieldsets and dynamically size the container, or simply add autoScroll:true to the config of the panel for that tab. There's no way for the container itself to know whether or not to resize itself in that case.

If anyone still has any issues, please start a new thread as the issues brought up here are not all directly related to each other.

sekundek
27 Mar 2008, 12:36 PM
Hi,

i'm new here and problems here are similar to mine, but somehow I managed to get it work on test example with some workarouns. My scenario is Formpanel in Window. This formpanel have two or three tabpanels and on each tabpanel i have formfields grouped with fieldset. I set up some test example of this.

[PHP]
Ext.namespace('Ext.exampledata');
var TopicRecord = Ext.data.Record.create([{
name: 'firstName'
}, {
name: 'lastName'
}, {
name: 'state'
}, {
name: 'city'
}, {
name: 'address'
}]);

var myNewRecord = new TopicRecord({
firstName: 'Uro

Nash-T
28 Mar 2008, 4:01 PM
Sekundek,
If you haven't aready done so, start a new thread. See Brian's post above.
I will try out your code when I am on my own machine.
-Tim

hendricd
28 Mar 2008, 4:36 PM
See if tabPanel.layoutOnTabChange:true works for you with forms. You can probably set deferredRender:false if you do.