View Full Version : How to make HTML render properly into ExtJS tabs?

7 Dec 2012, 10:27 AM
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

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