Question

Im pulling some data out of my webdb, turning it into html and wanting to bind that to the html property of an extended xtype:

App.views.Homecard = Ext.extend(Ext.TabPanel, {
title: "Home",
iconCls: "home",
defaults: {
    styleHtmlContent: true
},
items: [{
        title: 'TabPanels',
        scroll: 'vertical', 
        html: getPresentations
        },
        {
        title: 'Toolbars',
        scroll: 'vertical', 
        html: '<p>Toolbars can be used as a title bar or as a '
        }],

});

SEE THE ‘html: returnHTML’ — this variable is getting built in a webdb callback.. I would like to call a refresh or an update on this page after I get that string done.. can someone help me with how?

Thanks!
Todd

Answer 1

First get a reference to the item object. You can do this in many ways and it depends on where you get the differentHTML object. Let say you modify your code like this so you can get the item object by id.

{
id: 'parent'
title: "Home",
iconCls: "home",
defaults: {
    styleHtmlContent: true
}

Then use the following code to get to the item that needs to change it’s HTML. Afterwards call doLayout and doComponentLayout() since the different HTML probably takes different space.

var item = Ext.getCmp('parent').items.items[0];
     item.update(differentHTML);
     item.doLayout();
     Ext.getCmp('parent').doComponentLayout();

Note that this is a sort of hack. Normally what I would do is first have a model defined that will hold the data you are getting from your webdb. Then have a controller that will update the HTML by applying to a template. This way you can get reference to the item much easier and without the need of id. Also you can maintain much cleaner code by separating the formatting code from the actual data.
You can start learning more about this with the following video: http://www.sencha.com/learn/xtemplates-part-i/.

Live example http://jsfiddle.net/p5K4q/34/