2

私は、任意のフレームワーク (jQueryUI、ExtJS など) から任意の JavaScript コントロールを可能にする単純な JavaScript ベースのプラグイン アーキテクチャを開発しています。プラグインして、任意の Web ページで再利用できます。以下の私のプラグインはたまたま ExtJS 4 を使用しています。

最初のプラグインは、最初のタブで適切にレンダリングされます。ただし、ページが読み込まれたときに 2 番目のタブはまだレンダリングされていないため、2 番目のプラグイン (グリッドでもあります) は最初にドキュメント本文をレンダリングし、次にタブ内で適切にレンダリングします (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
  ...
});

これが例です

4

1 に答える 1

1

あなたのコードにはいくつかの問題があります。

あなたがプラグインと呼んでいるものはプラグインではなく、単なるサブクラスですExt.grid.Panel。プラグインは に機能を追加するものですExt.Componentが、それはやっていることではありませんStocks。これは、事前構成されたクラスと呼ばれるものです。

MyNamespace.Plugin.StocksのサブクラスにするだけでExt.grid.Panel、これらを a のアイテムとして簡単に渡すことができますExt.tab.Panel。名前を変更してください。これはプラグインではありません。

ウィジェットのサブクラスに を与えることalias: '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ます。

残りの問題

  • グリッドはストアを共有しています。1 つを並べ替えると、もう 1 つが並べ替えられることに注意してください。したがって、それらを異なる並べ替えで使用することはできません。
  • を使用していましたstateIdが、同じ で 2 つのインスタンスを作成していましたstateId。すべての stateId は一意である必要があります

最後に、チャド・ジョンソンが名前をチャド・オチョシンコに変更したとき、本当に安心しましたか? :)

于 2012-12-07T18:44:41.147 に答える