3

通常、グリッドタイプを定義するには、次のようにします。

Ext.define('MyApp.view.MyGrid', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.myGrid',
  store: 'MyStore',
  columns: [...],
}

次に、xtype'myGrid'を介してコンテナまたはレイアウトに追加します。

私がやりたいExt.grid.Panelのは、同じ構成（列など）を拡張または受け入れる再利用可能なカスタムコンポーネントを定義することですが、実際にはグリッドやその他のものを含むコンテナーです。

Ext.define('MyApp.components.ContainedGrid', {
  extend: 'Ext.container.Container' //or Ext.grid.Panel, whatever works
  alias: 'widget.containedGrid',
  layout: 'card',
  items: [
    {someObject}, //doesn't matter what this is
    {aGrid}, //the grid that should receive the configs from the caller
  ],
}

理想的には、このコンポーネントは通常のExt.grid.Panelオブジェクトのように構成でき、これらの構成は、items配列で2番目に定義されたグリッドに実際に適用する必要があります。

つまり、次のようなものは、カードレイアウトを含むウィンドウをレンダリングする必要があります。ここで、2番目のカードはグリッドであり、列とストアがコンテナに提供されます。

Ext.create('Ext.window.Window',  {
  title: 'hi',
  layout: 'fit',
  items: {
    xtype: 'containedGrid',
    store: myStore,
    columns: [...],
  },
});

論理的には、コンテナーに提供された構成がそのコンポーネントの1つに適用されると言いたいのですが、それを実行する方法がわかりません。何かご意見は？

編集： 簡潔にするために、私がやろうとしているのは、グリッドのように構成されているコンポーネントを作成することですが、実際には、グリッドと他の要素を含むコンテナーです。このコンポーネントは数回使用されるので、再利用可能なコンポーネントとしてパッケージ化したいと思います。

4

2 に答える 2

5

initComponentメソッドをオーバーライドします。

Ext.define('MyWindow', {
    extend: 'Ext.window.Window',
    layout: 'fit',
    title: 'Foo',

    initComponent: function(){
        this.items = {
            xtype: 'grid',
            store: this.store,
            columns: this.columns    
        };
        this.callParent();
    }
});

Ext.onReady(function(){
    new MyWindow({
        width: 200,
        height: 200,
        autoShow: true,
        store: {
            fields: ['name'],
            data: [{
                name: 'Name 1'
            }]
        },
        columns: [{
            dataIndex: 'name',
            text: 'Name'
        }]
    });
});
于 2013-01-18T03:26:31.037 に答える
2

gridconfigのプロパティを定義します

Ext.define('MyApp.components.ContainedGrid', {
  extend: 'Ext.container.Container' //or Ext.grid.Panel, whatever works
  alias: 'widget.containedGrid',
  layout: 'card',
  /**
   * @cfg {object} gridCfg
   */

  initComponent: function(){
     var gridCfg = { xtype: 'grid' };
     if(this.gridCfg)
          gridCfg = Ext.apply(gridCfg ,this.gridCfg);
     if (this.items) // we assume if set it will be always array!
          this.items.push(gridCfg);
     else
          this.items = [gridCfg];
     delete this.gridCfg; // we no longer need this property here
     this.callParent(arguments);
  }
}

そしてユースケース：

Ext.create('Ext.window.Window',  {
  title: 'hi',
  layout: 'fit',
  items: {
    xtype: 'containedGrid',
    gridCfg: {
       store: myStore,
       columns: [...]
    }
  },
});

アップデート

私はあなたが探しているものを今理解していると思います。リスナーをコンテナーに直接登録するには、イベントを中継する必要があります。少なくともビューのイベントを中継する例を作成しました（これが最も多いはずです）。テーブルのイベントと機能（レンダリング後の最初の機能）も中継できるようになります。これは、コンテナからコンソールにすべてのイベントを出力するJSFiddleです。

Ext.define('Ext.ux.ContainedGrid', {
      extend: 'Ext.container.Container',
      alias: 'widget.containedGrid',
      layout: 'card',
      /**
       * @cfg {object} gridCfg
       */

      /**
       * @private {object} grid
       */
      initComponent: function(){
         var me = this,
             grid;
         // provide some default settings for the grid here, 
         // which can be overriden by each instance
         var gridCfg = { }; // the defaulttype is defined on the componentmanager call
         me.gridCfg = me.gridCfg ? Ext.apply(gridCfg ,me.gridCfg) : gridCfg;

         me.grid = me.getGrid();

         if (me.items && Ext.isArray(me.items)) 
              me.items.push(me.grid);
         else if(me.items)
              me.items = [me.items, me.grid];
         else
              me.items = [me.grid];
         delete me.gridCfg; // we no longer need this property here
         // Relay events from the View whether it be a LockingView, or a regular GridView
         this.relayEvents(me.grid, [
                /**
                 * @event beforeitemmousedown
                 * @inheritdoc Ext.view.View#beforeitemmousedown
                 */
                'beforeitemmousedown',
                /**
                 * @event beforeitemmouseup
                 * @inheritdoc Ext.view.View#beforeitemmouseup
                 */
                'beforeitemmouseup',
                /**
                 * @event beforeitemmouseenter
                 * @inheritdoc Ext.view.View#beforeitemmouseenter
                 */
                'beforeitemmouseenter',
                /**
                 * @event beforeitemmouseleave
                 * @inheritdoc Ext.view.View#beforeitemmouseleave
                 */
                'beforeitemmouseleave',
                /**
                 * @event beforeitemclick
                 * @inheritdoc Ext.view.View#beforeitemclick
                 */
                'beforeitemclick',
                /**
                 * @event beforeitemdblclick
                 * @inheritdoc Ext.view.View#beforeitemdblclick
                 */
                'beforeitemdblclick',
                /**
                 * @event beforeitemcontextmenu
                 * @inheritdoc Ext.view.View#beforeitemcontextmenu
                 */
                'beforeitemcontextmenu',
                /**
                 * @event itemmousedown
                 * @inheritdoc Ext.view.View#itemmousedown
                 */
                'itemmousedown',
                /**
                 * @event itemmouseup
                 * @inheritdoc Ext.view.View#itemmouseup
                 */
                'itemmouseup',
                /**
                 * @event itemmouseenter
                 * @inheritdoc Ext.view.View#itemmouseenter
                 */
                'itemmouseenter',
                /**
                 * @event itemmouseleave
                 * @inheritdoc Ext.view.View#itemmouseleave
                 */
                'itemmouseleave',
                /**
                 * @event itemclick
                 * @inheritdoc Ext.view.View#itemclick
                 */
                'itemclick',
                /**
                 * @event itemdblclick
                 * @inheritdoc Ext.view.View#itemdblclick
                 */
                'itemdblclick',
                /**
                 * @event itemcontextmenu
                 * @inheritdoc Ext.view.View#itemcontextmenu
                 */
                'itemcontextmenu',
                /**
                 * @event beforecontainermousedown
                 * @inheritdoc Ext.view.View#beforecontainermousedown
                 */
                'beforecontainermousedown',
                /**
                 * @event beforecontainermouseup
                 * @inheritdoc Ext.view.View#beforecontainermouseup
                 */
                'beforecontainermouseup',
                /**
                 * @event beforecontainermouseover
                 * @inheritdoc Ext.view.View#beforecontainermouseover
                 */
                'beforecontainermouseover',
                /**
                 * @event beforecontainermouseout
                 * @inheritdoc Ext.view.View#beforecontainermouseout
                 */
                'beforecontainermouseout',
                /**
                 * @event beforecontainerclick
                 * @inheritdoc Ext.view.View#beforecontainerclick
                 */
                'beforecontainerclick',
                /**
                 * @event beforecontainerdblclick
                 * @inheritdoc Ext.view.View#beforecontainerdblclick
                 */
                'beforecontainerdblclick',
                /**
                 * @event beforecontainercontextmenu
                 * @inheritdoc Ext.view.View#beforecontainercontextmenu
                 */
                'beforecontainercontextmenu',
                /**
                 * @event containermouseup
                 * @inheritdoc Ext.view.View#containermouseup
                 */
                'containermouseup',
                /**
                 * @event containermouseover
                 * @inheritdoc Ext.view.View#containermouseover
                 */
                'containermouseover',
                /**
                 * @event containermouseout
                 * @inheritdoc Ext.view.View#containermouseout
                 */
                'containermouseout',
                /**
                 * @event containerclick
                 * @inheritdoc Ext.view.View#containerclick
                 */
                'containerclick',
                /**
                 * @event containerdblclick
                 * @inheritdoc Ext.view.View#containerdblclick
                 */
                'containerdblclick',
                /**
                 * @event containercontextmenu
                 * @inheritdoc Ext.view.View#containercontextmenu
                 */
                'containercontextmenu',
                /**
                 * @event selectionchange
                 * @inheritdoc Ext.selection.Model#selectionchange
                 */
                'selectionchange',
                /**
                 * @event beforeselect
                 * @inheritdoc Ext.selection.RowModel#beforeselect
                 */
                'beforeselect',
                /**
                 * @event select
                 * @inheritdoc Ext.selection.RowModel#select
                 */
                'select',
                /**
                 * @event beforedeselect
                 * @inheritdoc Ext.selection.RowModel#beforedeselect
                 */
                'beforedeselect',
                /**
                 * @event deselect
                 * @inheritdoc Ext.selection.RowModel#deselect
                 */
                'deselect'
            ]);
         me.callParent(arguments);
      },
      getGrid: function() {
         if(this.grid)
             return this.grid;
         return this.grid = Ext.ComponentManager.create(this.gridCfg,'grid');;
      }

});
于 2013-01-28T08:41:59.207 に答える