1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    anirbankundu is on a distinguished road

      0  

    Default Add html content dynamically to TAB

    Add html content dynamically to TAB


    Hi,

    I am using ext4js with jquery. I have a Viewport that adds North, East, West,South & Center Panels.

    In the center panel, I am adding the tab panel [Ext.tab.Panel]. From a jquery button click I am adding a new tab to the tab panel. I am not putting in the html while the tab is created. I am adding after the TAB is created. I find that when the TAB is rendered on the DOM, no TAB contents are visible. Only when I go to another tab and come back to the newly created tab, the tab content is visible. I am unable to understand why this is happening. The code I am using is :

    $('#jquerybutton').bind('click', function () {
    var tab = tabs.add({
    title: 'Tab ' + (tabs.items.length + 1),
    closable: true
    });


    tabs.setActiveTab(tab);
    var tabid = tab.id + '-body';
    $('#' + tabid).html("TEST CONTENT");
    });

    I know I can use the following tab.add({ html: "<div>Test</div>" })
    But there are other reasons for which I would have to use the way I have done [I am using knockout js and adding widgets to the tab id dynamically]

    Can somebody help me out in this regard. I am stuck for the last 1 day

    Thanks,
    Anirban

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you get the component you want to change the html on, use setHtml method on it. You don't need jQuery at all.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread