PDA

View Full Version : Absolute field positioning



TampaBay55
14 May 2009, 11:35 AM
Hey gurus!
I am using the following bit of code:



var cusCustomerCode = new Ext.form.Field({
fieldLabel: 'Customer ID',
name: 'cus_customerID',
x: 100,
y: 100
});
var cusFormPanel = new Ext.FormPanel({
frame: true,
labelAlign: 'right',
labelWidth: 85,
waitMsgTarget: true,
items:[cusCustomerCode]
});
I am unable to get to field to move to the position specified by x and y. What am I doing wrong here? Thanks.

15 May 2009, 7:03 AM
You need to wrap cusCustomerCode in a container that uses the form layout. That new container needs to be a direct child of form panel, which uses the absolute layout.

I cover these two layotus in my screencasts (see below)

TampaBay55
15 May 2009, 7:10 AM
Perfect. Thanks!

TampaBay55
15 May 2009, 7:23 AM
Thanks for your help, Jesus. Got it working and it looks great. Nice job on the book so far - can't wait to get the rest of it! B)

TampaBay55
19 May 2009, 11:07 AM
Hey Jay:

So I got the absolute field positioning fixed if the field is a child of a form panel with the "layout:absolute" config set.

BUT.....

what if the field is a child on a tab for which the tabpanel is a child of the formpanel? It will not position absolutely and placing "layout:absolute" on the tab config doesn't do anything.

19 May 2009, 11:10 AM
Hi TampaBay,

It should :(

Can you post your code in code tags?

TampaBay55
19 May 2009, 11:27 AM
WOW! That was quick!

This is the code I was working with...it isn't pretty because I've mucked with it, but the functionality SHOULD be there:



var cliClientCode = new Ext.form.Field({
fieldLabel: 'Client Code',
name : 'CLI_CLIENTCODE',
width : 140,
x : 150,
y : 150
});
var cliTabPanel = new Ext.TabPanel({
activeTab : 0,
border : false,
items: [{
title : 'Tab 1',
layout:'form',
items : [cliClientCode]
},{
title: 'Tab 2',
html: 'TEST 2'
},{
title: 'Tab3',
html: 'TEST 3'
}]
})
var cliForm = new Ext.FormPanel({
border : false,
layout : 'absolute'
items :[cliTabPanel]
});
var cliUpdateWindow = new Ext.Window({
title : 'Client Information Editor',
width : 500,
height: 500,
layout: 'fit',
items :[cliForm]
});
cliUpdateWindow.show();

TampaBay55
20 May 2009, 6:21 AM
Hi Jay:

Were you ever able to get this to work?

20 May 2009, 6:56 AM
Hey dude, i'm trying to figure out exactly what you're trying to do.

Are you trying to absolutely position items within a tab?

20 May 2009, 7:03 AM
The following working case works off of Ext 3.0 via SVN


var fieldCollection = {
xtype : 'panel',
title : 'Tab 1',
layout : 'absolute',
defaults : {
labelWidth : 50,
height : 50,
width : 200
},
items : [
{
xtype : 'container',
layout : 'form',
border : false,
x : 25,
y : 25,
items : {
xtype : 'textfield',
fieldLabel : 'First Name'
}
},
{
xtype : 'container',
layout : 'form',
x : 100,
y : 100,
items : {
xtype : 'textfield',
fieldLabel : 'Last Name'
}
}

]
}

var tabPanel = {
xtype : 'tabpanel',
deferredRender : false,
activeTab : 0,
layoutOnTabChange : true,
items : [
fieldCollection,
{
title : 'Tab2'
}
]
}

var fp = {
xtype : 'form',
layout : 'fit',
items : tabPanel,
border : false
};

new Ext.Window({
layout : 'fit',
height : 400,
width : 400,
border : false,
items : fp
}).show();

TampaBay55
20 May 2009, 7:06 AM
Hey Jay:

Essentially that is what I am trying to do. I would have made the formpanel a child of the tab panel, but the form fields will be spread across three different tabs - that's why I made the tab panel a child of the form panel. Guess it's not supposed to work that way?

20 May 2009, 7:09 AM
it certainly can. my question to you, i suppose, is why use absolute layout?

The tabs themselves can use the form layout :)

TampaBay55
20 May 2009, 7:14 AM
I was using absolute layout so I could position my fields to make more sense such as city, state and zip code all side by side with one field label. I didn't want to go through setting up columns and anchoring and all that other stuff. I figured it would be easier the use absolute positioning and x,y each field myself.

I'm fairly new to the framework and I am teaching myself through examples I can find. Perhaps this is a case of "I didn't know any better"

TampaBay55
20 May 2009, 7:29 AM
Just as a quick offshoot of one of your previous comments - If I have several fields in a record that span multiple tabs, how am I able to retrieve those fields with a getform or save those fields with submit unless the fields are all in the same a fieldPanel?

This was my reasoning behind making the tabpanel a child of fieldpanel, which led me to the absolute field positioning quagmire.

20 May 2009, 9:01 AM
You can simply use formPanel.getForm().getValues() --- or more simply,



formPanel.getForm().submit({
url : '',
success : function() {

} ,
failure : function() {

}




});


This stuff is covered in chapter 5 :)

20 May 2009, 9:02 AM
if you ever plan on loading your multi-tabb'ed form, be sure to set deferredRender to false on the tab panel

TampaBay55
20 May 2009, 9:06 AM
I'll take an early draft on Chapter 5! :D

Thanks for all your help. I jest need to play with it a bit more to become more comfortable.