如何使HTML正确呈现到ExtJS选项卡中？

Question

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 4.

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?

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;
      }
    };
  }
})(MyNamespace);

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');
document.getElementsByTagName('body')[0].appendChild(container);
container.style.visibility = 'hidden';

var stockGrid = Ext.create('Ext.grid.Panel', {
  ...
  renderTo: container
  ...
});

Here's an example

Answer 1

Here are a few problems with your code.

What you are calling plugins are not plugins, they are just subclasses of Ext.grid.Panel . A plugin is something that adds functionality to an Ext.Component , but that is not what Stocks is doing. It's just what we call a preconfigured class.

Here's what I would do, just make MyNamespace.Plugin.Stocks be a subclass of Ext.grid.Panel , you can now easily pass those as the items of a Ext.tab.Panel . Make sure you rename it, it's not a plugin.

By giving your widget subclasses the alias: 'widget.stock-grid' , you can create them using just an object definition, without having to instantiate them, the framework will take care of rendering it only when needed (the tab is activated)

        Ext.create('Ext.tab.Panel', {
            activeTab: 0,
            items: [{
                title: 'Stocks',
                autoScroll: true,
                xtype: 'stock-grid'
            },{
                title: 'Orders',
                autoScroll: true,
                xtype: 'stock-grid'
            }]
        })

When using managed layouts, you cannot just simply copy a node into another container, because the node you copied in there won't have a managed layout.

Here's a modified version of your code that is written more like Ext-JS intended it. http://jsfiddle.net/NVfRH/10/

You can look into the generated HTML and you'll notice that the grid under orders only renders when you activate that tab.

You should also notice that your grids weren't properly sizing themselves to fill the window, my code fixes that since they are correctly placed in the layout pipeline and obey the fit layout.

Remaining Problems

• Your grids are sharing a store, notice that when you sort one, the other gets sorted, so you can't have them with different sorting.
• You were using a stateId , but then you were creating two instances with the same stateId , all stateIds must be unique

And lastly, I must ask, were you really relieved when Chad Johnson changed his name to Chad Ochocinco? :)