Results 1 to 2 of 2

Thread: Add html content dynamically to TAB

  1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default 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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,050
    Vote Rating
    1381
      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 @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

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