窗口没有显示基于网格行双击的更新数据 [英] window not showing the updated data based on grid row double clicked

问题描述

我有一个包含所有项目细节的网格。 这个网格有自己的控制器，模型，商店。当我双击网格时，它将ID传递给我的服务器端。

根据传递的id，我对数据库执行一些查询，然后以JSON格式将数据返回给客户端。根据成功的响应，我将显示另一个窗口，其中包含从服务器返回给客户端的所有数据。

但主要问题是窗口弹出窗口不包含更新的数据。手段第一次，当我点击网格ID正确传递和窗口创建正确。 现在关闭该弹出窗口后，再次单击网格时，弹出窗口，但其中包含的数据不是更新数据。 所以我该怎么做，所以我的窗口显示我更新的数据，基于网格ID传递。

双击网格我执行下面的代码

$ b $

  editProject：function（grid，record）{
 console.log（'双击'+ record.get（'id' ））; 
 Ext.Ajax.request（{
 url：'projecttask / GetprojectTasks.action'，
 method：'GET'，
 params：{'id'：record.get 'id'）}，
 scope：this，//将范围作为控制器添加
 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'， 
需要：['gantt.view.projectmgt.projectGanttpanel']，
 editform：1，
 id：'projectganttwindow'，
标题：'甘特小组窗口'，
 width：450，
 height：350，
 closeAction：'hide'，
 flex：1，
 modal：true，
 constrain：true，
 closeable：true，
最大化：true，
 stateful：false，
 
 initComponent：function（）{
 Ext.apply（this，{
项目：[{
 xtype：'projectganttpanel'，
 width：'100％'，
 height：'98％'
}] 
}）; 
 
 
 this.callParent（arguments）; 
} 
}）; 
  

我的 ProjectGanttWindow包含xtype projectganttpanel 代码

  TaskPriority = {
低：0，
正常：1，
高：2 
}; 
 
 
 var taskStore = Ext.create（Gnt.data.TaskStore，{
 model：'gantt.model.Task'，
 storeId：'taskStore '，
 autoLoad：false，
 autoSync：true，
 proxy：{
类型：'ajax'，
方法：'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'，$ b $ root root''taskdata'，
 encode：true，
 writeAllFields：true 
}），
 reader：new Ext.data.JsonReader（{
 totalPropery：'total'，
 successProperty ：'成功'，
 idProperty：'id'，
类型：'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：{
类型：'ajax'，
方法：'GET'，
 reader ：new Ext.data.JsonReader（{
 root：'dependencydata'，
 type：'json'
}），
 writer：new Ext.data.JsonWriter（{ b $ b root：'dependencydata'，
类型：'json'，
 totalPropery：'total'，
 successProperty：'success'，
 idProperty：'id'，
 encode：true，
 writeAllFields：true 
}），
 api：{
 read：'dependencies / GetDependencies.action'，
 create：'dependencies /CreateDependencies.action'，
 destroy：'dependencies / DeleteDepende ncies.action'
} 
} 
}）; 
 
 
 var start = new Date（2010，0，1），
 end = Sch.util.Date.add（start，Sch.util.Date.MONTH，30 ）; 
 
 
 //在应用程序初始化时创建下载框架
 this.downloadFrame = Ext.getBody（）。createChild（{$ b $ tag：'iframe'
，cls：'x-hidden'
，id：'iframe'
，name：'iframe'
}）; 
 //在应用程序初始化时创建下载表单
 
 
 this.downloadForm = Ext.getBody（）。createChild（{
 tag：'form'
，cls：'x-hidden'
，id：'form'
，target：'iframe'
}）; 
 
 var printableMilestoneTpl = new Gnt.template.Milestone（{
前缀：'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'，
要求：[
'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，
 
 //添加一些额外的功能
 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 {
 //样式边界作为背景/进度条
 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 {
 //样式边界作为背景/进度条
 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'; 
休息; 
 
 
案例TaskPriority.Normal：
 prioCls ='sch-gantt-prio-normal'; 
休息; 
 
 
案例TaskPriority.High：
 prioCls ='sch-gantt-prio-high'; 
休息; 
} 
 
 
返回{
 cls：prioCls 
}; 
}，
 
 
 //设置你的静态列
列：[
 {
 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'，
 b width：50，
 dataIndex：'Priority'，
 renderer：function（v，m，r）{
 switch（v）{
 case T askPriority.Low：
返回'Low'; 
 
 
案例TaskPriority.Normal：
返回'正常'; 
 
 
案例TaskPriority.High：
返回'高'; 
} 
} 
}，
 {
 xtype：'booleancolumn'，
 width：50，
 
 header：'手动'，
 
 dataIndex：'ManuallyScheduled'，
 
字段：{
 xtype：'combo'，
 store：['true'，' false'] 
} 
} 
]，
 taskStore：taskStore，
 dependencyStore：dependencyStore，
 tooltipTpl：new Ext.XTemplate（
 '< h4 class =tipHeader> {Name}< / h4>'，
'< table class = taskTip>'，
'< tr>< td>开始：< / td> < td align =right> {[Ext.Date.format（values.StartDate，ymd）]}< / td>< / tr>'，
'< tr>< ; TD>结束：其中; / TD> < td align =right> {[Ext.Date.format（Ext.Date.add（values.EndDate，Ext.Date.MILLI，-1），ymd）]}< / td>< ; / tr>'，
'< tr>< td> Progress：< / td>< td align =right> {PercentDone}％< / td>< / tr> '，
'< / table>'
）.compile（），
 
 
 tbar：[{
 xtype：'buttongroup'，
 title：'Navigation'，
列：2，
默认值：{
比例：'large'
}，
 items：[{
 iconCls：'icon-prev'，
 scope：this，
 handler：function（）{
 this.shiftPrevious（）; 
 
 
 
 iconCls：'icon-next'，
 scope：this，
 handler：function（）{
 this.shiftNext（）; 
} 
}] 
}，{
 xtype：'buttongroup'，
 title：'查看工具'，
列：2，
默认值：{
比例：'small'
}，
物品：[
 {
 text：'折叠全部'，
 iconCls：'图标-collapseall'，
 scope：this，
 handler：function（）{
 this.collapseAll（）; 
} 
}，
 {
 text：'缩放以适合'，
 iconCls：'zoomfit'，
处理程序：function（）{
 this.zoomToFit（）; 
}，
范围：this 
}，
 {
 text：'全部展开'，
 iconCls：'icon-expandall'，
范围：this，
 handler：function（）{
 this.expandAll（）; 
 
 
 $ b} {
 xtype：'buttongroup'，
 title：'查看分辨率'，
列：2 ，
默认值：{
比例：'large'
}，
 items：[{
 text：'10 weeks'，
 scope：this， 
处理程序：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'，
处理函数：function（）{
 taskStore.sync（）; 
 
 
 $ b $ 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），
持续时间：1.0，
 DurationUnit：'d'，
 leaf：true 
}）
）; 
} 
} 
 
}）; 
  

我使用ExtJS 4.0.2a mvc和JAVA作为我的服务器端技术

解决方案

有几个问题：

• 您是否在关闭窗口之前保存数据？


• 使用Firebug或类似软件，您是否看到了保存情况？


• 您是否看到第二次请求到达服务器并返回？


• 您的服务器是否正确保存了数据？

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

解决方案

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?

这篇关于窗口没有显示基于网格行双击的更新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！