PDA

View Full Version : [Solved]form in tabpanel; setValues() sets first tab's fields only



lkasdorf
9 Jan 2008, 8:49 PM
I have a grid app in which I open a form to edit all the fields in the record. There are a bunch of fields, so I am using a tabpanel for the form (sweet!).

I am using form.setValues() to load up the form with the record's data.

Alas, only the fields in tab 0 are getting set. If I rearrange the tabs, it is always just the first one that gets set.

I thought that perhaps the line


editFormPanel.getForm().setValues(seldata)

..was returning the 0th element of the items in the formpanel or something, but I don't think so. You can see my commented out alert test, where I print the title of the form that is being gotten, and it is correctly reporting the formpanel's title.

Here is the code. I am using the technique of breaking chunks of the config into vars. The tabbing gets a little buggered when I paste into a code tab for some reason...



var nameAdrrItems = [
{fieldLabel:"First Name",name:"first"},
{fieldLabel:"Last Name",name:"last"},
{fieldLabel:"Company",name:"company"},
{fieldLabel:"Addr", name:"street1"},
{fieldLabel:"Suite/Addr2",name:"street2"},
{fieldLabel:"City",name:"city"},
{fieldLabel:"State", name:"state"},
{fieldLabel:"Zip", name:"zip"},
{fieldLabel:"Cell Phone",name:"phone1"},
{fieldLabel:"Home Phone",name:"phone2"},
{fieldLabel:"Fax",name:"fax"},
{fieldLabel:"Alt Email",name:"email2", vtype:"email"}
];

var loginCredsItems = [
{fieldLabel:"Email",name:"email",vtype:"email"},
{fieldLabel:"Password", name:"passwd"},
{fieldLabel:"Std Closing Fee",name:"closingFee1"},
{xtype:"textarea", fieldLabel:"Password",name:"comments"}
];
var state1Items = [
{fieldLabel:"State 1",name:"closingState1"},
{fieldLabel:"Counties",name:"countyList1"},
{xtype:"datefield",fieldLabel:"Notary Expiration",name:"expDate1"},
{fieldLabel:"Notary Number",name:"notaryNum1"},
{fieldLabel:"Title Ins Lic Number", name:"titleInsLicNum1"}
];
var state2Items = [
{fieldLabel:"State 2",name:"closingState2"},
{fieldLabel:"Counties",name:"countyList2"},
{xtype:"datefield",fieldLabel:"Notary Expiration",name:"expDate2"},
{fieldLabel:"Notary Number",name:"notaryNum2"},
{fieldLabel:"Title Ins Lic Number", name:"titleInsLicNum2"}
];
var mdItems = [
{fieldLabel:"Time in Business",name:"timeInBusiness"},
{fieldLabel:"Companies worked with",name:"titleCompanies"},
{fieldLabel:"Closings per week",name:"closingsPerWeek"},
{fieldLabel:"Avg time money held",name:"timeMoneyHeld"},
{xtype: 'radio', fieldLabel: 'Litigation', boxLabel: 'yes', id: 'yes', name: 'litigation'},
{xtype: 'radio', boxLabel: 'no', id: 'no', name: 'litigation', labelSeparator: ''},
{xtype:"textarea",fieldLabel:"Litigation details",name:"litigDetails"},
];

var editFormPanel = new Ext.FormPanel({
labelWidth: 125,
border:false,
width: 350,
title: "Closer Details Form",
header:false,

items: {
xtype:'tabpanel',border:false, activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:
[
{
title:'Misc', layout:'form',
defaults: {width: 230},defaultType: 'textfield',
items: loginCredsItems
},
{
title:'Name & Addr',layout:'form',
defaults: {width: 230},defaultType: 'textfield',
items: nameAdrrItems
},
{
title:'State 1',layout:'form',
defaults: {width: 230},defaultType: 'textfield',
items: state1Items
},
{
title:'State 2',layout:'form',
defaults: {width: 230},defaultType: 'textfield',
items: state2Items
},
{
title:'MD Specific',layout:'form',
defaults: {width: 230},defaultType: 'textfield',
items: mdItems
}
]
},
});



var editWin = null;

function editWindow()
{
var sel = grid.getSelectionModel().getSelected();
var selIndex = ds.indexOf(sel);
var seldata=sel.data;

if (!editWin)
{
editWin = new Ext.Window(
{
el:'editor-win',
title: "Closer Details",
layout:'fit',
width:400,
height:420,
closeAction:'hide',
plain: true,
modal: true,
items: [editFormPanel],
buttons: [{
text:'Cancel',
disabled:false,
handler: function(saveBtn)
{
editWin.hide();
}
},{
text: 'Save',
disabled: true
}]
});
}
editWin.show();
// var mainForm = editFormPanel.getForm();
// alert(editFormPanel.getForm().title); // this shows "Closer Details Form", which is the title of the formpanel
//debugger;
editFormPanel.getForm().setValues(seldata); // this is only setting fields in first tab
}

cowabunga1984
10 Jan 2008, 12:34 AM
Hi,

what is an Ext.FormPanel???

cowabunga! :D

ppolyzos
10 Jan 2008, 12:45 AM
I am facing exactly the same problem.
I guess this happens because the tabs are not rendered in the window unless user press them. Thus, the elements in the other tabs aren't populated to the DOM.
I am thinking that a way to solve this issue is to render all tab elements using a listener, when the window is displayed, but can't figure out the proper one.

If you reach to any point I would be glad to hear from you or any other idea community come up with.

tryanDLS
10 Jan 2008, 5:49 AM
This has been covered. Your tabPanel needes to have deferredRender:false and maybe layoutOnTabChange:true

lkasdorf
10 Jan 2008, 12:58 PM
deferredRenderer sure sounded exactly like the problem- but alas, I'm still not seeing success. Did I put it in the right place?- I modified my formpanel declaration like this:



var editFormPanel = new Ext.form.FormPanel({
labelWidth: 125,
border:false,
width: 350,
title: "Closer Details Form",
header:false,
deferredRenderer: false,
layoutOnTabChange:true,

items: {
xtype:'tabpanel',border:false, activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
deferredRenderer: false,
layoutOnTabChange:true,
items:[{ fields . . .


Also- here is a rather fundamental question. What is the difference between the above example and the following: (saying xtype:'tabpanel' vs. new Ext.TabPanel())?



var editFormPanel = new Ext.form.FormPanel({
labelWidth: 125,
border:false,
width: 350,
title: "Closer Details Form",
header:false,
deferredRenderer: false,
layoutOnTabChange:true,

items: {
new Ext.TabPanel({
border:false, activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
deferredRenderer: false,
layoutOnTabChange:true,
items:[{ fields . . .


I think perhaps my solution is to do it like the 2nd example in the TabPanel documentation- that is, render it from markup rather than from code. Then, the fields will already be in existance when I try to setValues().

Lastly, which is correct: Ext.form.FormPanel() or Ext.FormPanel()?

tryanDLS
10 Jan 2008, 1:06 PM
Please read some of the API doc. deferredRender and layoutonTabchange are configs of TabPanel. It's Ext.form.FormPanel.

There are a number of threads discussing why it's better to use the xtype rather than using the object constructor .

lkasdorf
10 Jan 2008, 1:21 PM
Please read some of the API doc. deferredRender and layoutonTabchange are configs of TabPanel. It's Ext.form.FormPanel.

There are a number of threads discussing why it's better to use the xtype rather than using the object constructor .

Ah- point taken. But as you can see in my example, I am also setting these in the tabpanel, and no-workie. I shotgunned it- tried it in both places.

Ah- I found a discussion of xtypes in Brian Moskau's "what's new" doc. Cool.

Thx

tryanDLS
10 Jan 2008, 1:36 PM
deferredRender, not deferredRenderer

lkasdorf
10 Jan 2008, 2:54 PM
deferredRender, not deferredRenderer

Sheesh! That was sloppy of me! it work now- thanks much.