Ir para conteúdo


Foto

Prev e Next sencha touch


  • Por favor, faça o login para responder
Não há respostas para este tópico

#1 Allison WIllian

Allison WIllian

    Member Avançado

  • Membros
  • PipPipPip
  • 40 posts
  • LocationLondrina

Postado 14 May 2014 - 16:24

Olá pessoal.
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(''));
};





0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos