Обновление 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() {
}*/
});
}
Комментарии: 11
Или дайте хотя бы ссылку на аналог на git или куда копать? Не совсем понимаю как выполнить reload() для timetable-dataview-items.
Попробуйте
this.refresh();
Хотя это вам не поможет скорее всего, не нужно вам делать ajax запрос.
У вас уже в DataView встрое JsonStore, который все делает за вас.
Вам нужно поменять параметр в store и загрузить его
У вас уже в DataView встрое JsonStore, который все делает за вас.
Вам нужно поменять параметр в store и загрузить его
this.getStore().setBaseParam(имя параметра, значение);
this.getStore().reload();
this.refsresh();
А MODx.Ajax.request убрать
Спасибо за ответы. Дело в том, что в процессоре я выполняю обработку данных в зависимости от выбранного месяца. Процессор возвращает нужны данные, но как теперь обновить их, у меня не получается.
filterByMonth: function(combo) {
this.getStore().setBaseParam('month', combo.getValue());
this.getStore().reload();
this.refsresh();
}
Возможно я не до конца разобрался в 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';
Заменит функцию в панели 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();
}
Примерно так.
Спасибо. Супер, то что нужно, небольшая правка:
filterByMonth: function(combo) {
var dataview = Ext.getCmp('timetable-dataview-items-cmp');
dataview.getStore().setBaseParam('month', combo.getValue());
dataview.getStore().reload();
dataview.refresh();
}
dataview.getStore().reload();
dataview.refresh();
Это, по моему, одно и то же.Проверь в консоли браузера, там может показывать два ajax запроса друг за другом, из которых первый будет всегда отменён.
Попробовал. ajax запрос один, причем без
, а при совместном использовании
dataview.refresh();
конструкция работает, но появляются часики загрузки данных 
dataview.getStore().reload();
dataview.refresh();
данные обрабатываются моментально. Без dataview.getStore().reload();
данные не обновляются.
Если запрос один — значит, всё ок.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.