Обновление DataView при разработке компонента

Добрый день. Есть ComboBox с месяцами года и под ним вывод DataView:

Timetable.view.Items = function (config) {
    config = config || {};
    
    this._initTemplates();
    
    Ext.applyIf(config,{                
        url: Timetable.config.connector_url
        ,fields: ['id','resource_id','eventdate','sessions']        
        ,baseParams: {
            action: 'mgr/timetable/getList'
            ,month: this.config.month
        }
        ,tpl: this.templates.thumb        
    });
    
    Timetable.view.Items.superclass.constructor.call(this,config);
};



Ext.extend(Timetable.view.Items,MODx.DataView,{  
    templates: {}
    ,windows: {}
    
   
    
    ,_initTemplates: function() {
        
        this.templates.thumb = new Ext.XTemplate(
            '<tpl for=".">','<div style="width:100px;height:100px;border:1px solid red;float: left;">{eventdate}</div>','</tpl>'          
        );

    }
    });
    
Ext.reg('timetable-dataview-items',Timetable.view.Items);
Вопрос заключается в следующем, как правильно обновлять DataView по выбору другого месяца в ComboBox?

Сама функция:

filterByMonth: function(combo) {        
        
       var month = combo.getValue();

        MODx.Ajax.request({
            url: Timetable.config.connector_url
            ,params: {
                action: 'mgr/timetable/getList'
                ,month: month             
            }
            /*,listeners: {
               success: {fn:function() { 
              
            }*/
        });
    }
a.drobushevskiy
13 апреля 2015, 09:36
modx.pro
2 146
0

Комментарии: 11

a.drobushevskiy
13 апреля 2015, 22:30
0
Или дайте хотя бы ссылку на аналог на git или куда копать? Не совсем понимаю как выполнить reload() для timetable-dataview-items.
    Алексей Ерохин
    14 апреля 2015, 14:02
    0
    Попробуйте
    this.refresh();
      Алексей Ерохин
      14 апреля 2015, 14:09
      0
      Хотя это вам не поможет скорее всего, не нужно вам делать ajax запрос.
      У вас уже в DataView встрое JsonStore, который все делает за вас.
      Вам нужно поменять параметр в store и загрузить его
      this.getStore().setBaseParam(имя параметра, значение);
      this.getStore().reload();
      this.refsresh();
      А MODx.Ajax.request убрать
        a.drobushevskiy
        14 апреля 2015, 14:15
        0
        Спасибо за ответы. Дело в том, что в процессоре я выполняю обработку данных в зависимости от выбранного месяца. Процессор возвращает нужны данные, но как теперь обновить их, у меня не получается.
          Алексей Ерохин
          14 апреля 2015, 14:36
          0
          filterByMonth: function(combo) { 
          	this.getStore().setBaseParam('month', combo.getValue());
          	this.getStore().reload();
          	this.refsresh();
          }
            a.drobushevskiy
            14 апреля 2015, 19:01
            0
            Возможно я не до конца разобрался в EXTJS или не так задал вопрос. Я не знаю как мне связать ComboBox и Dataview. Вот мой файл home.panel.js:

            Timetable.panel.Home = function (config) {
            	
                config = config || {};    
                
            	Ext.apply(config, {
            		baseCls: 'modx-formpanel',
            		layout: 'anchor',
            		hideMode: 'offsets',
            		items: [{
            			html: '<h2>' + _('timetable') + '</h2>',
            			cls: '',
            			style: {margin: '15px 0'}
            		}, {
            			xtype: 'modx-tabs',
            			defaults: {border: false, autoHeight: true},
            			border: true,
            			hideMode: 'offsets',
            			items: [{
            				title: _('timetable_items')
                                            ,defaults: {autoHeight: true}
                                            ,items: [{
                                                html: '<p>Управление расписанием и всё такое</p>'
                                                ,border: false
                                                ,bodyCssClass: 'panel-desc'
                                            },{
                                                html: '<div id="timetable_panel"></div>'
                                                ,border: false
                                                ,bodyCssClass: 'main-wrapper'
                                            }]
                                            ,listeners: {
                                                activate : function(panel){
                                                    /*Условие для избежания дублирования при переключении между табами*/
                                                    if(Ext.get('timetable-dataview-items-cmp')==null){
                                                        MODx.load({
                                                            xtype: 'timetable-dataview-items'
                                                            ,id: 'timetable-dataview-items-cmp'
                                                            ,renderTo: 'timetable_panel'
                                                        });
                                                    }
                                                }
                                            }
                                            ,tbar: this.getTopToolbar()
            				/*layout: 'anchor',
            				items: [
            				{
            					xtype: 'timetable-panel',
            					cls: 'main-wrapper',
            				}]*/
            			},
            			{
            			    title: 'Шаблоны',
            			    items: [{
            					cls: 'main-wrapper'
            			    }]
            			},
            			{
            			    title: 'Бронь',
            			    items: [{
            					cls: 'main-wrapper'
            			    }]
            			}
            			]
            		}]
            	});
            	Timetable.panel.Home.superclass.constructor.call(this, config);
            };
            Ext.extend(Timetable.panel.Home, MODx.Panel,{       
                
                getTopToolbar: function(){
                    
                    var buttons = [{
                        xtype: 'modx-combo',
                        name: 'quest',
                        id: 'timetable-quest',
                        width: 300,
                        fields: ['id', 'pagetitle'],
                        displayField: 'pagetitle',
                        valueField: 'id',
                        url: Timetable.config.connector_url,
                        baseParams: {
                            action: 'mgr/timetable/getQuestList'
                        }
                        ,emptyText: 'Выберите квест'
                       ,listeners: {
                            select: {fn: this.filterByMonth, scope:this}
                        }
                    },
                    {
                        xtype: 'modx-combo',
                        name: 'month',  
                        width: 300,
                        displayField: 'name',
                        store: new Ext.data.ArrayStore({                 
                            fields: ['id','name']
                            ,data: [
                            ['1','Январь']
                            ,['2','Февраль']
                            ,['3','Март']
                            ,['4','Апрель']
                            ,['5','Май']
                            ,['6','Июнь']
                            ,['7','Июль']
                            ,['8','Август']
                            ,['9','Сентябрь']
                            ,['10','Октябрь']
                            ,['11','Ноябрь']
                            ,['12','Декабрь']
                            ]
                        }),
                        mode: 'local',      
                        valueField: 'id',        
                        emptyText: 'Выберите месяц',
                        listeners: {
                            select: {fn: this.filterByMonth, scope:this}
                        }
                    }];
                    return buttons;   
                },    
                
                filterByMonth: function(combo) {        
                    
                    var month = combo.getValue();
            
                    MODx.Ajax.request({
                        url: Timetable.config.connector_url
                        ,params: {
                            action: 'mgr/timetable/getList'
                            ,month: month        
                        }
                        ,listeners: {
                            success: {fn:function() { this.refresh(); },scope:this}
                        }
                        /*,listeners: {
                           success: {fn:function() { 
                          
                        }*/
                    });
                }
            });
            Ext.reg('timetable-panel-home', Timetable.panel.Home);
            xtype: 'timetable-dataview-items' — это уже файл timetable.dataview.js:

            Timetable.view.Items = function (config) {
                config = config || {};
                
                this._initTemplates();
                
                Ext.applyIf(config,{                
                    url: Timetable.config.connector_url
                    ,fields: ['id','resource_id','eventdate','sessions']        
                    ,baseParams: {
                        action: 'mgr/timetable/getList'
                        //,month: this.config.month
                        ,month: config.month
                    }
                    ,tpl: this.templates.thumb        
                });
                
                Timetable.view.Items.superclass.constructor.call(this,config);
            };
            
            
            
            Ext.extend(Timetable.view.Items,MODx.DataView,{  
                templates: {}
                ,windows: {}
                
               
                
                ,_initTemplates: function() {
                    
                    this.templates.thumb = new Ext.XTemplate(
                        '<tpl for=".">','<div style="width:100px;height:100px;border:1px solid red;float: left;">{eventdate}</div>','</tpl>'          
                    );
            
                }
                });
                
            Ext.reg('timetable-dataview-items',Timetable.view.Items);
            Сам процессор должен выводить кол-во дней выбранного месяца и данные событий привязанные к конкретному дню месяца:

            class TimetableItemGetListProcessor extends modObjectGetListProcessor {
            	public $objectType = 'TimetableItem';
            	public $classKey = 'TimetableItem';
            	public $defaultSortField = 'id';
            	public $defaultSortDirection = 'DESC';	
                    
                    public function process() {
                        
                        $beforeQuery = $this->beforeQuery();
                            if ($beforeQuery !== true) {
                                return $this->failure($beforeQuery);
                            }
                        $data = $this->getData();            
                        $list = $this->iterate($data);
                        $month = $this->getProperty('month');
                        
                        /*Кол-во дней в текущем месяце*/
                        $t = date("t", strtotime("2015-".$month));
                        
                        for ($i = 0; $i < $t; $i++) {
                            $list[$i]["id"] = $i;
                            $list[$i]["resource_id"] = $i;
                            $list[$i]["eventdate"] = $i;
                            $list[$i]["sessions"] = $i;
                        }
                        
                        return $this->outputArray($list,$data['total']);
                    }
            
            
            }
            
            return 'TimetableItemGetListProcessor';
              Алексей Ерохин
              14 апреля 2015, 19:54
              +2
              Заменит функцию в панели Timetable.panel.Home
              filterByMonth: function(combo) { 
              	var dataview = Ext.get('timetable-dataview-items-cmp');
              	dataview.getStore().setBaseParam('month', combo.getValue());
              	dataview.getStore().reload();
              	dataview.refsresh();
              }
              Примерно так.
                a.drobushevskiy
                14 апреля 2015, 20:23
                +2
                Спасибо. Супер, то что нужно, небольшая правка:

                filterByMonth: function(combo) { 
                	var dataview = Ext.getCmp('timetable-dataview-items-cmp');
                	dataview.getStore().setBaseParam('month', combo.getValue());
                	dataview.getStore().reload();
                	dataview.refresh();
                    }
                  Василий Наумкин
                  15 апреля 2015, 02:52
                  0
                  dataview.getStore().reload();
                  dataview.refresh();
                  Это, по моему, одно и то же.
                  Проверь в консоли браузера, там может показывать два ajax запроса друг за другом, из которых первый будет всегда отменён.

                    a.drobushevskiy
                    15 апреля 2015, 03:07
                    0
                    Попробовал. ajax запрос один, причем без
                    dataview.refresh();
                    конструкция работает, но появляются часики загрузки данных , а при совместном использовании
                    dataview.getStore().reload();
                    dataview.refresh();
                    данные обрабатываются моментально. Без
                    dataview.getStore().reload();
                    данные не обновляются.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
11