PDA

View Full Version : drag and drop strore



robert.laki
13 Nov 2009, 2:38 AM
Dear Sirs!

I'm a newbie in ext js.
I found a Drag'N'Drop example (maybe it was an example from Saki) here, on the official website. It's working pretty nice (Thanks for the great examples of this Ext JS team =D>). But I have problems with inheritance. Maybe it is caused by myself, becuse I don't really understand the object reaching in ext js.
So my main problem is the following. I'd got the example, and I made some tiny modification on it. I is still working of course, but I need to have the Store of the sub.


GridDropZone = function(grid, config) {
this.grid = grid;
GridDropZone.superclass.constructor.call(this, grid.view.scroller.dom, config);
};
Ext.extend(GridDropZone, Ext.dd.DropZone, {

onContainerOver:function(dd, e, data) {
return dd.grid !== this.grid ? this.dropAllowed : this.dropNotAllowed;
},
onContainerDrop:function(dd, e, data) {
if(dd.grid !== this.grid) {
this.grid.store.add(data.selections);
Ext.each(data.selections, function(r) {
dd.grid.store.remove(r);
});
this.grid.onRecordsDrop(dd.grid, data.selections);
return true;
}
else {
return false;
}
},
containerScroll:true

});

Grid = Ext.extend(Ext.grid.GridPanel, {
border:false,
autoScroll:true,
viewConfig:{forceFit:true},
layout:'fit',
enableDragDrop:true,
hideHeaders: true,
bodyStyle: "margin-bottom: 20px;",
initComponent:function() {
var config = { };
Ext.apply(this, Ext.apply(this.initialConfig, config));
Grid.superclass.initComponent.apply(this, arguments);
},
onRender:function() {
Grid.superclass.onRender.apply(this, arguments);
this.dz = new GridDropZone(this, {ddGroup:this.ddGroup || 'GridDD'});
},
super_size:function() {
Grid.superclass.getSize();
},
onRecordsDrop:Ext.emptyFn
});

Grid1 = Ext.extend(Grid, {
initComponent:function() {
var config = {
store: service_store,
columns:[
{dataIndex:'name', header:'Name'},
{dataIndex:'price', header:'Price'},
{dataIndex:'tax', header:'tax'},
{dataIndex:'ctr', header:'Number'},
{dataIndex:'id', header:'ID', fixed: true, hidden: true,},
]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Grid1.superclass.initComponent.apply(this, arguments);
},

});
Ext.reg('examplegrid1', Grid1);

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Mentés',
cancelText: 'Mégsem',
clicksToEdit: 1,
});
Grid2 = Ext.extend(Grid, {
initComponent:function() {
var store = sirhely_szolgaltatas_store;
var config = {
store:store,
columns:[
{dataIndex:'name', header:'Name'},
{dataIndex:'ar', header:'Price'},
{dataIndex:'tax', header:'Tax'},
{dataIndex:'ctr', header:'Number' , editor: new fm.NumberField({allowBlank: false,blankText: 'Msg....',})},
{dataIndex:'id', header:'ID', fixed: true, hidden: true,},
],
plugins: [editor]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Grid2.superclass.initComponent.apply(this, arguments);
},

});

Ext.reg('examplegrid2', Grid2);
So, I need to have the Store of Grid2, because I have to know the id's inside. After a long time trying I couldn't find the solution.
If it's not enough information, I'll try to make a better problem explanation...



Thanks!


Robert

16 Nov 2009, 8:08 AM
If you are giong to be setting up drag and drop between two components, you might as well create ONE class that handles all of the drag and drop between them.