как установить значение переменной из ответа сервера extjs 4 - PullRequest
0 голосов
/ 15 марта 2012

участник форума У меня возникла одна проблема при установке значения моего представления из ответа сервера, который я получаю

Я использую архитектуру MVC для extjs 4. Мой магазин загружен отлично, а мой taskstore определяется следующим образом

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.

Я пытался добавить значение из функции представления перед загрузкой, но не смог этого сделать.

мой код представления указан ниже

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
}

Я использую extjs 4 с архитектурой MVC и JAVA в качестве технологии на стороне сервера.

1 Ответ

0 голосов
/ 15 марта 2012

Прежде всего, ваш вопрос как-то плохо сформулирован. У вас слишком много кода и не совсем понятно, что вы пытаетесь спросить. В будущем постарайтесь выделить конкретную проблему, с которой вы имеете дело, если вы хотите получить быстрый и правильный ответ.

Во-вторых, операция загрузки выполняется асинхронно. Вы только что указали store как 'autoLoad', но я нигде не вижу, где вы подписываетесь на его событие загрузки. Скорее всего, ваша проблема заключается в попытке получить что-то из магазина, пока он еще не загружен. Попробуйте установить autoLoad: false, загрузить хранилище вручную и подписаться на его событие «load», чтобы заполнить ваше представление.

...