PDA

View Full Version : delete Store on window close



rushi2440
7 Feb 2012, 1:56 AM
hi..

sencha forum member i am having one problem described below.

How can I destroy or delete the store when the popup window is close, I want to do that because the window loaded doesn't contain the updated data. So as soon as the window is closed the store will be deleted .

Again when the window popup it is created completely new, load all the Stores, Models and View associated with it.

I tried it but haven't yet successful any one having any idea, how can I solve it may suggest me

Yogendra Singh
Sr. Programmer

Kintudesigns.com

Farish
7 Feb 2012, 2:38 AM
window.on('hide', function() {
Ext.destroy(store);
});

Farish
7 Feb 2012, 2:39 AM
if you are loading the store when showing the window, then the window might appear before the store has finished loading causing old data to be displayed for some time. however, you may use the load event of the store to show the window.


store.on('load', function() {
window.show();
});

rushi2440
7 Feb 2012, 2:48 AM
thanks Farish

but the solution didn't work. It just call the destroy request of the store. And again when the window is loaded it contains the same old data only.

Everytime I popup the window it shows me the same old data. displayed for the first time. I want the Store to be destroyed not just to call the destroy request of the Store. Do you have any solution to my problem , so I can apply and get it solved soon.


Yogendra Singh
Sr. Programmer
Kintudesigns.com

Farish
7 Feb 2012, 2:51 AM
there is some problem in your code. if you post it, someone might be able to suggest something. i have many windows which are displaying data from stores and i dont need to destroy the stores.

Anyway, you can try:


store = null;

tvanzoelen
7 Feb 2012, 2:55 AM
Why not just clear the store before load?



clearStore: function(grid) {

if (grid.store.getCount() > 0) {
grid.store.removeAll();
grid.view.refresh();
}
},

rushi2440
7 Feb 2012, 3:10 AM
hi Farish

I am having one grid containing all the project information whose image is below

31434


when I double click the grid I am getting the Id and based on the Id, query is executed which gives me all detail information related to that Id. And I am showing that detail in my ganttChartPanel window whose image can be viewed below.

31435

Now after closing the ganttChartPanel window , again I double click on the grid second row, my Id is passed successfully but the my ganttChartPanel window comes with the same old data shown previously.

so i just thought of deleting or destroying the ganttChartPanel store . So might be my ganttChartPanel window shows me correct data according to the grid Id passed.

do you have any other solution I can try to get my work done. Actually there are two different Stores here one which shows the grid window and the other which shows the ganttChartPanel.

Farish
7 Feb 2012, 3:15 AM
what do u do when the window is closed? hide it or destroy it? (closeAction of the window). If its hidden and you are adding the grid again, it will be added to the same window. If you want to destroy all components of the window and create them anew, use this before you call the window popup:


if(window)
{
Ext.destroy(window);
window = null;
}

try one of the solutions above (store = null; or store.removeAll() )

rushi2440
7 Feb 2012, 4:27 AM
hi.. farish

I am creating the window using below code

Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: 450,
height: 350,
closeAction: 'hide',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,

listeners: {
hide: function() {
alert('hide');
}
},

initComponent: function() {
this.layoutConfig = {
align: 'stretch'
};
this.items = [
{
xtype: 'form',
items :[{
xtype: 'projectganttpanel',
height: 320,
anchor: '100%',
allowBlank: false
}]
}
];

this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
action: 'cancel'
}
];
this.callParent(arguments);

}
});


and my xtype projectganttpanel code is below mentioned

TaskPriority = {
Low : 0,
Normal : 1,
High : 2
};


var taskStore = Ext.create("Gnt.data.TaskStore", {
model: 'gantt.model.Task',
storeId: 'taskStore',
autoDestroy: true,
autoLoad : false,
autoSync : true,
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'
}
}
});




var start = new Date(2010, 0, 1),
end = Sch.util.Date.add(start, Sch.util.Date.MONTH, 30);

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',
'gantt.store.taskStore',
'gantt.store.dependencyStore'
],
leftLabelField: 'Name',
loadMask: true,
width: '100%',
height: '98%',
startDate: start,
endDate: end,
multiSelect: true,
cascadeChanges: true,
viewPreset: 'weekAndDayLetter',
recalculateParents: false,

// Add some extra functionality
plugins : [
Ext.create("Gnt.plugin.TaskContextMenu"),
Ext.create('Sch.plugin.TreeCellEditing', {
clicksToEdit: 1
}),
Ext.create('Gnt.plugin.Printable', {
printRenderer : function(task, tplData) {
if (task.isMilestone()) {
return;
} else if (task.isLeaf()) {
var availableWidth = tplData.width - 4,
progressWidth = Math.floor(availableWidth*task.get('PercentDone')/100);

return {
// Style borders to act as background/progressbar
progressBarStyle : Ext.String.format('width:{2}px;border-left:{0}px solid #7971E2;border-right:{1}px solid #E5ECF5;', progressWidth, availableWidth - progressWidth, availableWidth)
};
} else {
var availableWidth = tplData.width - 2,
progressWidth = Math.floor(availableWidth*task.get('PercentDone')/100);

return {
// Style borders to act as background/progressbar
progressBarStyle : Ext.String.format('width:{2}px;border-left:{0}px solid #FFF3A5;border-right:{1}px solid #FFBC00;', progressWidth, availableWidth - progressWidth, availableWidth)
};
}
},

beforePrint : function(sched) {
var v = sched.getSchedulingView();
this.oldRenderer = v.eventRenderer;
this.oldMilestoneTemplate = v.milestoneTemplate;
v.milestoneTemplate = printableMilestoneTpl;
v.eventRenderer = this.printRenderer;
},


afterPrint : function(sched) {
var v = sched.getSchedulingView();
v.eventRenderer = this.oldRenderer;
v.milestoneTemplate = this.oldMilestoneTemplate;
}
})
],
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' ]
}
}
],
taskStore: taskStore,
dependencyStore: dependencyStore,
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
})
);
}
},
buttons:[{
text: "Close",
id: "CloseButton",
handler: function(){
this.closeWindow();
},
scope: this
}]

});


based on double click on grid I popup the window containing the projectganttPanel. So can you please tell me how to I achieve the solution you had given with this.

Window is created by grid double click event and it has closeAction: 'hide'.


Yogendra Singh

Sr. Programmer

Kintudesigns.com

Farish
7 Feb 2012, 6:26 AM
I didnt see where the double click event is. Also give this a try:


store.destroyStore();

vietits
7 Feb 2012, 4:05 PM
Reading your code, I see that each time the projectGanttwindow window is opened, you always create the same two stores (taskStore, dependencyStore) and it seems that they don't have any relation with the project grid outside. So these stores will be loaded with the same data regardless of what you clicked on the project grid. How do you pass params you received from the project grid to the projectGanttwindow?

rushi2440
7 Feb 2012, 8:56 PM
hi. thanks for your response

on grid double click I am calling below function


editProject: function(grid, record) {
console.log('Double clicked on ' + record.get('id'));
Ext.Ajax.request({
url : 'projecttask/GetprojectTasks.action',
method: 'GET',
params: {'id':record.get('id')},
scope: this, // add the scope as the controller
success : function(response, opts) {
this.getProjectGanttwindow().show();
},
failure : function(response, opts) {
alert('Export file failed!')
}
});



with the success as response I am opening the projectGanttWindow which contains the projectGanttPanel

and my projectGanttWindow and projectGanttPanel code is provide above. and my controller projectGanttwindow code is below mentioned


Ext.define('gantt.controller.projectmgt.ProjectMgtController', {
extend: 'Ext.app.Controller',

stores: ['Projects'],
models: ['Project', 'Task', 'Dependency'],
views: ['projectmgt.projectMain', 'projectmgt.projectFilemgt', 'projectmgt.projectList', 'projectmgt.projectAdd', 'projectmgt.projectEdit' ,'projectmgt.projectGanttwindow', 'projectmgt.projectGanttpanel'],

});


from controller i received the doubleclick event on grid and execute the editProject function and then on basis of successfull response I am opening the popup window projectGanttWindow which contains the projectGanttPanel.

For the first time I get the correct output but again after I do click the another grid row it popup but with the same data only. So provide me some solution which I can use to get my problem solved.


Yogendra Singh

Sr. Programmer

Kintudesigns.com

vietits
7 Feb 2012, 10:32 PM
So,
When you receive itemdblclick event on grid, you receive the ID of the respective record.
Using Ext.Ajax.request, you call 'projecttask/GetprojectTasks.action' and pass it ID you received from step 1.
On success return of Ext.Ajax.request, you show the projectGanttwindow window by calling this.getProjectGanttwindow().show().
I have some questions:
What does the getProjectGanttwindow() do? Does it create a new window or return the window object that has been created before?
What is the purpose of calling 'projecttask/GetprojectTasks.action' with the ID you received from double click on the grid?
I still don't see the data relation between double click action on grid and the projectGanttWindow window except showing the window.

rushi2440
7 Feb 2012, 10:54 PM
thanks for your response my controller looks like below code


Ext.define('gantt.controller.projectmgt.ProjectMgtController', {
extend: 'Ext.app.Controller',

stores: ['Projects'],
models: ['Project', 'Task', 'Dependency'],
views: ['projectmgt.projectMain', 'projectmgt.projectFilemgt', 'projectmgt.projectList', 'projectmgt.projectAdd', 'projectmgt.projectEdit' ,'projectmgt.projectGanttwindow', 'projectmgt.projectGanttpanel'],

refs: [{
ref: 'projectFilemgt',
autoCreate: true,
selector: 'projectfilemgt',
xtype: 'projectfilemgt'
},{
ref: 'projectList',
autoCreate: true,
selector: '#projectlist',
xtype: 'projectlist'
},{
ref: 'projectAdd',
autoCreate: true,
selector: 'projectadd',
xtype: 'projectadd'
},{
ref: 'projectGanttwindow',
autoCreate: true,
selector: 'projectganttwindow',
xtype: 'projectganttwindow'
},{
ref: 'projectEditForm',
selector: 'projecteditwindow form'
},{
ref: 'projectGanttwindowForm',
selector: 'projectganttwindow form'
},{
ref: 'projectEdit',
autoCreate: true,
xtype: 'projecteditwindow',
selector: 'projecteditwindow'
},{
ref: 'projectGanttpanel',
selector: 'projectGanttpanel',
xtype: 'projectganttpanel',
autoCreate: true
}],

init: function() {
this.control({
'projectadd button[action=show-gantt-view]': {
click: this.createProjectGanttpanel
},
'projectlist': {
itemdblclick: this.editProject
},
'#projectlist actioncolumn[id="projecteditrecord"]': {
click: this.onEditProject
},
'projectganttwindow button[action=cancel]':{
click:this.onWinUserClose
}
});
},

editProject: function(grid, record) {
console.log('Double clicked on ' + record.get('id'));
Ext.Ajax.request({
url : 'projecttask/GetprojectTasks.action',
method: 'GET',
params: {'id':record.get('id')},
scope: this, // add the scope as the controller
success : function(response, opts) {
this.getProjectGanttwindow().show();
},
failure : function(response, opts) {
alert('Export file failed!')
}
});


},

onEditProject: function(grid, no, rowindex,colindex,temp) {

var rec = this.getProjectList().store.getAt(rowindex);
var actionid = grid.getCellByPosition( {row:rowindex,column:colindex } ).id;
this.getProjectEdit().animateTarget=actionid;
this.getProjectEdit().editform=1;
this.getProjectEditForm().getForm().reset();
console.log(rec);
this.getProjectEditForm().loadRecord(rec);
this.getProjectEdit().show();

}
});


getProjectGanttwindow() is just a getter method of view projectGanttwindow to show the projectGanttWindow.

and projecttask/GetprojectTasks.action is an ajax request I am making to pass my selected grid Id to server side and get stored in a global variable named projectId. And when the window get created again it calls the read method of proxy which fires the query against database based on projectId and give me updated data.

Actually there is One-To-Many relationship between them. Actually grid has a Project having relationship with the Many Task which comes inside the window with the projectGanttPanel having two stores taskStore and dependencyStore . I just want the window should be create and should contain updated data based on the response.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
7 Feb 2012, 11:40 PM
Ah, I see. So you pass projectId to the projectGanttWindow the by storing it on server side.

Now the problem maybe due to the two stores don't load data again. This maybe due to the projectGanttWindow doesn't be re-created when you call this.getProjectGanttwindow().

Let try by replacing autoCreate: true by forceCreate: true for your ref to make sure the projectGanttWindow is re-created when you call this.getProjectGanttwindow():


},{
ref: 'projectGanttwindow',
//autoCreate: true,
forceCreate: true,
selector: 'projectganttwindow',
xtype: 'projectganttwindow'
},{

vietits
7 Feb 2012, 11:51 PM
From your defining of gantt.view.projectmgt.projectGanttwindow, i see that you use closeAction: 'hide'. It means that the window doesn't be destroyed when you close it. So the second time you refer to it by calling this.getProjectGanttwindow(), it won't be re-created then the two stores won't load data again.


Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: 450,
height: 350,
closeAction: 'hide',

rushi2440
8 Feb 2012, 12:33 AM
thanks for your response

I tried your idea of store.load({params: {projectId: projectId}}). and changed my code accordingly my editProject: function is defined below


var store = Ext.data.StoreManager.lookup('taskStore');
console.log('After store ');
var p = store.getProxy();
console.log('After proxy ');
store.load({
params:{'id':record.get('id')},
scope: this,
callback: function(r,options,success) {
if(success == true) {
console.log('Hello');
this.getProjectGanttwindow().show();
}
else {
alert("failed");
}
}
});


but it calls the read of the taskStore
Ext.create("Gnt.data.TaskStore", { model: 'gantt.model.Task',
storeId: 'taskStore',
autoDestroy: true,
autoLoad : false,
autoSync : true,
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;
}
}
})
}
});


with null value and again it makes the request to read: 'task/GetTask.action'.

with first request it passes the null value and with another request it passes the Id properly. And then my popup window is shown properly but after closing the window again when I again clicked the row grid it fires the update query then at last it shows me the popup window with empty data.

you can also view my detailed question posted at the bryntum forum whose gantt chart I want to call with the popup window link is http://bryntum.com/forum/viewtopic.php?f=16&t=1594 .

I am so much confused how to get rid of this problem. I had tried a lot but don't know nothing is happening. Have a look at my question and if you had any solution please guide me so I can try to get my problem solved.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
8 Feb 2012, 4:50 AM
1. taskStore calls read action (task/GetTask.action) twice: one with id = null and one with correct id.

I think the first call happens when you create the store. I don't know why this happens though you have set autoLoad to false. You must look at the code of Gnt.data.TaskStore to check why. This call is not expected.

The second call with correct Id happens when you call taskStore.load(). This is expected.

2. After closing the window and open it again when clicking the row grid it fires the update query then at last it shows the popup window with empty data.

It seems that Gnt.data.TaskStore is extended from Ext.data.TreeStore? If this is right and if you use Ext 4.0.7 or less then you will encounter problem when calling taskStore.load({..}) method. I encountered this problem in the past, but the store called destroy action instead of update action. You can refer to this problem and how to fix it here: Reloading Treestore ... (http://www.sencha.com/forum/showthread.php?151211-Reloading-TreeStore-adds-all-records-to-store-getRemovedRecords&highlight=TreeStore)

vietits
8 Feb 2012, 5:27 AM
Hi rushi2440,

Below is my suggestion basing on your code:

1. Modify gantt.view.projectmgt.projectGanttwindow


Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: 450,
height: 350,
closeAction: 'hide',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null, // this will be set before showing window

listeners: {
hide: function() {
alert('hide');
}
},
initComponent: function() {
var me = this;


me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'form',
items :[{
xtype: 'projectganttpanel',
height: 320,
anchor: '100%',
allowBlank: false
}]
}];
me.buttons = [{
text: 'Save',
action: 'save'
},{
text: 'Cancel',
action: 'cancel'
}];
me.callParent(arguments);

me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},
onBeforeShow: function(){
var projectId = this.projectId;


if(projectId != null){
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params:{'id': projectId}
});

store = Ext.data.StoreManager.lookup('dependencyStore');
store.load({
params:{'id': me.projectId}
});
}
}
});


2. Modify the editProject in the gantt.controller.projectmgt.ProjectMgtController:


editProject: function(grid, record) {
var win = this.getProjectGanttwindow();
win.projectId = record.get('id');
win.show();
}


3. Avoid using objects on the shared prototype. For example, with gantt.view.projectmgt.projectGanttpanel class, add initComponent method and move all the config that use objects into it


Ext.define('gantt.view.projectmgt.projectGanttpanel', {
extend: "Gnt.panel.Gantt",
....
initComponent: function(){
var me = this;
var taskStore = Ext.create("Gnt.data.TaskStore", {
....
});
var dependencyStore = Ext.create("Ext.data.Store", {
....
});
...
Ext.apply(me, {
taskStore: taskStore,
dependencyStore: dependencyStore,
plugins: [
Ext.create("Gnt.plugin.TaskContextMenu"),
Ext.create('Sch.plugin.TreeCellEditing', {
clicksToEdit: 1
}),
....
],
...
});
me.callParent(arguments);
},
...
});

rushi2440
8 Feb 2012, 9:49 PM
hi.. vietits

thanks for your solution. It worked well but has one problem. Actually every time I show the window it fires two request to the server. I am attaching the image snap , the process happens after I double click the grid.

31516

as soon as I double click the grid two request is made 1st with id as null and the 2nd containing the Id. by the function name onBeforeShow . So I think the load method called first then ours onBeforeShow is being called.
So It is necessary to make double request to server. So any Idea how I make to on only one request to my server ?

Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
8 Feb 2012, 11:29 PM
I don't know why the read action is called twice each time you show the window. You should debug or do something to determine when each request is fired, especially the first request with id as null? Also you should re-post your updated code for reference.

rushi2440
9 Feb 2012, 12:25 AM
hi. vietits

my updated code for projectganttpanel is

var start = new Date(2010, 0, 1),
end = Sch.util.Date.add(start, Sch.util.Date.MONTH, 30);


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',
'gantt.store.taskStore',
'gantt.store.dependencyStore'
],
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;
var taskStore = Ext.create("Gnt.data.TaskStore", {
model: 'gantt.model.Task',
storeId: 'taskStore',
autoDestroy: true,
autoLoad : false,
autoSync : true,
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
}),
Ext.create('Gnt.plugin.Printable', {
printRenderer : function(task, tplData) {
if (task.isMilestone()) {
return;
} else if (task.isLeaf()) {
var availableWidth = tplData.width - 4,
progressWidth = Math.floor(availableWidth*task.get('PercentDone')/100);


return {
// Style borders to act as background/progressbar
progressBarStyle : Ext.String.format('width:{2}px;border-left:{0}px solid #7971E2;border-right:{1}px solid #E5ECF5;', progressWidth, availableWidth - progressWidth, availableWidth)
};
} else {
var availableWidth = tplData.width - 2,
progressWidth = Math.floor(availableWidth*task.get('PercentDone')/100);


return {
// Style borders to act as background/progressbar
progressBarStyle : Ext.String.format('width:{2}px;border-left:{0}px solid #FFF3A5;border-right:{1}px solid #FFBC00;', progressWidth, availableWidth - progressWidth, availableWidth)
};
}
},


beforePrint : function(sched) {
var v = sched.getSchedulingView();
this.oldRenderer = v.eventRenderer;
this.oldMilestoneTemplate = v.milestoneTemplate;
v.milestoneTemplate = printableMilestoneTpl;
v.eventRenderer = this.printRenderer;
},


afterPrint : function(sched) {
var v = sched.getSchedulingView();
v.eventRenderer = this.oldRenderer;
v.milestoneTemplate = this.oldMilestoneTemplate;
}
})
],


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

]
});


me.callParent(arguments);
}
});


my code for the projectganttwindow

Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: 450,
height: 350,
closeAction: 'destroy',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null,

listeners: {
hide: function() {
alert('hide');
console.log('Done destroying');
}
},

initComponent: function() {
var me = this;
me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'projectganttpanel',
allowBlank: false
}];

me.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
action: 'cancel'
}
];
me.callParent(arguments);

me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},

onBeforeShow: function() {
var projectId = this.projectId;
console.log('BEFOR SHOW ::'+projectId);
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params: {'id': projectId}
});

store = Ext.data.StoreManager.lookup('dependencyStore');
store.load({
params:{'id': projectId}
});
}
}
});

and the editProject function is

editProject: function(grid, record) {
console.log('Double clicked on ' + record.get('id'));
var win = this.getProjectGanttwindow();
win.projectId = record.get('id');
win.show();
}


all this are my update code I am using to popup the projectGanttWindow which contains the projectGanttpanel. but still it fires to server request I mentioned in my previous question. Help me to find what I am doing here wrong which makes this, and find the necessary solution to get it solved.

Thank you.

Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
9 Feb 2012, 6:06 AM
I think the code is ok. Now you should determine where is the place that generates the request with id as null.

1. Temporary comment out the line of code that call store.load() to see whether or not the request with id as null happens.


onBeforeShow: function() {
var projectId = this.projectId;
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
// store.load({

// params: {'id': projectId}
// });


store = Ext.data.StoreManager.lookup('dependencyStore');
store.load({
params:{'id': projectId}
});
}
}

2. If the request is not generated then you should go inside the code of load() to find out the problem. If the request is still generated, then try the following to see when this request is generated.


onBeforeShow: function() {
var projectId = this.projectId;
console.log('onBeforeShow 1');
if(projectId != null) {
console.log('onBeforeShow 2');
var store = Ext.data.StoreManager.lookup('taskStore');
console.log('onBeforeShow 3');

store.load({
params: {'id': projectId}
});
console.log('onBeforeShow 4');


store = Ext.data.StoreManager.lookup('dependencyStore');
store.load({
params:{'id': projectId}
});
}
}

rushi2440
9 Feb 2012, 11:08 PM
hi vietits thanks for your support


please have a look to the image snap I am attaching below
31568

first I commented my
store.load({ params: {'id': projectId}
});
but still it fires the request with the id as null again I tried your second option I had set the console.log at different point you specified.


before my any console.log gets printed to browser console request is done with the id as null and after third console.log my request to server is made with id value.


I just want to make only one request to be made to server which contains the id value.


Vietits I am having one question when my ganttPanel is loaded the taskStore is defined as below

var taskStore = Ext.create("Gnt.data.TaskStore", {
model: 'gantt.model.Task',
storeId: 'taskStore',
autoDestroy: true,
autoLoad : false,
autoSync : true,
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;
}
}
})
}
});



so might be possible that the proxy read is called first every time. If the answer is yes then , how can I override the proxy ? I am stuck here , help me if you had any solution that I can use it .


Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
9 Feb 2012, 11:29 PM
So with your running result, the reading request with id as null is not by the taskStore.load().

Looking at your defining of gantt.view.projectmgt.projectGanttwindow I see that you set closeAction to 'destroy', it means that each time you close the projectGanntwindow, it will be destroyed and when you re-open it will be created again. So the taskStore will also be re-created. From this I suppose that the loading request with id as null is from creating the taskStore. If this is true I don't know why creating taskStore causes loading though you have set autoLoad to false. Because taskStore is created from Gnt.data.TaskStore so you have to check this class to see why.

It's just my assumption, let have a try with setting closeAction to 'hide' and watching the result when you re-opening the projectGanntwindow.

rushi2440
10 Feb 2012, 12:15 AM
hi.. vietits

I am using Gnt.data.TaskStore class defined by bryntum ext-gantt, so I can't make any modification with it.
So is there any way I can override the store defined in taskStore and dependencyStore or

I can assign the store value from my controller like we assign the projectId from my controller and using it in ganttWindow. Any idea ??



Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
10 Feb 2012, 12:30 AM
Have you tried settting closeAction to 'hide' and watch the result of re-opening projectGanttwindow?

rushi2440
10 Feb 2012, 12:48 AM
Hi,..
vietits

I tried settting closeAction to 'hide' and I get the below output in my firebug console.
When I click the grid's first row, following output appear at my browser window with firebug console
31569

When I click the grid's second row, following output appear at my browser window with firebug console
31570

When I click the grid's first row again, following output appear at my browser window with firebug console
31571
When I click the grid's second row again, following output appear at my browser window with firebug console
31572

When I first row double click the grid it makes two request to server . After closing it I click the second row of the grid, it fires so many updates request even though I haven't made any changes there but the window shows with correct data.

Now again after closing the window I clicked the first row of the grid it makes only one request to server , after closing that window I double click the third row of grid and same things happens lot's of update request is made even though I haven't changed any data in the window.

I am not able to understand why I makes so many update request instead of any changes made in the ganttPanel.


Yogendra Singh

Sr. Programmer

Kintudesigns.com

vietits
10 Feb 2012, 1:10 AM
So, I guess that:

1. Gnt.data.TaskStore always generates loading request when it is created though you have set autoLoad to false.

2. When the tastStore reloads, for some reasons it causes the current records in the store to be updated and this generates the update requests because you set autoSync to true.

I think the problem is in Gnt.data.TaskStore. Which Ext version are you using?

rushi2440
10 Feb 2012, 1:42 AM
hi vietits

thanks for your support
I am using ext-4.0.2a-commercial version. and the ext-gantt version is Bryntum-2.0-45d.

After looking propery my code for Gnt.data.TaskStore is mentioned below and Gnt.model.Task is same as gantt.model.Task


Ext.define("Gnt.data.TaskStore",
{
extend:"Ext.data.TreeStore",requires:["Gnt.model.Task","Gnt.data.Calendar"],model:"Gnt.model.Task",sorters:"StartDate",calendar:null,dependencyStore:null,constructor:function(a)
{
this.addEvents("root-fill-start","root-fill-end");
a=a||
{
};
if(!a.calendar)
{
a.calendar=new Gnt.data.Calendar()
}
this.callParent([a])
}
,onNodeAdded:function(a,b)
{
if(!b.isRoot())
{
b.normalize()
}
this.callParent(arguments)
}
,setRootNode:function()
{
var a=this;
this.tree.setRootNode=Ext.Function.createInterceptor(this.tree.setRootNode,function(b)
{
Ext.apply(b,
{
calendar:a.calendar,dependencyStore:a.dependencyStore
}
)
}
);
this.callParent(arguments);
delete this.tree.setRootNode
}
,fillNode:function(c,a)
{
if(c.isRoot())
{
this.fireEvent("root-fill-start",this,c,a)
}
var b=this.callParent(arguments);
if(c.isRoot())
{
this.fireEvent("root-fill-end",this,c,a)
}
return b
}
,getById:function(a)
{
return this.tree.getNodeById(a)
}
,setDependencyStore:function(b)
{
this.dependencyStore=b;
var a=this.getRootNode();
if(a)
{
a.dependencyStore=b
}
}
,setCalendar:function(b)
{
this.calendar=b;
var a=this.getRootNode();
if(a)
{
a.calendar=b
}
}
}
);


code for gantt.model.Task is

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'
}, ]
});


after changing autoSynn: 'true' update request gone away. Now the one thing more to do is to make only one request to server for the first time also .

Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
10 Feb 2012, 2:31 AM
Ah, I don't have much experience with Ext 4.0.2a. I am using Ext 4.0.7.

1. Looking at the code of Gnt.data.TaskStore I don't see any thing can cause the reading request to be generated at the time of creating store. I don't know why!

2. Watching your screenshots I see:
The first time you open the projectGanttwindow, it generates two loading requests (one from creating taskStore - I guess, and one from calling taskStore.load() and the window shows correct data.
The second time you open, it generates a lot of updating requests and the window does not show data.
The third time, it generates one loading request and the window show correct data.
The fourth time, it generates a lot of updating requests and the window show no data.
It seems that this is due to a bug of Ext.data.TreeStore() when calling its load() method. Do you see any error at steps 2, 4 above?

3. With your case, to make one request to the server for the first time you should handle the beforeload of the store and return false to cancel the load request if this is invalid request.

rushi2440
10 Feb 2012, 2:44 AM
hi. vietits

The second time you open, it generates a lot of updating requests and the window does not show data.
The fourth time, it generates a lot of updating requests and the window show no data.
at both the statement gives me correct result. Actually data is not available related to that projectId which i am passing with grid double click event. So everything is correct, just because there are two request make to server and lots of update in my headache.


As you said I can use the beforeload of the store to make one request to server. But what for this lots of update request ? How I can get rid of that ? Any suggestion


Yogendra Singh
Sr. Programmer
Kintudesigns.com

vietits
10 Feb 2012, 3:13 AM
The update requests happen when loading the store and this maybe due to Ext.data.TreeStore.load(). So you can avoid this by avoiding to reload the store. This is done by setting the closeAction of the window to 'destroy'. This way, each time you open the window, it will be re-created and then the store will be re-created too. Then you ignore the invalid loading request by handling the beforeload event of the store.

rushi2440
10 Feb 2012, 4:00 AM
hi vietits

I am able to get the beforeload event of the store but don't know how to return false to cancel the load request if this is invalid request.

please guide me how I can achieve this. So that the first request get cancelled every time and only one server request is made.


Yogendra Singh
Sr. Programmer
Kintudesigns.com

rushi2440
10 Feb 2012, 4:19 AM
hi. vietits

I tried using below code and it works perfectly. Now only one request is made to server


me.on({
scope: me,
beforeload: function(store,records,options) {
if(records.params['id'] != null)
{
return true;
}
else
{
return false;
}
}
});


thanks for your precious support.

Yogendra Singh
Sr. Programmer
Kintudesigns.com