如何从服务器响应extjs 4设置变量值

时间:2012-03-15 10:34:14

标签: extjs4 extjs-mvc

论坛会员我在从我收到的服务器响应中设置我的视图值时遇到一个问题

我正在使用extjs的MVC架构4.我的商店装载完美,我的任务库定义如下

Ext.define('gantt.store.taskStore', {
    extend: 'Gnt.data.TaskStore',
    model: 'gantt.model.ResourceTask',
    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;
                }
            }
        })
    }
});

但我想要做的是,一旦加载了商店,我想将服务器响应数据分配给我的javascript中的一个变量。

我尝试添加view的beforeload函数中的值,但是无法这样做。

我的观看代码如下所示

var result = Ext.JSON.decode('{"calendardata": [{"startdate": 1330281000000,"enddate": 1330284600000,"id": 3,"title": "mon"}],"total": 1,"success": true}');

//var start   = new Date(2012, 2, 26),
//end     = Sch.util.Date.add(start, Sch.util.Date.MONTH, 30);

var start_d = new Date(result.calendardata[0].startdate);
var end_d = new Date(result.calendardata[0].enddate);

var start = new Date(start_d.getFullYear(), start_d.getMonth(), start_d.getDate());
end = Sch.util.Date.add(start, Sch.util.Date.MONTH, 30);

console.log("YEAR ::"+start.getFullYear()+"MONTH ::"+start.getMonth()+"DAY ::"+start.getDate());
console.log("YEAR ::"+end.getFullYear()+"MONTH ::"+end.getMonth()+"DAY ::"+end.getDate());

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


                TaskPriority = {
                        Low : 0,
                        Normal : 1,
                        High : 2
                    };
                    var taskStore = Ext.create('gantt.store.taskStore');
                    var dependencyStore = Ext.create('gantt.store.dependencyStore');

                     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()                             

                     });

                        me.callParent(arguments);

        }     
});

我无法设置用于使用静态数据设置的变量值的原因。要设置静态数据,我使用以下代码

var result = Ext.JSON.decode('{"calendardata": [{"startdate": 1330281000000,"enddate": 1330284600000,"id": 3,"title": "mon"}],"total": 1,"success": true}');

var start_d = new Date(result.calendardata[0].startdate);
var end_d = new Date(result.calendardata[0].enddate);

var start = new Date(start_d.getFullYear(), start_d.getMonth(), start_d.getDate());
end = Sch.util.Date.add(start, Sch.util.Date.MONTH, 30);

但是,我想在收到商店加载和服务器响应后立即设置起始值和结束值,而不是这些静态数据。

请告诉我一些我可以在这里申请的解决方案。

我收到的是jsondata

{
    "taskdata": [{
        "startdate": 1330281000000,
        "enddate": 1330284600000,       
        "id": 3,
        "title": "mon"
    }],
    "total": 1,
    "success": true
}

我使用带有MVC架构的extjs 4和JAVA作为我的服务器端技术。

1 个答案:

答案 0 :(得分:0)

首先,你的问题有点严重。你有太多的代码而且不清楚你想要问什么。如果您想获得快速和正确的答案,请在将来尝试隔离您正在处理的特定问题。

其次,加载操作是异步的。您刚刚将商店指定为&#39; autoLoad&#39;,但我没有看到您订阅其加载事件的任何地方。很可能你的问题是在它尚未加载时试图获得商店的某些东西。尝试设置autoLoad: false,手动加载商店并订阅其加载&#39;用于填充视图的事件。