问题
I am having one grid containing all project details. This grid has its own controller, models, stores. When I double click on the grid it passes the id to my server side.
Based on the id passed I execute some query to my database and then returned the data back to client in JSON format. And based on successful response I show another window, which contains all the data returned back from server to client.
But the main problem is that the window popup doesn't contain the updated data. Means for the first time when I clicked the grid Id passed correctly and the window is created correctly. Now after closing that popup window and again when I clicked the grid, window popup comes but the data contained in it is not updated data.
So what should I do so my window shows me the updated data, based on the grid Id passed.
on double click the grid i execute the below code
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!')
}
});
and my ProjectGanttWindow code is below
Ext.define('gantt.view.projectmgt.projectGanttwindow', {
extend: 'Ext.window.Window',
alias: 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform: 1,
id: 'projectganttwindow',
title: 'Gantt Panel Window',
width: 450,
height: 350,
closeAction: 'hide',
flex:1,
modal: true,
constrain: true,
closable : true,
maximizable: true,
stateful: false,
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'projectganttpanel',
width: '100%',
height: '98%'
}]
});
this.callParent(arguments);
}
});
my ProjectGanttWindow contains xtype projectganttpanel code is below
TaskPriority = {
Low : 0,
Normal : 1,
High : 2
};
var taskStore = Ext.create("Gnt.data.TaskStore", {
model: 'gantt.model.Task',
storeId: 'taskStore',
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,
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);
//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',
'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(2012, 0, 30),
Duration: 1.0,
DurationUnit: 'd',
leaf: true
})
);
}
}
});
I am using ExtJS 4.0.2a mvc and JAVA as my server side technology
回答1:
A few questions:
- Are you saving the data before closing the window?
- Using Firebug or similar, do you see the save happening?
- Do you see the second request going to the server and returning?
- Is your server properly saving the data?
来源：https://stackoverflow.com/questions/9156816/window-not-showing-the-updated-data-based-on-grid-row-double-clicked