Drop in Grid Grouping

[Harikumar.m]

Can anyone tell me how i can drag and drop items within grid which is grouped with an small example. I am able to do it in normal grid but not with grouped grid.

Thanks in Advance.

[gslender]

Post some code on what you have tried...

[Harikumar.m]

Please find my code below.

Ext.ux.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
XML_NODE_ELEMENT : 1,
XML_NODE_TEXT : 3,
// private override
processResponse : function(response, node, callback) {
var xmlData = response.responseXML;
var root = xmlData.documentElement || xmlData;
try {
node.beginUpdate();
node.appendChild(this.parseXml(root));
node.endUpdate();
if (typeof callback == "function") {
callback(this, node);
}
} catch (e) {
this.handleFailure(response);
}
},
// private
parseXml : function(node) {
var nodes = [];
Ext.each(node.childNodes, function(n) {
if (n.nodeType == this.XML_NODE_ELEMENT) {
if (n.tagName != "Name") {
var treeNode = this.createNode(n);
if (n.childNodes.length > 0) {
var child = this.parseXml(n);
if (typeof child == 'string') {
treeNode.attributes.innerText = child;
} else {
treeNode.appendChild(child);
}
}
nodes.push(treeNode);
}
} else if (n.nodeType == this.XML_NODE_TEXT) {
var text = n.nodeValue.trim();
if (text.length > 0) {
return nodes = text;
}
}
}, this);
return nodes;
},
// private override
createNode : function(node) {
var attr = {
tagName : node.tagName,
val : node.textContent
};
Ext.each(node.attributes, function(a) {
attr[a.nodeName] = a.nodeValue;
});
this.processAttributes(attr);
return Ext.ux.XmlTreeLoader.superclass.createNode.call(this, attr);
},
processAttributes : Ext.emptyFn
});
Ext.app.DataLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
processAttributes : function(attr) {
if (attr.tagName == "Team") {
attr.text = attr.teamName;
attr.loaded = true;
} else {
if (attr.tagName == "Employee") {
attr.text = attr.name;
attr.loaded = true;
} else {
if (attr.tagName == "EmpId") {
attr.text = "EmpId: " + attr.val;
}
if (attr.tagName == "FirstName") {
attr.text = "FirstName: " + attr.val;
}
if (attr.tagName == "LastName") {
attr.text = "LastName: " + attr.val;
}
if (attr.tagName == "Sex") {
attr.text = "Sex: " + attr.val;
}
if (attr.tagName == "Age") {
attr.text = "Age: " + attr.val;
}
if (attr.tagName == "TeamName") {
attr.text = "TeamName: " + attr.val;
}
attr.leaf = true;
}
}
}
});
Ext.onReady(function() {
var Datastore = new Ext.data.GroupingStore({
// load using HTTP
id : 'datastore',
url : 'test.xml',
baseParams : {
task : "LISTING"
},
// the return will be XML, so lets set up a reader
reader : new Ext.data.XmlReader({
// records will have an "Item" tag
record : 'Employee',
id : 'EmpId',
totalRecords : "count"
}, [
{
name : 'EmpId',
mapping : 'EmpId'
}, 'FirstName', 'LastName', 'Sex', 'Age', 'TeamName']),
sortInfo : {
field : 'EmpId',
direction : "ASC"
},
groupField : 'TeamName'
});
// create the grid
var grid = new Ext.grid.GridPanel({
store : Datastore,
columns : [{
header : "EmpId",
width : 100,
dataIndex : 'EmpId',
sortable : true
}, {
header : "FirstName",
width : 100,
dataIndex : 'FirstName',
sortable : true
}, {
header : "LastName",
width : 100,
dataIndex : 'LastName',
sortable : true
}, {
header : "Sex",
width : 50,
dataIndex : 'Sex',
sortable : true
}, {
header : "Age",
width : 50,
dataIndex : 'Age',
sortable : true
}, {
header : "TeamName",
width : 100,
dataIndex : 'TeamName',
sortable : true
}
],
view : new Ext.grid.GroupingView({
forceFit : true,
groupTextTpl : '{group}'
}),
renderTo : 'grid',
width : 475,
height : 200,
collapsible : true,
title : 'Team details',
groupOnSort : true,
enableDragDrop : true,
ddGroup: 'myGroup'
});
Datastore.load();
new Ext.Panel({
title : 'Employee Info',
renderTo : 'tree',
layout : 'border',
width : 350,
height : 500,
items : [{
xtype : 'treepanel',
id : 'tree-panel',
region : 'center',
margins : '2 2 0 2',
autoScroll : true,
enableDD : true,
enableDrag : true,
enableDrop : true,
rootVisible : true,
root : new Ext.tree.AsyncTreeNode({
text : 'Team Details'
}),
loader : new Ext.app.DataLoader({
dataUrl : 'test.xml'
})
}]
});
var ddrow = new Ext.dd.DropTarget(grid.getView().mainBody, {
ddGroup : 'myGroup',
copy:false,
notifyDrop : function(dd, e, data){
var sm=grid.getSelectionModel();
var rows=sm.getSelections();
var cindex=dd.getDragData(e).rowIndex;
for (i = 0; i < rows.length; i++) {
rowData=Datastore.getById(rows[i].id);
if(!this.copy) {
Datastore.remove(Datastore.getById(rows[i].id));
Datastore.insert(cindex,rowData);

}
};
}
});
});

[sven]

Wrong forum. This is GXT not EXTJS. Look some forums above.