I am trying to create a draggable grid inside of a Viewport, where the grid dd is constrained only within the viewport container. (Ultimately the grid(s) will sit inside of a tab panel, but if I can get this simpler example working and understood I can take it from there.) I could put the following grid panel into a window, getting draggability out of the box, and then add this window to a Viewport, but the Extjs4 layout documentation seems to warn against this:
"Overnesting is a common problem. An example of overnesting occurs when a GridPanel is added to a TabPanel by wrapping the GridPanel inside a wrapping Panel (that has no layout specified) and then add that wrapping Panel to the TabPanel. The point to realize is that a GridPanel is a Component which can be added directly to a Container."
-- Note: Data and example code heavily lifted from sencha docs --
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
}
]
});
This code results in a grid that is draggable (clickable and draggable), but snaps back into the original position as it's dropped (unclicked).
What's the best way forward, from a code-to-work as well as a best-practice (if I'm reading the Extjs cautioning I quoted above)?
Taking a look at the Window source, I could add the code below to DD, but that does not seems appropriate here (i.e. I am creating a default Grid class to inherit my components from):
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
Is there a mixin available that I'm not aware of, or if not would it be appropriate to create a mixin from the above code?