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

[lkasdorf]

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]

Hi,

what is an Ext.FormPanel???

cowabunga!

[ppolyzos]

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]

This has been covered. Your tabPanel needes to have deferredRender:false and maybe layoutOnTabChange:true

[lkasdorf]

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]

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]

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]

deferredRender, not deferredRenderer

[lkasdorf]

deferredRender, not deferredRenderer

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