0

ビューポート内にドラッグ可能なグリッドを作成しようとしています。ここで、グリッドddはビューポートコンテナ内でのみ制約されます。（最終的にはグリッドはタブパネルの内側に配置されますが、この単純な例を機能させて理解できれば、そこから取得できます。）次のグリッドパネルをウィンドウに配置して、ドラッグ可能性を引き出すことができます。ボックスをクリックし、このウィンドウをビューポートに追加しますが、Extjs4レイアウトドキュメントはこれに対して警告しているようです。

「オーバーネストは一般的な問題です。オーバーネストの例は、GridPanelをラッピングパネル（レイアウトが指定されていない）内でラップすることによってGridPanelをTabPanelに追加し、そのラッピングパネルをTabPanelに追加する場合に発生します。 GridPanelは、コンテナに直接追加できるコンポーネントです。」

-注：データとサンプルコードはsenchaドキュメントから大幅に削除されました-

  Ext.create('Ext.data.Store', {
      storeId:'simpsonsStore',
      fields:['name', 'email', 'phone'],
      data:{'items':[
          { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
          { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
          { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
          { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
      ]},
      proxy: {
          type: 'memory',
          reader: {
              type: 'json',
              root: 'items'
          }
      }
  });

  Ext.create('Ext.container.Viewport', {
    items: [
      { xtype: 'gridpanel',
        title: 'Simpsons',
        closable: true,
        collapsible: true,
        animCollapse: true,
        draggable: true,
        resizable: true,
        constrain: true,
        maximizable: true,
        headerPosition: 'top',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ],
        viewConfig: {
          plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize'
            }
        },
        height: 200,
        width: 400
      }
    ]
  });

このコードにより、グリッドはドラッグ可能（クリック可能およびドラッグ可能）になりますが、ドロップ（クリック解除）すると元の位置にスナップバックします。

コードから作業、そしてベストプラクティス（上記で引用したExtjsの警告を読んでいる場合）から、前進するための最良の方法は何ですか？

Windowソースを見ると、以下のコードをDDに追加できますが、ここでは適切ではないようです（つまり、コンポーネントを継承するためのデフォルトのGridクラスを作成しています）。

initDraggable: function() {

  var me = this;
  var ddConfig;

  if (!me.header) {
    me.updateHeader(true);
  }

  if (me.header) {
    ddConfig = Ext.applyIf({
      el: me.el,
      delegate: '#' + me.header.id
    }, me.draggable);

    // Add extra configs if Window is specified to be constrained
    if (me.constrain || me.constrainHeader) {
      ddConfig.constrain = me.constrain;
      ddConfig.constrainDelegate = me.constrainHeader;
      ddConfig.constrainTo = me.constrainTo || me.container;
    }

    me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
    me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
  }

}//initDraggable

私が知らないミックスインが利用可能ですか、そうでない場合は上記のコードからミックスインを作成するのが適切でしょうか？

4

1 に答える 1

0

私はあきらめて、グリッドパネルをWindowsオブジェクトに配置することにしました。次に、タブパネルのアクティブ化/非アクティブ化イベントを通じてそれらの可視性を管理しました。それは私に提案された解決策であり、上記の警告を除けば、私が見つけた他の何よりも実装がはるかに簡単でした。

于 2012-04-16T15:49:24.997 に答える