PDA

View Full Version : Column Layout Problem



ManuW
7 Mar 2008, 5:46 AM
Hello all,
I hope you can help, because i don't know where to find a solution.

I have the following code as an item of a Ext.FormPanel:



{
title:"Form",
layout:'form',
items:[{
layout:"column",
items:[{
title:"Userdata",
columnWidth:0.5,
layout:"form",
border:false,
frame:true,
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"id",
inputType:"hidden",
id:"user_form_id",
allowBlank:false
},{
xtype:"textfield",
fieldLabel:"Name",
name:"username",
id:"user_form_name",
allowBlank:false
},{
xtype:"textfield",
fieldLabel:"E-Mail",
name:"email",
id:"user_form_email",
vtype:"email"
},
{
/* radiobuttons */
xtype:'ux-radiogroup',
fieldLabel:'Status',
name:'status',
horizontal:true,
radios:[{
value: 0,
boxLabel:'closed',
checked: true,
listeners: {
"change": function(){
Ext.getCmp("form_users").inputsChanged = true;
}
}
}, {
value: 1,
boxLabel:'active',
listeners: {
"change": function(){
Ext.getCmp("form_users").inputsChanged = true;
}
}
}],
/* /radiobuttons */
}]
},{
title:"Global Permissions",
columnWidth:0.5,
layout:"form",
frame:true,
items:[{
layout:"table",
layoutConfig:{
columns:4
},
defaults:{
bodyStyle:"padding:5px;",
style:"margin:5px;"
},
border:false,
items:[{
html:"",
border:false,
width:100
},{
html:"View",
width:100,
style:"text-align:center"
},{
html:"Edit",
width:100,
style:"text-align:center"
},{
html:"Delete",
width:100,
style:"text-align:center"
},{
html:"Users"
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"view_user",
id:"user_form_view_user"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"edit_user",
id:"user_form_edit_user"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"delete_user",
id:"user_form_delete_user"
}]
},{
html:"Company"
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"view_company",
id:"user_form_view_company"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"edit_company",
id:"user_form_edit_company"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"delete_company",
id:"user_form_delete_company"
}]
},{
html:"Projects"
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"view_project",
id:"user_form_view_project"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"edit_project",
id:"user_form_edit_project"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"delete_project",
id:"user_form_delete_project"
}]
},{
html:"Funnels"
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"view_funnel",
id:"user_form_view_funnel"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"edit_funnel",
id:"user_form_edit_funnel"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"delete_funnel",
id:"user_form_delete_funnel"
}]
}]
}]
}]
}]
}


The result can be seen in the screenshot. Does anybody have an idea, what could be wrong?
I have the code produced by the Ext Gui Builder, so it should run.

Thanks in advance,
-Manuel

Condor
7 Mar 2008, 6:31 AM
The layout config is correct. The problem is probably with the surrounding container.
Could you post that code also?

ManuW
7 Mar 2008, 7:15 AM
Here is the full Code of the FormPanel.



var form_users = new Ext.FormPanel({
title: "User Details",
labelAlign: 'top',
contentEl: "form_content_user",
id: "form_users",
frame: true,
defaultType: 'textfield',
//width: 500,
height:300,
autoScroll:true,
bodyStyle: "padding: 10px;",
layout:'form',
reader: new Ext.data.JsonReader({
root: "rows",
successProperty: "success",
}, form_users_dataRecord),

inputsChanged: false,
items: [
{
title:"Form",
layout:'form',
items:[{
layout:"column",
items:[{
title:"Userdata",
columnWidth:0.5,
layout:"form",
border:false,
frame:true,
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"id",
inputType:"hidden",
id:"user_form_id",
allowBlank:false
},{
xtype:"textfield",
fieldLabel:"Name",
name:"username",
id:"user_form_name",
allowBlank:false
},{
xtype:"textfield",
fieldLabel:"E-Mail",
name:"email",
id:"user_form_email",
vtype:"email"
}
]
},{
title:"Global Permissions",
columnWidth:0.5,
layout:"form",
frame:true,
items:[{
layout:"table",
layoutConfig:{
columns:4
},
defaults:{
bodyStyle:"padding:5px;",
style:"margin:5px;"
},
border:false,
items:[{
html:"",
border:false,
width:100
},{
html:"View",
width:100,
style:"text-align:center"
},{
html:"Edit",
width:100,
style:"text-align:center"
},{
html:"Delete",
width:100,
style:"text-align:center"
},{
html:"Users"
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"view_user",
id:"user_form_view_user"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"edit_user",
id:"user_form_edit_user"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"delete_user",
id:"user_form_delete_user"
}]
},{
html:"Company"
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"view_company",
id:"user_form_view_company"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"edit_company",
id:"user_form_edit_company"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"delete_company",
id:"user_form_delete_company"
}]
},{
html:"Projects"
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"view_project",
id:"user_form_view_project"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"edit_project",
id:"user_form_edit_project"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"delete_project",
id:"user_form_delete_project"
}]
},{
html:"Funnels"
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"view_funnel",
id:"user_form_view_funnel"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"edit_funnel",
id:"user_form_edit_funnel"
}]
},{
xtype:"panel",
style:"text-align:center",
border:false,
items:[{
xtype:"checkbox",
fieldLabel:"Label",
name:"delete_funnel",
id:"user_form_delete_funnel"
}]
}]
}]
}]
}]
}
],
buttons: [{
text: "Save"
},{
text: "Cancel"
}]
});

Condor
7 Mar 2008, 7:40 AM
Since the formpanel only contains a single panel ('Form') it should have layout:'fit'.

But a better solution would be to remove the extra panel ('Form') entirely.

ManuW
7 Mar 2008, 7:49 AM
Thanks for the advice. I removed the panel 'Form' but it still shows the same result. :'(

Condor
7 Mar 2008, 7:57 AM
The problem is that you are using defaultType:'textfield'.
This means that the nested items will be textfields (unless you specify a different xtype).
But the nested item should be a panel.

You could specify xtype:'panel' for the nested items or just remove defaultType:'textfield' (the default is panel).

ManuW
25 Mar 2008, 1:18 PM
That was cool. Thanks for helping.