У меня есть одна сетка, содержащая все детали проекта. Эта сетка имеет свой собственный контроллер, модели, хранилища. Когда я дважды щелкаю по сетке, она передает идентификатор моей стороне сервера.
На основании переданного идентификатора я выполняю некоторый запрос к своей базе данных, а затем возвращаю данные обратно клиенту в формате JSON. И на основании успешного ответа я показываю другое окно, которое содержит все данные, возвращаемые с сервера клиенту.
Но главная проблема в том, что всплывающее окно не содержит обновленных данных. Означает, впервые, когда я нажал, идентификатор сетки прошел правильно, и окно создано правильно. Теперь после закрытия этого всплывающего окна и снова, когда я щелкаю сетку, появляется всплывающее окно, но содержащиеся в нем данные не являются обновленными данными.
Итак, что мне делать, чтобы в моем окне отображались обновленные данные на основе переданного идентификатора сетки.
при двойном щелчке по сетке я выполняю приведенный ниже код
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!')
}
});
и мой код ProjectGanttWindow ниже
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 содержит xtype projectganttpanel код ниже
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
})
);
}
}
});
Я использую ExtJS 4.0.2a mvc и JAVA в качестве технологии на стороне моего сервера