Estou aqui para pedir ajuda.
Tenho um gráfico onde carrego os dados de indicadores(ex: clientes ativos ou clientes inativos).
Criei os botões back e next para percorrer esses records e carrega-los no gráfico.
Mais não estou conseguindo percorrer esses dados.
Segue codigo abaixo:
Controller
Ext.regController('IndicadoresController', {
beforeFilter: IntegratorApp.requireUser,
index: function(){
var indicadores = this;
this.indexView = this.render({
xtype : 'indicadoresfiltro',
listeners : {
activate: function(){
var toolbar = IntegratorApp.views.mainPanel.toolBar;
toolbar.setTitle((!Ext.is.Phone) ? "Filtro de Indicadores" : "Filtro");
if(Ext.is.Phone){
var backButton = toolbar.items.get(0);
backButton.setHandler(function(){
var navigation = IntegratorApp.views.Navigation;
IntegratorApp.views.mainPanel.setActiveItem(navigation, {
type: 'slide',
reverse: true
});
}, this);
backButton.show();
}
},
beforedeactivate: function(){
if(Ext.is.Phone){
var toolbar = IntegratorApp.views.mainPanel.toolBar;
toolbar.items.get(0).hide();
toolbar.setTitle(IntegratorApp.title);
}
}
// ,
// beforerender: function(){
// indicadores.loadList();
// }
}
});
var key = 'CLHABITOTA'; //aqui eu carrego o indicador para fins de teste
var begin = '';
var end = '';
indicadores.getDataChart(key,begin,end);
indicadores.loadList(key);
},
filtros: function(){
var indicadores = this;
this.filtrosView = this.render({
xtype : 'indicadoresfiltro',
listeners : {
activate: function(){
var toolbar = IntegratorApp.views.mainPanel.toolBar;
toolbar.setTitle((!Ext.is.Phone) ? "Filtro de Indicadores" : "Filtro");
if(Ext.is.Phone){
var backButton = toolbar.items.get(0);
backButton.setHandler(function(){
var navigation = IntegratorApp.views.Navigation;
IntegratorApp.views.mainPanel.setActiveItem(navigation, {
type: 'slide',
reverse: true
});
}, this);
backButton.show();
}
},
beforedeactivate: function(){
if(Ext.is.Phone){
var toolbar = IntegratorApp.views.mainPanel.toolBar;
toolbar.items.get(0).hide();
toolbar.setTitle(IntegratorApp.title);
}
},
beforerender: function(){
indicadores.loadList();
}
}
});
var buttonPeriodo = this.filtrosView.query('#searchPeriodoId')[0];
buttonPeriodo.on({
tap: function(){
var values = this.filtrosView.getValues(), dateIni, dateFin;
dateIni = new Date(values.data_inicial);
dateFin = new Date(values.data_final);
dateIni.setHours(0);
dateIni.setMinutes(0);
dateIni.setSeconds(0);
dateFin.setHours(23);
dateFin.setMinutes(59);
dateFin.setSeconds(0);
/* verifica se data inicial é inferior a data final */
if(dateFin.getTime() > dateIni.getTime()){
indicadores.getDataChart(values.key, dateIni.format("Y-m-d H:i:s"), dateFin.format("Y-m-d H:i:s"));
} else {
Ext.Msg.alert(
'Atenção!',
'Data Inicial deve ser menor ou igual a Data Final'
);
}
},
scope : this
});
IntegratorApp.views.mainPanel.setActiveItem(this.filtrosView, null);
},
loadList: function(){
Ext.util.JSONP.request({
url : API,
callbackKey : 'callback',
params : {
method : 'mobile.getIndicadores',
key : modelSession.get('authToken')
},
callback: function(data){
IntegratorApp.stores.ListIndicadores.loadData(data.items);
}
});
},
detail: function(options){
var indicadores = this;
this.detailView = this.render({
xtype : 'indicadoresdetail',
listeners : {
activate: function(){
var toolbar = IntegratorApp.views.mainPanel.toolBar;
toolbar.setTitle('Indicadores');
var buttonFiltros = toolbar.items.get(1);
buttonFiltros.setHandler(function(){
Ext.dispatch({
controller : 'IndicadoresController',
action : 'filtros'
});
}, this);
buttonFiltros.show();
},
// beforedeactivate: function(indexChart){
// indexChart.destroy();
// },
beforedeactivate: function(){
var toolbar = IntegratorApp.views.mainPanel.toolBar;
toolbar.items.get(0).hide();
toolbar.setTitle(IntegratorApp.title);
},
onDetailView: function(data){
var indicadoresStore = IntegratorApp.stores.ListIndicadores.loadData(data.items);
var count = indicadoresStore.getCount();
if(count){
var index = this.getIndicadoresCount();
var record = indicadoresStore.getAt(index);
this.setIndicadores(record.getData());
if(count>1)
this.getNextBtn().show();
}
},
setIndicadores : function(data){
var indicadoresView = this.detailView;
var indicadoresDetail = indicadoresView.getComponent('indicadoresdetail');
indicadoresDetail.getComponent('lineChart').setData(data);
//contactDetail.getComponent('details').setData(data);
}
}
});
var buttonBack = this.detailView.query('#backId')[0];
var buttonForward = this.detailView.query('#forwardId')[0];
buttonBack.on({
tap: function(data){
var indicadoresStore = IntegratorApp.stores.ListIndicadores.loadData(data.items);
var count = indicadoresStore.getCount();
var index = this.getIndicadoresCount();
this.setIndicadoresCount(index-1);
var record = indicadoresStore.getAt(index-1);
this.setIndicadores(record.getData());
this.getNextBtn().show();
if(this.getIndicadoresCount() == 0)
this.getBackBtn().hide();
}
});
buttonForward.on({
tap: function(data){
var indicadoresStore = IntegratorApp.stores.ListIndicadores.loadData(data.items);
var count = indicadoresStore.getCount();
var index = this.getIndicadoresCount();
this.setIndicadoresCount(index+1);
var record = indicadoresStore.getAt(index+1);
this.setIndicadores(record.getData());
this.getBackBtn().show();
if(this.getIndicadoresCount() == count-1)
this.getNextBtn().hide();
}
});
IntegratorApp.views.mainPanel.setActiveItem(this.detailView, null);
},
getDataChart: function(key, begin, end){
var storeSession = IntegratorApp.stores.Session, modelSession;
modelSession = storeSession.first();
Ext.util.JSONP.request({
url : API,
callbackKey : 'callback',
params : {
key : key,
begin : begin,
end : end,
method: 'mobile.getBIDataAuto',
codusu: modelSession.get('authToken')
},
callback: function(data){
IntegratorApp.stores.ChartStore.loadData(data.items);
Ext.dispatch({
controller : 'IndicadoresController',
action : 'detail'
});
}
});
}
});
Detail
Ext.ns('IntegratorApp.views.Indicadores');
IntegratorApp.views.Indicadores.Charts = Ext.extend(Ext.Panel, {
layout: 'fit',
scroll: 'vertical',
ui: 'light',
cardSwitchAnimation: {
type: 'slide'
},
initComponent: function() {
this.store = IntegratorApp.stores.ChartStore;
this.items = this.buildItems();
IntegratorApp.views.Indicadores.Charts.superclass.initComponent.apply(this);
},
buildItems: function() {
var lineChart, tabItems;
lineChart = new Ext.chart.Chart({
renderTo: Ext.getBody(),
itemId: 'lineChart',
animate: true,
store: this.store,
interactions: [{
type: 'panzoom',
axes: {
right: {}
}
},{
type: 'iteminfo',
title: 'Detalhes',
gesture: 'tap',
listeners: {
show: function(interaction, item, panel) {
IntegratorApp.popupCharts(item, panel);
}
}
}],
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['valor_minimo','meta','valor_maximo','valor_alerta','v'], // *****valores*****
title: 'Valor Indicadores',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['d'], //*****dias******
title: 'Período',
grid: true,
label: {
rotate: {degrees: -30}
}
}],
legend: {position: Ext.is.Phone ? 'left' : 'top'},
series: [{
type: 'line',
//fill: true,
highlight: {size: 7,radius: 7},
axis: 'left',
xField: 'd',
yField: ['valor_minimo'],
title: ['Valor minimo'],
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
},{
type: 'line',
//fill: true,
highlight: {size:7,radius: 7},
axis: 'left',
xField: 'd',
yField: ['meta'],
title: ['Meta'],
markerConfig: {
type: 'circle',
size: 6,
radius: 6,
'stroke-width': 0
},
style: {
opacity: 0.5
}
},{
type: 'line',
fill: false,
highlight: {size:7,radius: 7},
axis: 'left',
xField: 'd',
yField: ['valor_maximo'],
title: ['Valor maximo'],
markerConfig: {
type: 'line',
size: 0,
radius: 0,
'stroke-width': 0
},
style: {
opacity: 0.5
}
},{
type: 'line',
//fill: true,
highlight: {size:7,radius: 7},
axis: 'left',
xField: 'd',
yField: ['valor_alerta'],
title: ['Valor alerta'],
markerConfig: {
type: 'circle',
size: 6,
radius: 6,
'stroke-width': 0
},
style: {
opacity: 0.5
}
},{
type: 'line',
fill: true,
highlight: {size:7,radius: 7},
axis: 'left',
xField: 'd',
yField: ['v'],
title: ['Valor'],
markerConfig: {
type: 'circle',
size: 6,
radius: 6,
'stroke-width': 0
},
style: {
opacity: 0.5
}
}]
});
var bt_back = new Ext.Button({
ui : 'back',
text : 'Back',
align : 'left',
action : 'back',
itemId : 'backId',
//hidden : true,
scope : this
});
var bt_forward = new Ext.Button({
ui : 'forward',
text : 'Next',
align : 'right',
action : 'next',
itemId : 'forwardId',
//hidden : true,
scope : this
});
var panel = new Ext.Panel({
layout : 'card',
ui : 'light',
fullscreen : true,
dockedItems : [{
//height : '10%',
dock : 'top',
xtype : 'toolbar',
//ui : 'green',
items : [bt_back,bt_forward]
}],
items : [lineChart],
initialize : function(){
this.fireEvent('onDetailView',this);
}
});
tabItems = [panel];
if (!Ext.is.Phone) {
//tabItems.push(yearChart);
}
return tabItems;
}
});
Ext.reg('indicadoresdetail', IntegratorApp.views.Indicadores.Charts);
IntegratorApp.popupCharts = function(item, panel) {
var storeItem = item.storeItem;
panel.update([
'<ul><li><b>Período: </b>' + storeItem.get('d') + '</li>',
'<li><b>Valor: </b> ' + storeItem.get('v') + '</li>',
'</ul>'
].join(''));
};
