Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Vote Rating
    chaddjohnson is on a distinguished road


    Default Unanswered: How to make HTML render properly into ExtJS tabs?

    I am developing a simple JavaScript-based plugin architecture which allows for any JavaScript control from any framework (jQueryUI, ExtJS, etc). to be plugged into and reused on any web page. My plugins below happen to use ExtJS.

    The first plugin renders fine in the first tab. However, since the second tab hasn't yet rendered when the page loads, the second plugin (also a grid) is first rendering to the document body, and then it renders properly (the HTMLElement/div is moved) inside the tab when the tab is selected. I'd like the plugin content to be hidden prior to rendering inside the tab. Also, when it it does render [when the tab is selected], horizontal scrollbars don't show unless I resize a column.

    Any ideas how to fix this? Here's a jsfiddle: http://jsfiddle.net/chaddjohnson/NVfRH/

    Ideas: use something other than contentEl; leverage various ExtJS config options; change my architecture.

    Here is the plugin code:

    (function(MyNamespace) {
      var gridDataStore = ...
      MyNamespace.Plugin.Chart = MyNamespace.Plugin.extend({
        return {
          initialize: function() {
            // ...
          render: function() {
            var stockGrid = Ext.create('Ext.grid.Panel', {
              autoRender: true,
              autoShow: true,
              store: gridDataStore,
              header: false,
              stateId: 'stateGrid',
              columns: [
                {text: 'Symbol',      width: 75,  sortable: true, dataIndex: 'symbol'},
                {text: 'Description', width: 200, sortable: true, dataIndex: 'description'},
                {text: 'Quantity',    width: 75,  sortable: true, dataIndex: 'quantity'},
                {text: 'Last Price',  width: 85,  sortable: true, dataIndex: 'last_price'}
              viewConfig: {
                stripeRows: true,
                enableTextSelection: true
            return stockGrid.getEl().dom;
    And here's code using the plugin:

    var chart = new MyNamespace.Plugin.Chart();
    var anotherPlugin = new MyNamespace.Plugin.Another();
    var stocksWindow = Ext.create('Ext.Window', {
      title: 'Stocks',
      width: 600,
      height: 450,
      layout: 'fit',
      items: [
        Ext.create('Ext.tab.Panel', {
          activeTab: 0,
          items: [{
            title: 'Chart',
            autoScroll: true,
            contentEl: chartPlugin.render()  // RENDER FIRST PLUGIN IN FIRST TAB
            title: 'Something Else',
            autoScroll: true,
            contentEl: anotherPlugin.render()  // RENDER SECOND PLUGIN IN SECOND TAB
    I can add it to an invisible container, but it feels dirty doing so:

    var container = document.createElement('div');
    container.style.visibility = 'hidden';
    var stockGrid = Ext.create('Ext.grid.Panel', {
      renderTo: container

  2. #2
    Sencha User
    Join Date
    Dec 2009
    Enschede, The Netherlands
    Vote Rating
    flanders will become famous soon enough



    I would recommend exploring what happens with deferredRender: true on the tab.Panel. It should make all the tabs render, even if not visible.

Thread Participants: 1