PDA

View Full Version : drag&drop from grid to panel(portal)



pirusira
10 May 2010, 10:54 PM
Hello,

Here is the grid panel.


var deviceList = new Ext.grid.GridPanel({
store: deviceListStore,
cm: new Ext.grid.ColumnModel({
columns: [
expander1,
{id:'model',header: "???", renderer:templateRenderer(new Ext.Template('<span class="modelName">{model}</span><br />{ip}'))}
]
}),
viewConfig: {
forceFit:true
},
id: 'deviceList',
autoWidth: true,
autoHeight: true,
border: false,
plugins: expander1,
ddGroup: 'gridDDGroup',
enableDragDrop: true,
stripeRows: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect : true})
});
the portal panel.


var deviceGroup = new Ext.Panel({
title: '????',
region: 'center',
bodyStyle : 'background-color: #fff',
autoScroll : true,
items: [{
border: false,
xtype: 'portal',
items:[{
columnWidth:.49,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',
height: 100,
tools: tools
},{
title: 'Another Panel 1',
height: 100,
tools: tools
},{
title: 'Panel 3',
height: 100,
tools: tools
}]
},{
columnWidth:.49,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',
height: 100,
tools: tools
},{
title: 'Another Panel 2',
height: 100,
tools: tools
},{
title: 'Another Panel 3',
height: 100,
tools: tools
}]
}]
}]
});
the window including the two panels.


var addDeviceWindow = new Ext.Window({
title: '???? ??',
layout: 'border',
width: 790,
height: 500,
border: false,
closeAction:'hide',
constrain : true,
items:[
deviceList,
deviceGroup
]
});
the code for making a drop target.


var blankRecord = Ext.data.Record.create(fields);

var dropTargetEl = deviceGroup.body.dom;

var dropTarget = new Ext.dd.DropTarget(dropTargetEl, {
ddGroup : 'gridDDGroup',
notifyEnter : function(ddSource, e, data) {

//Add some flare to invite drop.
deviceGroup.body.stopFx();
deviceGroup.body.highlight();
},
notifyDrop : function(ddSource, e, data){

// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];


// Load the record into the form
deviceGroup.getForm().loadRecord(selectedRecord);


// Delete record from the grid. not really required.
ddSource.grid.store.remove(selectedRecord);

return(true);
}
});
When I ran my app with these codes, I just could see an error 'deviceGroup.body is undefined.'.
I don't know the defferences between the example code and my code.
Any idea?

Thanks.
Stan

evant
10 May 2010, 11:02 PM
When are you creating the drop target? You need to do it after the panel is rendered.

pirusira
10 May 2010, 11:58 PM
Solved!
I read your reply and then I thought absorbedly.
It should have placed in button listener..
Because the window is supposed to open after the button clicked.
Thank you very much!