1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    charan@dev.com is on a distinguished road

      0  

    Default Cannot Read property 'Data' of undefined...

    Cannot Read property 'Data' of undefined...


    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);
    }
    });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,915
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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/showthre...-help-requests
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    charan@dev.com is on a distinguished road

      0  

    Default


    Thanks for your quick response.

    I am a newbie..

    I dont know the formatting..

Thread Participants: 1