1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    39
    Answers
    3
    Vote Rating
    3
    Rhoover is on a distinguished road

      0  

    Default Answered: Passing Data Down To A Component in NavigationView

    Answered: Passing Data Down To A Component in NavigationView


    Trying to replicate the presentation of the NavigationView example that presents the Show.js on-screen with a top detail and a bottom map, and am getting scars on my forehead.

    Getting no errors with an almost working panel, in that the top is showing as is the map, but both are devoid of the correct data (note the title in the navigationbar is accurate when coming from the list).

    The controller seems to be working fine:

    PHP Code:
    showVTBTBrewerDetail: function(list, record) {        
      
    this.getBeertrail().push(            
      { 
       
    xtype:'vtbtlistdetailpanel',
       
    titlerecord.showTitle(),  
       
    datarecord.getData()           
       }       
     )    

    yet the detail panel is missing data:

    PHP Code:
    Ext.define('AlchemistBeer.view.VTBTListDetail', {   
       
    extend'Ext.Container',    xtype'vtbtlistdetailpanel',    
       
    requires: ['Ext.Map'],
        
    config: {       
        
    autoDestroytrue,        
        
    layout'vbox',        
        
    styleHtmlContenttrue,        
        
    baseCls'vtbtdetail',        
        
    store'VTBTStore',        
        
    title'Details',
        
    items: [            
        {                
         
    id'vtbtTop',                
         
    flex1,                
         
    tpl: [                   
           
    '<div class="vtbt_detail_top">',                   
           
    '<img class="vtbt_detail_photo" src="{vba100_url}" width="100" height="100"   />',                    
           
    '<h2>{name}</h2>',                    
           
    '<p>{address}</p>',                    
           
    '</div>'                
           
    ].join('')            
         },            
         {               
             
    xtype'map',                
             
    id'vtbtMap',                
             
    flex2,                
             
    mapOptions: {                   
            
    zoomControltrue,                   
           
    zoom12,                    
           
    mapTypeIdgoogle.maps.MapTypeId.ROADMAP,                   
           
    mapTypeControltrue,                    
           
    scrollwheelfalse,                   
           
    navigationControltrue,                    
           
    navigationControlOptions
           {                       
             
    stylegoogle.maps.NavigationControlStyle.DEFAULT                   
           }                
       },               
        
    listeners: {                   
          
    painted: function(map) {                        
           
    record map.getData();                   
         }                
      }            
    }        
    ],
            
    recordnull,
        },

        
    updateRecord: function(newRecord) {        
        if(
    newRecord) {            
        
    this.down('#vtbtTop').setData(newRecord.data);   
    this.down('#vtbtMap').setData(newRecord.data);
               
     
    this.down('map').setMapCenter({                
        
    latitudenewRecord.data.latitude,               
        
    longitudenewRecord.data.longitude           
        
    });           
        var 
    map this.down('map').getMap();            
        var 
    marker = new google.maps.Marker({                
        
    positionposition = new google.maps.LatLng (newRecord.data.latitude,newRecord.data.longitude),                
       
    mapmap            
      
    });
               
     
    marker.setMap(map);        }    }}); 
    What am I missing? Bonus: there's beer involved!! Thx again.

  2. updateRecord won't fire if you set the data config. updateData will fire though.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    updateRecord won't fire if you set the data config. updateData will fire though.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    39
    Answers
    3
    Vote Rating
    3
    Rhoover is on a distinguished road

      0  

    Default


    updateRecord won't fire if you set the data config. updateData will fire though.
    excellent! worked like a charm...for the most part .

    my top component/tpl is now successfully reading and displaying data pulled from my store.

    this pattern does not seem to be working for the bottom, map item though , as it's displaying Palo Alto. again, the panel gets displayed just fine, but w/o the proper marker, and eventually the proper map center (and eventually a map with multiple markers). thinking out loud, do i need to initialize the google map object first?

    working code (i.e. no errors thrown):

    Code:
    Ext.define('AlchemistBeer.view.VTBTListDetail', {
      extend: 'Ext.Container',
      xtype: 'vtbtlistdetailpanel',
      requires: ['Ext.Map'],
    
      updateData: function(data) {
        var topComp = this.query('component[tpl]');
        for (var i=0; i<topComp.length; i++) {
          topComp[i].setData(this.getData());
        }
    
        var bottomMap = this.query('map');
        for (var i=0; i<bottomMap.length; i++) {
          bottomMap[i].setData(this.getData());
        }
      },
    
    
      config: {
        autoDestroy: true,
        layout: 'vbox',
        styleHtmlContent: true,
        baseCls: 'vtbtdetail',
        store: 'VTBTStore',
        title: 'Details',
    
    
        items: [
          {
            xtype: 'component',
            tpl: [
              '<div class="vtbt_detail_top">',
              '<img class="vtbt_detail_photo" src="{vba100_url}"  />',
              '<span>{name}</span>',
              '<p>{address}</p>',
              '</div>'
            ].join('')
          },
          {
            xtype: 'map',
            flex: 1,
            mapOptions: {
              // center: new google.maps.LatLng(44.350471, -72.743821),
              zoomControl: true,
              zoom: 12,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: true,
              scrollwheel: false,
              navigationControl: true,
              navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
              }
            },
            listeners: {
              maprender: function(comp, map, data) {
                var data = this.setData(this.getData());
                var marker, i;
                for (i=0; i<data.length; i++) {
                  marker = new google.maps.Marker ({
                    position: new googlemaps.LatLng(data[i].get('latitude'), data[i].get('longitude')),
                    map: map
                  });
                }
              }
            }
          }
        ],
      }
    });
    muchos gracias for pointing me in some direction!

Thread Participants: 1