PDA

View Full Version : Cannot Read property 'Data' of undefined...



charan@dev.com
12 Oct 2011, 10:02 PM
Team,

Please help me out..
I am getting Cannot Read property 'Data' of undefined.

I have 3 grids in my Page.

First Grid: I will list all the requirements based on Selected Phase in 3rd Grid.
Second Grid: I would like to drag and drop from First grid to Second grid..
Third Grid: I will list all the phases available in My Database..

Step1: When I click on a phase1, It will list all the req's in Grid1.
I will drag one req and keep it in Grid2.

Step 2: Now I will click on Phase2 in 3rd Grid. It will list all the req's of Phase2 in Grid1.
I would like to drag the req in Grid2 to Grid1 now. While dragging I am getting that error in console


Here is my code:

Ext.onReady(function() {
var id='{!$CurrentPage.parameters.Id}';
var selectedMember;
var selectedPhase='';
sforce.connection.sessionId = '{!$Api.Session_ID}';
var myData = {
records : [
]
};
var secondData = {
records : [
<apex:repeat value="{!backlogs}" var="b" >
{name:"{!b.name}",effort:"{!b.Effort_Estimate__c} days", priority:"{!b.Priority__c}"},
</apex:repeat>
]
};

// Generic fields array to use in both store defs.
var fields = [
{name: 'name', mapping : 'name'},
{name: 'effort', mapping : 'effort'},
{name: 'priority', mapping : 'priority'}
];

// create the data store
var firstGridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records',
});

// Column Model shortcut array
var cols = [
{id : 'name', header: "Requirement Name", width: 150, sortable: true, dataIndex: 'name',flex:true},
{header: "Effort Estimated", width: 150, sortable: true, dataIndex: 'effort'},
{header: "Priority", width: 150, sortable: true, dataIndex: 'priority'}
];

// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
enableDragDrop : true,
collapsible : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 500,
region : 'west',
title : 'Phase',


});

var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : 'records',
data : secondData
});

// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols,
enableDragDrop : true,
collapsible : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 500,
region : 'center',
title : 'Backlog',

});

//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 1000,
height : 300,
layout : 'border',
renderTo : 'panel1',
items : [
firstGrid,
secondGrid
]
});


var blankRecord = Ext.data.Record.create(fields);
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
copy : true,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = firstGridStore.findExact('name', record.data.name);
alert(record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);
// Call a sort dynamically
firstGridStore.sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);
}

}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}

});


// This will make sure we only drop to the view container
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1];
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
copy : false,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
var foundItem = secondGridStore.findExact('name', record.data.name);
if (foundItem == -1) {
secondGridStore.add(record);
secondGridStore.sort('name', 'ASC');
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});

evant
12 Oct 2011, 11:03 PM
1) Please format your code using the code format tags
2) Please post in the correct forum in future, see: http://www.sencha.com/forum/showthread.php?111701-Please-do-not-use-Open-Discussion-for-help-requests

charan@dev.com
12 Oct 2011, 11:14 PM
Thanks for your quick response.

I am a newbie..

I dont know the formatting..