how to prevent store load from making twice request

[rushi2440]

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

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

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

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

[mitchellsimoens]

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.

[rushi2440]

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.33547my firebug has all the data that I want still my task panel view is empty.my taskPanel code is given below
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
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
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
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