Results 1 to 9 of 9

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

  1. #1

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

    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
    Code:
    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...

    Code:
    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
    }

  2. #2

    Default

    Hi,

    what is an Ext.FormPanel???

    cowabunga!

  3. #3

    Default

    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.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

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

  5. #5

    Default hmm... not working yet

    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:

    Code:
    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())?

    Code:
    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()?

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    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 .

  7. #7

    Default

    Quote Originally Posted by tryanDLS View Post
    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

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    deferredRender, not deferredRenderer

  9. #9

    Default doh!

    Quote Originally Posted by tryanDLS View Post
    deferredRender, not deferredRenderer
    Sheesh! That was sloppy of me! it work now- thanks much.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •