我想在Viewport中创建一个可拖动的网格,其中网格dd仅限于视口容器内。 (最终,网格将位于标签面板内部,但是如果我可以得到这个更简单的示例,并且能够理解我可以从中获取它)。我可以将下面的网格面板放到窗口中,使可伸缩性远离框,然后这个窗口添加到视口,但Extjs4布局文档似乎警惕这一点:Ext.container.Viewport中可拖拽Extjs Ext.grid.Panel
“overnesting是一个常见的问题当GridPanel中被添加到的TabPanel发生overnesting的一个例子。将GridPanel包装在一个包装面板(没有指定布局)中,然后将该包装面板添加到TabPanel中。要实现的一点是GridPanel是一个可以直接添加到Container的组件。
- 注:数据和示例代码重从煎茶文档抬起 -
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
}
]
});
该代码产生一个网格,是可拖动(可点击和拖动),但推到原来的位置作为它被丢弃(未点击)。
从代码到工作以及最佳实践(如果我正在阅读上面引用的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?