Results 1 to 3 of 3

Thread: Passing Data Down To A Component in NavigationView

  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    39
    Answers
    3
    Vote Rating
    2
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    updateRecord won't fire if you set the data config. updateData will fire though.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    39
    Answers
    3
    Vote Rating
    2
      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!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •