update tab content using Ajax and getComponent().update function

[jaggybala]

Hi,

I am trying to update tab's content using Ajax and "update" function, but always get "tabs.getComponent(0).update is not a function" error. Here's the code:

    var fldWinId = fld + "Window";
    // Look up the button's Window and create it if it doesn't exist
    var win = Ext.WindowMgr.get(fldWinId);
    if (!win) {
        win = new Ext.Window({
            animateTarget: fld,
            title: modeTitle,
            width:680,
            height:580,
            minWidth:660,
            minHeight:560,
            closable: false,
            closeAction: 'hide',
            defaults:{autoHeight: true},
            layout:'fit',
            plain: modePlain,
            items: {
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
                    title: "Basic Info"
                }, {
                    title: "Data Source"
                }, {
                    title: "Data Display"
                }]
            },
            buttons: [{
                text: 'Close',
                handler: function(){
                    win.hide();
                }
            }],
            renderTo: Ext.getBody()
        });
    }

    // Update the window's tab items.
    Ext.Ajax.request({
        url: modeUrl,
        method: "GET",
        success: function(e) {
            var results = Ext.util.JSON.decode(e.responseText);
    	    if (results) {
    		    tabValues = eval(results);
                var tabs =  win.getComponent(0);
                tabs.getComponent(0).update(tabValues[0]);
                tabs.getComponent(1).update(tabValues[1]);
                tabs.getComponent(2).update(tabValues[2]);
                win.show(fld);
    	    }
        },
        failure: function(e) { alert('Error loading field information!'); }
    });

I came up so far with the help of ExtJs member "Animal" :-)

I searched for the documentation for updating tab's content using Ajax and the "update" function, but of no help. Please understand that the original requirement is bit complex and not required, but I must use this type of solution. :-)

Please advise. Thanks!

[Animal]

Read the docs on Component. It does not have an update method.

You might want to update the Component's body

That is an Ext.Element.

[jaggybala]

Nice to hear from you back :-)

This is a followup of our discussion thread last week at: http://extjs.com/forum/showthread.php?t=15455

I saw that there is no update method for Component, but just for Element! Could you please advise in the previous thread? Thank you!

<offtopic>Won't you ever sleep?! :-)</offtopic>

[Animal]

The Component will be a Panel isn't it?

Panels have a body which is an Ext.Element.

Check the docs.

[jaggybala]

It works with this solution :

    	   
            if (results) {
    	        tabValues = eval(results);
                var tabs =  win.getComponent(0);

                // First tab is activated by default, so no problem!
                tabs.getComponent(0).body.update(tabValues[0]);

                // Activate the second tab; otherwise, update is not possible!
                tabs.setActiveTab(1);
                tabs.getComponent(1).body.update(tabValues[1]);

                // Activate the third tab; otherwise, update is not possible!
                tabs.setActiveTab(2);
                tabs.getComponent(2).body.update(tabValues[2]);

                // Reset the tab activation to first tab again!
                tabs.setActiveTab(0);

                win.show(fld);
    	    }

1) I think the comments explain the situation! Updating a tab content without activating it causes "tabs.getComponent(1).body has no properties" error! Is there a better way?!
2) Clicking a new window still has the old window in the background!

Please advise.

[Animal]

There is a better way. What you have hit is lazy rendering. There will be no body until it's rendered. This is a Very Good Thing.

Change

tabs.getComponent(2).body.update(tabValues[2]);

to

tabs.getComponent(2).on('render'), function(t) {
    t.body.update(tabValues[2]);
}, null, {single:true});