Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Store not able to send data correctly to server side

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
      0  

    Thumbs up Store not able to send data correctly to server side

    hi..
    sencha forum member I am having one problem in sync event of my Store.

    my projectganttPanel.js code is below mentioned
    Code:
    var start   = new Date(2010, 0, 1),end     = Sch.util.Date.add(start, Sch.util.Date.MONTH, 30);
    
    
    //create the downloadframe at the init of your app
    this.downloadFrame = Ext.getBody().createChild({
                    tag: 'iframe'
                        , cls: 'x-hidden'
                        , id: 'iframe'
                        , name: 'iframe'
                });
    //create the downloadform at the init of your app
    
    
                this.downloadForm = Ext.getBody().createChild({
                    tag: 'form'
                        , cls: 'x-hidden'
                        , id: 'form'
                        , target: 'iframe'
                });
                
                var printableMilestoneTpl = new Gnt.template.Milestone({
                    prefix : 'foo',
                    printable : true,
                    imgSrc : 'resources/images/milestone.png'
                });
    
    
                var params = new Object();
    Ext.define('gantt.view.projectmgt.projectGanttpanel', {
    	extend: "Gnt.panel.Gantt",
    	id: 'projectganttpanel',
    	alias: 'widget.projectganttpanel',
    	requires: [
    				'Gnt.plugin.TaskContextMenu',
    				'Gnt.column.StartDate',
    				'Gnt.column.EndDate',
    				'Gnt.column.Duration',
    				'Gnt.column.PercentDone',
    				'Gnt.column.ResourceAssignment',
    				'Sch.plugin.TreeCellEditing',
    				'Sch.plugin.Pan'
    	          ],	       
    	          leftLabelField: 'Name',
    	          loadMask: true,
    	          width: '100%',
    				height: '98%',		
    	          startDate: start,
    	          endDate: end,
    	          multiSelect: true,
    	          cascadeChanges: true,
    	          viewPreset: 'weekAndDayLetter',
    	          recalculateParents: false, 
    	          
    	          initComponent : function() {
    	TaskPriority = {
    			Low : 0,
    			Normal : 1,
    			High : 2
    	};
    	var me = this;
    	
    	me.on({
    		scope: me,
    		beforeload: function(store,records,options) {
    			console.log('BEFORE LOAD YAAR panel');
    			  console.log( 'manual load ' + records.params );
                  console.log( records.params );
                  console.log( 'proxy defined params ' + store.proxy.extraParams );
                  console.log( store.proxy.extraParams );
                  
                  if(records.params['id'] != null)
                  {
                	  return true;
                  }
                  else
                  {
                	  return false;
                  }
            }			
    	});
    	
    	var taskStore = Ext.create("Gnt.data.TaskStore", {
    		model: 'gantt.model.Task',
    		storeId: 'taskStore',
    		autoDestroy: true,
    		autoLoad : false,
    		autoSync : false,
    		proxy       : {
    		type : 'ajax',
    		method: 'GET',
    		api: {
    		read:       'task/GetTask.action',
    		create:     'task/CreateTask.action',
    		destroy:    'task/DeleteTask.action',
    		update:     'task/UpdateTask.action'
    	},
    	writer : new Ext.data.JsonWriter({
    		//type : 'json',
    		root : 'taskdata',
    		encode : true,
    		writeAllFields : true
    	}),
    	reader : new Ext.data.JsonReader({
    		totalPropery: 'total',
    		successProperty : 'success',
    		idProperty : 'id',
    		type : 'json',
    		root: function (o) {
    		if (o.taskdata) {
    			return o.taskdata;
    		} else {
    			return o.children;
    		}
    	}
    	})
    	}
    	});
    
    
    
    
    	var dependencyStore = Ext.create("Ext.data.Store", {
    		autoLoad : true,
    		autoSync : true,
    		autoDestroy: true,
    		model : 'gantt.model.Dependency',
    		storeId: 'dependencyStore',
    		proxy: {
    		type : 'ajax',
    		method: 'GET',
    		reader: new Ext.data.JsonReader({
    			root: 'dependencydata',
    			type : 'json'
    		}),
    		writer : new Ext.data.JsonWriter({
    			root: 'dependencydata',
    			type : 'json',
    			totalPropery: 'total',
    			successProperty : 'success',
    			idProperty : 'id',
    			encode : true,
    			writeAllFields : true
    		}),
    		api: {
    		read : 'dependencies/GetDependencies.action',
    		create: 'dependencies/CreateDependencies.action',
    		destroy: 'dependencies/DeleteDependencies.action'
    	}
    	}
    	});
    
    
    
    
    	Ext.apply(me, {
    		taskStore: taskStore,
    		dependencyStore: dependencyStore,
    
    
    		// Add some extra functionality
    		plugins : [
    		           Ext.create("Gnt.plugin.TaskContextMenu"), 
    		           Ext.create('Sch.plugin.TreeCellEditing', { 
    		        	   clicksToEdit: 1
    		           })
    		           ],
    
    
    		           eventRenderer: function (task) {
    		var prioCls;
    		switch (task.get('Priority')) {
    		case TaskPriority.Low:
    			prioCls = 'sch-gantt-prio-low';
    			break;
    
    
    		case TaskPriority.Normal:
    			prioCls = 'sch-gantt-prio-normal';
    			break;
    
    
    		case TaskPriority.High:
    			prioCls = 'sch-gantt-prio-high';
    			break;
    		}
    
    
    		return {
    			cls: prioCls
    		};
    	},
    
    
    	// Setup your static columns
    	columns: [
    	          {
    	        	  xtype : 'treecolumn',
    	        	  header: 'Tasks',
    	        	  dataIndex: 'Name',
    	        	  width: 150,
    	        	  field: new Ext.form.TextField()
    	          },
    	          new Gnt.column.StartDate(),
    	          new Gnt.column.Duration(),
    	          new Gnt.column.PercentDone(),
    	          {
    	        	  header: 'Priority',
    	        	  width: 50,
    	        	  dataIndex: 'Priority',
    	        	  renderer: function (v, m, r) {
    	        	  switch (v) {
    	        	  case TaskPriority.Low:
    	        		  return 'Low';
    
    
    	        	  case TaskPriority.Normal:
    	        		  return 'Normal';
    
    
    	        	  case TaskPriority.High:
    	        		  return 'High';
    	        	  }
    	          }
    	          },
    	          {
    	        	  xtype       : 'booleancolumn',
    	        	  width       : 50,
    
    
    	        	  header      : 'Manual',
    
    
    	        	  dataIndex   : 'ManuallyScheduled',
    
    
    	        	  field       : { 
    	        	  xtype   : 'combo',
    	        	  store   : [ 'true', 'false' ]
    	          }
    	          }
    	          ],
    
    
    	          tooltipTpl: new Ext.XTemplate(
    	        		  '<h4 class="tipHeader">{Name}</h4>',
    	        		  '<table class="taskTip">',
    	        		  '<tr><td>Start:</td> <td align="right">{[Ext.Date.format(values.StartDate, "y-m-d")]}</td></tr>',
    	        		  '<tr><td>End:</td> <td align="right">{[Ext.Date.format(Ext.Date.add(values.EndDate, Ext.Date.MILLI, -1), "y-m-d")]}</td></tr>',
    	        		  '<tr><td>Progress:</td><td align="right">{PercentDone}%</td></tr>',
    	        		  '</table>'
    	          ).compile(),
    
    
    	          tbar: [{
    	        	  xtype: 'buttongroup',
    	        	  title: 'Navigation',
    	        	  columns: 2,
    	        	  defaults: {
    	        	  scale: 'large'
    	          },
    	          items: [{
    	        	  iconCls : 'icon-prev',
    	        	  scope : this,
    	        	  handler : function() {
    	        	  this.shiftPrevious();
    	          }
    	          },
    	          {
    	        	  iconCls : 'icon-next',
    	        	  scope : this,
    	        	  handler : function() {
    	        	  this.shiftNext();
    	          }
    	          }]
    	          },{
    	        	  xtype: 'buttongroup',
    	        	  title: 'View tools',
    	        	  columns: 2,
    	        	  defaults: {
    	        	  scale: 'small'
    	          },
    	          items: [
    	                  {
    	                	  text : 'Collapse all',
    	                	  iconCls : 'icon-collapseall',
    	                	  scope : this,
    	                	  handler : function() {
    	                	  this.collapseAll();
    	                  }
    	                  },
    	                  {
    	                	  text : 'Zoom to fit',
    	                	  iconCls : 'zoomfit',
    	                	  handler : function() {
    	                	  this.zoomToFit();
    	                  },
    	                  scope : this
    	                  },
    	                  {
    	                	  text : 'Expand all',
    	                	  iconCls : 'icon-expandall',
    	                	  scope : this,
    	                	  handler : function() {
    	                	  this.expandAll();
    	                  }
    	                  }
    	                  ]
    	          },{
    	        	  xtype: 'buttongroup',
    	        	  title: 'View resolution',
    	        	  columns: 2,
    	        	  defaults: {
    	        	  scale: 'large'
    	          },
    	          items: [{
    	        	  text: '10 weeks',
    	        	  scope : this,
    	        	  handler : function() {
    	        	  this.switchViewPreset('weekAndDayLetter');
    	          }
    	          },
    	          {
    	        	  text: '1 year',
    	        	  scope : this,
    	        	  handler : function() {
    	        	  this.switchViewPreset('monthAndYear');
    	          }
    	          }
    	          ]},{
    	        	  text: 'Collapse all',
    	        	  iconCls: 'icon-collapseall',
    	        	  handler: function () {
    	        	  g.collapseAll();
    	          }
    	          },
    	          {
    	        	  text: 'Expand all',
    	        	  iconCls: 'icon-expandall',
    	        	  handler: function () {
    	        	  g.expandAll();
    	          }
    	          },
    	          {
    	        	  text: 'Zoom to fit',
    	        	  iconCls: 'icon-zoomtofit',
    	        	  handler: function () {
    	        	  g.zoomToFit();
    	          }
    	          },
    	          {
    	        	  text: 'Save',
    	        	  iconCls: 'icon-save',
    	        	  handler: function () {
    	        	  taskStore.sync();
    	          }
    	          },
    	          {
    	        	  text: 'Add new Root Node',
    	        	  iconCls: 'icon-save',	        	
    	        	  handler: function () {
    	        	  taskStore.getRootNode().appendChild(new taskStore.model({
    	        		  Name: 'New Task',                            
    	        		  PercentDone: 60,
    	        		  StartDate : new Date(2011, 0, 30),
    	        		  Duration: 1.0,
    	        		  DurationUnit: 'd',
    	        		  leaf: true
    	        	  })
    	        	  );
    	        	  taskStore.sync();
    	          }
    	          }
         ]	 
    	});
    
    
    	me.callParent(arguments);
    } 
    	          
    	          
    });
    and my model gantt.model.Task code is below
    Code:
    Ext.define('gantt.model.Task', {
    	extend : "Gnt.model.Task",
    
    
    	fields : [ {
    		name : 'Id',
    		type : 'int',
    		useNull : true,
    		mapping : 'taskid'
    	}, {
    		name : 'StartDate',
    		type : 'date',
    		mapping : 'startdate',
    		dateFormat : 'time'
    	}, {
    		name : 'EndDate',
    		type : 'date',
    		mapping : 'enddate',
    		dateFormat : 'time'
    	}, {
    		name : 'Priority',
    		defaultValue : 1,
    		mapping : 'priority'
    	}, {
    		name : 'Duration',
    		mapping : 'duration'
    	}, {
    		name : 'PercentDone',
    		mapping : 'percentdone'
    	}, {
    		name : 'DurationUnit',
    		mapping : 'durationunit'
    	}, {
    		name : 'parentId',
    		mapping : 'parentid'
    		
    	}, {
    		name : 'Name',
    		mapping : 'taskname'
    	}, {
    		name : 'index',
    		mapping : 'taskindex'
    	}, {
    		name : 'depth',
    		mapping : 'depth'
    	}, ]
    });
    and my model gantt.model.Dependency code is below
    Code:
    Ext.define('gantt.model.Dependency', {
    	idProperty: 'Id',
    	extend: 'Gnt.model.Dependency',
    	
    	fields: [
    	         	{ name: 'Id', type: 'int', useNull: true, mapping: 'id'},
    	         	{ name: 'From', type: 'int', mapping: 'dependencyFrom'},
    	         	{ name: 'To', type: 'int', mapping: 'dependencyTo'},
    	         	{ name: 'Type', type: 'int', mapping: 'type'}
    	         ]
    });
    my projectganttPanel.js has one button named Add new Root Node that will add new root node to the projectganttPanel. My root node is added perfectly but the problem is that when I press the Save button
    it fires the create event of the proxy but passes some illegal data like below mentioned

    Code:
    [{
        "Id": null,
        "Name": "",
        "StartDate": null,
        "EndDate": null,
        "Duration": "",
        "DurationUnit": "",
        "PercentDone": "",
        "ManuallyScheduled": false,
        "Priority": 1,
        "parentId": null,
        "index": 0,
        "depth": 0,
        "checked": null
    }, {
        "Id": null,
        "Name": "Exodus",
        "StartDate": "2011-01-30T00:00:00",
        "EndDate": "2011-02-01T00:00:00",
        "Duration": 1,
        "DurationUnit": "d",
        "PercentDone": 60,
        "ManuallyScheduled": false,
        "Priority": 1,
        "parentId": null,
        "index": 7,
        "depth": 1,
        "checked": null
    }]
    the above data is send to data to create new task but I had just created only one task with name Exodus, but don't know why my create request is also sending the junk value with null data.

    I am not able to track what things I am doing wrong here which didn't make my create task to be executed successfully.

    Help me find what's wrong in my code mentioned above. And solve it as soon as possible.

    Yogendra SinghSr. Programmer
    Kintudesigns.com

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    12
    Vote Rating
    0
      0  

    Default

    I might be wrong. Did you try using different action methods for your store action? Like
    Code:
      actionMethods: {
                    destroy:'DELETE',
                    create: 'POST',
                    update: 'POST',
                    read: 'GET'
                },

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    @rushi2440

    What happens if you click the save button without adding any root node before?

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by vietits View Post
    @rushi2440

    What happens if you click the save button without adding any root node before?
    hi vietits

    when I click the save button without adding any root node before. No request is made to server but as soon I add the root node and click the save button the data passed to server is

    [{ "Id": null, "Name": "", "StartDate": null, "EndDate": null, "Duration": "", "DurationUnit": "", "PercentDone": "", "ManuallyScheduled": false, "Priority": 1, "parentId": null, "index": 0, "depth": 0, "checked": null}, { "Id": null, "Name": "Exodus", "StartDate": "2011-01-30T00:00:00", "EndDate": "2011-02-01T00:00:00", "Duration": 1, "DurationUnit": "d", "PercentDone": 60, "ManuallyScheduled": false, "Priority": 1, "parentId": null, "index": 7, "depth": 1, "checked": null}]
    so can you tell me what is the problem with my code which makes this things happen.

    Yogendra Singh
    Sr. Programmer
    Kintudesigns.com

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    It seems that the root node of the tree is also passed to server. Let try the following code to see what will happen:

    Code:
    var taskStore = Ext.create("Gnt.data.TaskStore", {
        model: 'gantt.model.Task',
        storeId: 'taskStore',
        autoDestroy: true,
        autoLoad : false,
        autoSync : false,
        root: {
            text: 'root'
        },
        proxy    : {
            type : 'ajax',
            method: 'GET',
            api: {
                read:       'task/GetTask.action',
                create:     'task/CreateTask.action',
                destroy:    'task/DeleteTask.action',
                update:     'task/UpdateTask.action'
            },
            writer : new Ext.data.JsonWriter({
                //type : 'json',
                root : 'taskdata',
                encode : true,
                writeAllFields : true
            }),
            reader : new Ext.data.JsonReader({
                totalPropery: 'total',
                successProperty : 'success',
                idProperty : 'id',
                type : 'json',
                root: function (o) {
                    if (o.taskdata) {
                        return o.taskdata;
                    } else {
                        return o.children;
                    }
                }
            })
        }
    });
    console.log(taskStore.getRootNode()); // what does root node look like?
    .....
    Code:
    ...
    {
    	text: 'Add new Root Node',
    	iconCls: 'icon-save',	        	
    	handler: function () {
    		var root = taskStore.getRootNode();
    		console.log(root)? // what does root node look like?
    		root.appendChild(new taskStore.model({
    			Name: 'New Task',                            
    			PercentDone: 60,
    			StartDate : new Date(2011, 0, 30),
    			Duration: 1.0,
    			DurationUnit: 'd',
    			leaf: true
    		})
    	);
    	taskStore.sync();
    }
    ...

  6. #6
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
      0  

    Default

    @vietits

    I tried the solution you provided but still not successfull. I am getting the output as the below given image snap.
    error.jpg

    the firebug console gives all the console value as null. any Idea why the null value is passed even though I am creating the new Task

    Yogendra Singh
    Sr. Programmer
    Kintudesigns.com

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    It's difficult to see the screenshot because it's small and not enough information.

    As I said in my previous post, it maybe the root node of the tree (the null value as you said) is passed to server. Still with the code I suggested last post, let try this and watch the result:
    Code:
    {
    	text: 'Add new Root Node',
    	iconCls: 'icon-save',	        	
    	handler: function () {
    		var root = taskStore.getRootNode();
    		root.phantom = false;
    		root.appendChild(new taskStore.model({
    			Name: 'New Task',                            
    			PercentDone: 60,
    			StartDate : new Date(2011, 0, 30),
    			Duration: 1.0,
    			DurationUnit: 'd',
    			leaf: true
    		})
    	);
    	taskStore.sync();
    }

  8. #8
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
      0  

    Thumbs up

    @vietits

    thanks for your answer it works but gives me error in the firebug console window as

    b.store is undefined
    [Break On This Error]

    b.store.suspendEvents(true);

    now my request didn't contain the null parameter it contains only the value of the newly task created. So what's the reason why it gives me that error. ?

    Yogendra Singh
    Sr. Programmer
    Kintudesigns.com

  9. #9
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    119
      0  

    Default

    So as I guessed, the null record is exactly the root node of the tree. All my suggestion in previous posts just to find out what is the problem. Now let fix the problem as follow:
    Code:
    var taskStore = Ext.create("Gnt.data.TaskStore", {
        model: 'gantt.model.Task',
        storeId: 'taskStore',
        autoDestroy: true,
        autoLoad : false,
        autoSync : false,
        root: {
            text: 'root'
        },
        proxy    : {
            type : 'ajax',
            method: 'GET',
            api: {
                read:       'task/GetTask.action',
                create:     'task/CreateTask.action',
                destroy:    'task/DeleteTask.action',
                update:     'task/UpdateTask.action'
            },
            writer : new Ext.data.JsonWriter({
                //type : 'json',
                root : 'taskdata',
                encode : true,
                writeAllFields : true
            }),
            reader : new Ext.data.JsonReader({
                totalPropery: 'total',
                successProperty : 'success',
                idProperty : 'id',
                type : 'json',
                root: function (o) {
                    if (o.taskdata) {
                        return o.taskdata;
                    } else {
                        return o.children;
                    }
                }
            })
        },
        listeners: {
            rootchange: function(root){
                root.phantom = false;
            }
        }
    });
    ...
    {
        text: 'Add new Root Node',
        iconCls: 'icon-save',               
        handler: function () {
           taskStore.getRootNode().appendChild(new taskStore.model({
                Name: 'New Task',                            
                PercentDone: 60,
                StartDate : new Date(2011, 0, 30),
                Duration: 1.0,
                DurationUnit: 'd',
                leaf: true
            })
        );
        taskStore.sync();
    }

  10. #10
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
      0  

    Thumbs up

    @vietits

    thanks for your help. I had one question why does my code works perfectly sometime and why doesn't it work every time perfectly.

    my application works perfectly when I got the this.headerCt is undefined


    this.headerCt is undefined



    headers = this.headerCt.items.items in my ext-all-debug.js(line 74963).

    but when this error not given by my firebug console the data passed to server as
    Code:
    [{    "Id": null,    "Name": "",    "StartDate": null,    "EndDate": null,    "Duration": "",    "DurationUnit": "",    "PercentDone": "",    "ManuallyScheduled": false,    "Priority": 1,    "parentId": null,    "index": 0,    "depth": 0,    "checked": null}, {    "Id": null,    "Name": "Exodus",    "StartDate": "2011-01-30T00:00:00",    "EndDate": "2011-02-01T00:00:00",    "Duration": 1,    "DurationUnit": "d",    "PercentDone": 60,    "ManuallyScheduled": false,    "Priority": 1,    "parentId": null,    "index": 7,    "depth": 1,    "checked": null}]
    so what's the problem exactly I am not able to track it down. Why the error comes , but my output window is perfect. And when the error didn't come data passed in some illegal way.

    Yogendra Singh
    Sr. Programmer
    Kintudesigns.com

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •