Ir para conteúdo


Foto

[RESOLVIDO] Passar valor selectfield para o controller


  • Por favor, faça o login para responder
1 resposta neste tópico

#1 Allison WIllian

Allison WIllian

    Member Avançado

  • Membros
  • PipPipPip
  • 40 posts
  • LocationLondrina

Postado 13 May 2014 - 09:41

Olá pessoal. Alguém pode me ajudar.

Como faço para passar o valor do selectfield em uma action(detail) do controller?
Estou fazendo na action detail no buttonIndicadores.on
Segue codigo.

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';
     var begin = '';
     var end = '';

    indicadores.getDataChart(key,begin,end);  
    indicadores.loadList();
  },
  
  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 backButton = toolbar.items.get(0);                    

          backButton.setHandler(function(){
            Ext.dispatch({
              controller  : 'IndicadoresController',
              action      : 'index'
            });
          }, this);

          backButton.show();
        },
        beforedeactivate: function(indexChart){
            indexChart.destroy();
        },
        beforedeactivate: function(){
          var toolbar = IntegratorApp.views.mainPanel.toolBar;
          toolbar.items.get(0).hide();
          toolbar.setTitle(IntegratorApp.title);
        }
      }
    });
    
    var buttonFiltros = this.detailView.query('#filtroindicadoresId')[0];
    
    var buttonIndicadores = this.detailView.query('#indicadoresId')[0];
    
    buttonFiltros.on({
       tap: function(){
           Ext.dispatch({
              controller  : 'IndicadoresController',
              action      : 'filtros'
           });
       } 
    });         
  
    buttonIndicadores.on({
       tap: function(){
                    
          var values = IntegratorApp.views.Indicadores; 
          
           console.log(values);
           //var values = this.detailView.value();
           
           //alert(values);
//           Ext.dispatch({
//              controller  : 'IndicadoresController',
//              action      : 'getDataChart'
//           });
       } 
    }); 

    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(), 
            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 template = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="item-wrap" id="">',
                    '<div class="x-form-label">',
                        '<b>Média:</b> {media}',
                    '</div>',                    
                '</div>',
            '</tpl>');
            
        var detail = new Ext.DataView({
            cls             : 'card1',
            frame           : true,
            store           : this.store,
            itemSelector    :'item-wrap',
            tpl             : template,
            title           : '',
            itemId          : 'atendimentoDetailID'
        });
        
        var bt_filtro = new Ext.Button({
            ui      : 'confirm',
            text    : 'Filtros',
            itemId  : 'filtroindicadoresId',
            scope   : this
        });                
        
        var indicadores = [{
            xtype   : 'fieldset',
            //layout  : 'card',           
            items   : [{
                xtype       : 'selectfield',               
                placeHolder : 'Indicadores',
                displayField: 'text',
                valueField  : 'codigo',
                name        : 'key',                  
                store       : IntegratorApp.stores.ListIndicadores,
                 listeners: {
                    change: function(field, value) {
                        if (value instanceof Ext.data.Model) {
                            value = value.get(field.getValueField());                            
                        }
                        //console.log(value);
                        //Pass value parameter to the 2nd select field's store
                    }
                } // listeners
            }]
        }];
    
        var bt_indicadores = new Ext.Button({
            ui      : 'confirm',
            text    : 'Trocar indicadores',
            itemId  : 'indicadoresId',
            scope   : this
        });
        
        var panel = new Ext.Panel({
            layout: 'fit',               
            fullscreen: true,            
            dockedItems: [{
                height: '13%',
                dock : 'top',                
                xtype: 'toolbar',
                ui   : 'green',                    
                items: [bt_filtro,detail,indicadores,bt_indicadores]
            }],
            items: [lineChart]
        });  
                
        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(''));
};


#2 Allison WIllian

Allison WIllian

    Member Avançado

  • Membros
  • PipPipPip
  • 40 posts
  • LocationLondrina

Postado 13 May 2014 - 14:54

Resolvi com essa linha.

var key = Ext.getCmp('sel').value;
indicadores.getDataChart(key); 

Vlw galera.




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

0 membros, 0 visitantes, 0 membros anônimos