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

Question

我正在开发一个简单的基于 JavaScript 的插件架构，它允许从任何框架(jQueryUI、ExtJS 等)进行任何 JavaScript 控制。插入并在任何网页上重复使用。我下面的插件恰好使用 ExtJS 4。

第一个插件在第一个选项卡中呈现良好。但是，由于页面加载时第二个选项卡尚未呈现，第二个插件(也是一个网格)首先呈现到文档主体，然后它在内部正确呈现(移动 HTMLElement/div)选项卡被选中时的选项卡。我希望在选项卡内呈现之前隐藏插件内容。此外，当它呈现时 [当选择选项卡时]，水平滚动条不会显示，除非我调整列的大小。

有什么办法解决这个问题吗？

思路:使用contentEl以外的东西；利用各种 ExtJS 配置选项；改变我的架构。

插件代码如下:

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

下面是使用插件的代码:

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
      }]
    })
  ]
});

我可以将它添加到一个不可见的容器中，但这样做感觉很脏:

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

您的代码存在一些问题。

你所说的插件不是插件，它们只是 Ext.grid.Panel 的子类。插件是为 Ext.Component 添加功能的东西，但这不是 Stocks 正在做的事情。这就是我们所说的预配置类。

这就是我要做的，只需让 MyNamespace.Plugin.Stocks 成为 Ext.grid.Panel 的子类，您现在可以轻松地将它们作为一个 Ext.tab.Panel。确保重命名它，它不是插件。

通过为您的小部件子类提供别名:'widget.stock-grid'，您可以仅使用对象定义来创建它们，而无需实例化它们，框架将负责渲染它仅在需要时(选项卡已激活)

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

使用托管布局时，您不能简单地将一个节点复制到另一个容器中，因为您复制到其中的节点不会有托管布局。

这是您的代码的修改版本，编写得更像 Ext-JS 的预期。 http://jsfiddle.net/NVfRH/10/

您可以查看生成的 HTML，您会注意到订单下的网格仅在您激活该选项卡时呈现。

您还应该注意到您的网格没有适当调整自己的大小以填充窗口，我的代码修复了这个问题，因为它们被正确放置在布局管道中并遵守 fit 布局。

遗留问题

• 您的网格共享一个商店，请注意，当您对一个进行排序时，另一个也会进行排序，因此您不能对它们进行不同的排序。
• 您使用的是 stateId，但随后您创建了两个具有相同 stateId 的实例，所有 stateId 必须是唯一的

最后，我必须问，Chad Johnson 改名为 Chad Ochocinco 时，您真的松了一口气吗？ :)