1. #1
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
    rushi2440 is on a distinguished road

      0  

    Default Unanswered: how to prevent store load from making twice request

    Unanswered: how to prevent store load from making twice request


    Hi..

    sencha forum member I am having one problem with the store

    I want to make request to server, with the beforeshow function

    I am having one window and in it I am loading one panel. My window code is below
    Code:
    Ext.define('rms.view.projectmgt.taskAdd' ,{
        extend: 'Ext.Window',
        alias : 'widget.taskaddwindow',
         id: 'taskaddwindow',
        title: 'Task Management Window',
        width: '85%',
        height: '85%',
        closeAction: 'destroy',
        closable : true,
        modal: true,
        constrain: true, 
        maximizable: true,  
        stateful: false,
        projectid: null, // this will be set before showing window
        layout: 'border',
        
        initComponent: function() {    
            
            this.layoutConfig = {
                align: 'stretch'
            };
            this.items = [
                {
            region: 'center',
                        xtype: 'taskpanel',
                        width: '85%',
                        height: '85%'
                }
            ];
            
           this.on({
                scope: this,
                beforeshow: this.onBeforeShow
            });
            this.callParent(arguments);
        },
        onBeforeShow: function() {
            var projectid = this.projectid;
            console.log('BEFOR SHOW ::'+projectid);
            if(projectid != null) {
                var store = Ext.data.StoreManager.lookup('task');
                store.load({
                    params: {'projectid': projectid},
                    scope: this,
                    callback: function(r,options,success) {  alert(r)} //callback
                });
            }
        }
    });
    in my window I am having one variable projectid as null . I am assigning the projectid value from the controller with the below code
    Code:
    addTask:function(grid,no,rowindex,colindex,temp) {
            var rec = grid.store.getAt(rowindex);
            var projectid = rec.get('id');
            alert('Add task button pressed'+projectid);
            
            var win = this.getTaskAdd();
            win.projectid = projectid;
            win.show();
            
        },
    and my taskPanel code is below
    Code:
    var start   = new Date(2012, 2, 26),
    end     = Sch.util.Date.add(start, Sch.util.Date.MONTH, 30);
    
    
    var combo = new Ext.form.ComboBox({
        store: new Ext.data.ArrayStore({
            id: 0,
            fields: [
                'Id',
                'displayText'
            ],
            data: [[0, 'Low'], [1, 'Normal'], [2, 'High']]
        }),
        triggerAction: 'all',
        mode: 'local',
        valueField: 'Id',
        displayField: 'displayText'
    });
    
    
    TaskPriority = {
            Low : 0,
            Normal : 1,
            High : 2
    };
    
    
    Ext.define('rms.view.projectmgt.taskPanel', {
        extend: "Gnt.panel.Gantt",
        id: 'taskpanel',
        alias: 'widget.taskpanel',
        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,
                  startDate: start,
                  endDate: end,
                  multiSelect: true,
                  cascadeChanges: true,
                  viewPreset: 'weekAndDayLetter',
                  recalculateParents: false,
                  showTodayLine               : true,
                  showBaseline                : true,
                  
                  
                  initComponent: function() {
                    var me = this;    
                    me.on({
                        scope: me,
                        beforeload: function(store,records,options) {
                            console.log('BEFORE LOAD YAAR panel'+records.params);
                            
                              if(records.params['id'] != null)
                              {
                                  return true;
                                 
                              }
                              else
                              {
                                  return false;
                              }
                        }            
                    });
                    
                                    
                        var taskStore = Ext.create('rms.store.task');
                        var dependencyStore = Ext.create('rms.store.dependency');
    
    
                         Ext.apply(me, {
                             taskStore: taskStore,
                             dependencyStore: dependencyStore,
                            
                                  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';
                                             }
                                         },
                                        field: combo
                                     },
                                     {
                                          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: 'CRUD OPERATION',
                                           columns: 2,
                                           defaults: {
                                                scale: 'small'
                                            },
                                           items: [{ 
                                                       text: 'Save',
                                                        iconCls: 'icon-save',
                                                        handler: function () {
                                                            taskStore.sync();
                                                        }
                                               },
                                               {
                                                  text: 'Add new Root Node',
                                                   iconCls: 'icon-new',
                                                   handler: function () {
                                                   taskStore.getRootNode().appendChild(new taskStore.model({
                                                       Name: 'New Task',                            
                                                       PercentDone: 60,
                                                       StartDate : new Date(2012, 0, 30),
                                                       Duration: 1.0,
                                                       DurationUnit: 'd',
                                                       leaf: true,
                                                       
                                                   })
                                                        );
                                                   taskStore.sync();
                                                   }
                                               },{
                                                    text : 'Reload Task',
                                                    iconCls : 'icon-reload',
                                                    scope : this,
                                                    handler : function() {
                                                       Ext.data.StoreManager.lookup('task').load();
                                                    }
                                                }
                                           ]}
                                ]
                                  
                         });
                         
                            me.callParent(arguments);
    
    
            }     
    });
    but don't know when the controller assigns the projectid value to the window, and then the beforeShow function is called it makes two twice request to server

    first with projectid as null and the other with projectid I am assigning.

    please suggest me some solution what's wrong with the above code and so I can solve it soon as possible.


    Yogendra Singh
    Sr. Programmer
    Kintudesigns.com

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You should really only have one spot for the store load. Moreover, you can check to see if the store is loading via the isLoading method.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Location
    Surat, Gujarat, India
    Posts
    126
    Vote Rating
    0
    rushi2440 is on a distinguished road

      0  

    Default taskpanel view didn't show the data as per the json value mapped to taskmodel

    taskpanel view didn't show the data as per the json value mapped to taskmodel


    ok I get it solved now only one request is made to server and I am able to get the correct response from server.But still my taskPanel not showing me the data. My taskPanel view is empty like below screen shot.taskpanel.jpgmy firebug has all the data that I want still my task panel view is empty.my taskPanel code is given below
    Code:
    var start   = new Date(2012, 2, 26),end     = Sch.util.Date.add(start, Sch.util.Date.MONTH, 30);var combo = new Ext.form.ComboBox({    store: new Ext.data.ArrayStore({        id: 0,        fields: [            'Id',            'displayText'        ],        data: [[0, 'Low'], [1, 'Normal'], [2, 'High']]    }),    triggerAction: 'all',    mode: 'local',    valueField: 'Id',    displayField: 'displayText'});TaskPriority = {       Low : 0,       Normal : 1,       High : 2};Ext.define('rms.view.projectmgt.taskPanel', {   extend: "Gnt.panel.Gantt",   id: 'taskpanel',   alias: 'widget.taskpanel',   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,             startDate: start,             endDate: end,             multiSelect: true,             cascadeChanges: true,             viewPreset: 'weekAndDayLetter',             recalculateParents: false,             showTodayLine               : true,             showBaseline                : true,                                       initComponent: function() {            var me = this;               me.on({               scope: me,               beforeload: function(store,records,options) {                  console.log('BEFORE LOAD YAAR panel'+records.params);                                         if(records.params['id'] != null)                       {                          return true;                                                }                       else                       {                          return false;                       }                 }                     });                                                   var taskStore = Ext.create('rms.store.task');               var dependencyStore = Ext.create('rms.store.dependency');                Ext.apply(me, {                        taskStore: taskStore,                        dependencyStore: dependencyStore,                                                    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';                                        }                                    },                                   field: combo                                },                                {                                     xtype       : 'booleancolumn',                                     width       : 50,                                                                          header      : 'Manual',                                                                          dataIndex   : 'ManuallyScheduled',                                                                          field       : {                                          xtype   : 'combo',                                         store   : [ 'true', 'false' ]                                     }                                }                             ],                            tooltipTpl: new Ext.XTemplate(                                 '{Name}',                                   '
    Start: {[Ext.Date.format(values.StartDate, "y-m-d")]}
    End: {[Ext.Date.format(Ext.Date.add(values.EndDate, Ext.Date.MILLI, -1), "y-m-d")]}
    Progress: {PercentDone}%
    ' ).compile(), tbar: [{ xtype: 'buttongroup', title: 'CRUD OPERATION', columns: 2, defaults: { scale: 'small' }, items: [{ text: 'Save', iconCls: 'icon-save', handler: function () { taskStore.sync(); } }, { text: 'Add new Root Node', iconCls: 'icon-new', handler: function () { taskStore.getRootNode().appendChild(new taskStore.model({ Name: 'New Task', PercentDone: 60, StartDate : new Date(2012, 0, 30), Duration: 1.0, DurationUnit: 'd', leaf: true, }) ); taskStore.sync(); } },{ text : 'Reload Task', iconCls : 'icon-reload', scope : this, handler : function() { Ext.data.StoreManager.lookup('task').load(); } } ]} ] }); me.callParent(arguments); } });
    my taskStore is given below
    Code:
    Ext.define('rms.store.task', {	extend: 'Gnt.data.TaskStore',	model: 'rms.model.taskModel',	storeId: 'taskStore',	autoLoad : true,    autoSync : true,	proxy       : {        type : 'ajax',        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;                }            }        })    }});
    and finally my taskModel is
    Code:
    Ext.define('rms.model.taskModel', {	extend : "Gnt.model.Task",	fields : [ 	           { name : 'Id', type : 'int', useNull : true, mapping : 'id' }, 	           { 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 on my taskWindow which contains the taskPanel I am having onBeforeShow function whose code is given below
    Code:
    Ext.define('rms.view.projectmgt.taskAdd' ,{	extend: 'Ext.Window',    alias : 'widget.taskaddwindow', 	id: 'taskaddwindow',    title: 'Task Management Window',    width: '85%',	height: '85%',	closeAction: 'destroy',	closable : true,	modal: true,	constrain: true, 	maximizable: true,  	stateful: false,	projectid: null, // this will be set before showing window	layout: 'border',	    initComponent: function() {			        this.layoutConfig = {            align: 'stretch'        };        this.items = [            {            		region: 'center',                    xtype: 'taskpanel',            		width: '85%',    				height: '85%'            }        ];               this.on({			scope: this,			beforeshow: this.onBeforeShow		});                this.callParent(arguments);		    },        onBeforeShow: function() {    	var projectid = this.projectid;				//here projectid value is 1    	if(projectid != null) {    		Ext.Ajax.request({    			url: 'task/GetTask.action',    			method: 'GET',    			params: {'projectid':projectid},    			scope: this,    			callback: function(options, success, response) {    				console.log('RESPONSE FROM SERVER :'+response);    			}    		});    		    		    	}    }});
    Don't able to understand what's going wrong here, why the taskPanel view is empty.Please suggest me what's wrong is there with my code and help me solve it soon.Yogendra SinghSr. ProgrammerKintudesigns.com

Thread Participants: 1

Tags for this Thread