我正在尝试在视口内创建一个可拖动的网格,其中网格 dd 仅被限制在视口容器内。(最终网格将位于选项卡面板内,但如果我可以让这个更简单的示例工作并理解我可以从那里获取它。)我可以将以下网格面板放入一个窗口中,从框,然后将此窗口添加到视口,但 Extjs4 布局文档似乎对此提出警告:
"过度嵌套是一个常见问题。一个过度嵌套的例子发生在通过将 GridPanel 添加到 TabPanel 时,通过将 GridPanel 包裹在包裹面板(没有指定布局)中,然后将该包裹面板添加到 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
是否有一个我不知道的 mixin,或者如果没有,从上面的代码创建一个 mixin 是否合适?