グリッドddがビューポートコンテナ内でのみ制約される、Viewport内にドラッグ可能なグリッドを作成しようとしています。 （最終的にはグリッドがタブパネルの内側に置かれますが、この単純な例を理解して理解することができれば、そこから取り出すことができます）次のグリッドパネルをウィンドウに配置して、ボックス、その後、ビューポートにこのウィンドウを追加しますが、Extjs4レイアウトのドキュメント本に対して警告しているようだ：。Ext.container.ViewportのDraggable Extjs Ext.grid.Panel
「Overnestingは共通の問題である overnestingの例GridPanelがでタブパネルに追加されたときに発生（レイアウトが指定されていない）ラッピングパネル内でGridPanelをラップし、そのラッピングパネルをTabPanelに追加します。実現するポイントは、GridPanelがコンテナに直接追加できるコンポーネントであることです。
- 注：データとコード例は重く煎茶ドキュメントから持ち上げ -
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "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
}
]
});
（クリッカブルとドラッグ）ドラッグであるが、バックとして元の位置にスナップグリッドにおけるこのコード結果それは落とされた（unclicked）。
コードツーワークとベストプラクティス（私が上記のExtjsを読んでいるのを読んでいるのなら）は何が最善の方法でしょうか？
ウィンドウのソースを見てみると、私はDDに以下のコードを追加することもできますが、それは（つまり私はから私のコンポーネントを継承するために、デフォルトのグリッドクラスを作成しています）ここでは適切と思われていません。
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
私が気づいていないmixinがありますか、上記のコードからmixinを作成するのは適切ではないでしょうか？