Generate map on detailcard of nestedlist out of a store

[aceman3000]

I have a nestedlist with some items in it coming from a tree store.
Now when i click on "So kommen Sie zu uns" i want to open a detailcard that has a map on it. The address for the map is in the store.
All other items just open the detailcard and get the html content out of the store.

Can i do it this way (and how?), or is there another different better approach?

CaravansMap.png

Here is my nestedlist:

Ext.define('App.view.Service', {    extend: 'Ext.dataview.NestedList',
    xtype: 'service',
    id: 'mainlist',
    
    requires: [
        'App.store.Service',
        'App.view.ServiceDetail'
    ],
    
    config: {
        title: 'Service',
        useTitleAsBackText: false,
        backText: 'Zurück',
        onItemDisclosure: true,
        store: 'Service',
        detailCard: {
            xtype: 'servicedetailcard'
        },
        zIndex: 0
    },
    
    getTitleTextTpl: function() {
        return '<div>{name}</div>';
    },
    getItemTextTpl: function(node) {
        return '<div><strong>{name}</strong></div>';
    }
});

Here my controller code:

onServiceDetailCardActivate: function(card, list) {        // Get selected leaf node
        var record = list.getLastNode();
        
        // Get and update description
        var descriptionField = card.down('#servicedescription');
       descriptionField.setHtml(record.get('description'));
      
    },

servicedetailcard

Ext.define('App.view.ServiceDetail', {    extend: 'Ext.Panel',
    xtype: 'servicedetailcard',
    id: 'servicedetailcard',
    
    config: {
        scrollable: true,
        
        defaults: {
            styleHtmlContent: true
        },
        
        items: [
            {
                id: 'servicedescription',
                html: ''
            },
        ]
    }
});

store json file

{    "items": [
        {
            "id": 1,
            "name": "Über uns",
            "description": "<a href='#'>test</a><p>Lorem ipsum dolor sit</p>",
            "leaf": true
        },        
        {
            "id": 2,
            "name": "Was wir machen",
            "description": "Lorem ipsum dolor sit",
            "leaf": true,
        },
        {
            "id": 3,
            "name": "Werkstatt",
            "description": "<h1>Werkstatt</h1>",
            "leaf": true
        },
        {
            "id": 4,
            "name": "So kommen Sie zu uns",
            "description": "",
            "address": 'Berliner Platz 8, 48151 Münster, Germany',
             "leaf": true
        },
    ]		
}

[mitchellsimoens]

If you have the detailCard provided the nestedlist should automatically go to it but do nothing more than set it as the active item. You need to listen to the leafitemtap event on the nestedlist to take action when a leaf has been tapped on. The nestedlist example that comes with ST2 shows this.

[aceman3000]

Thanks for your answer Mitchell, but i don´t know what to do now.
My list is working and shows detailcards for every item. I update the contents with

serviceDetailCard: {
                activate: 'onServiceDetailCardActivate'
            },


onServiceDetailCardActivate: function(card, list) {        // this needs work. Display a map when no content is given.
        // address should come out of store
        // Get selected leaf node
        var record = list.getLastNode();
        
        // Get and update description
        var descriptionField = card.down('#servicedescription');
         descriptionField.setHtml(record.get('description'));
    },

So i need to change the event to leafitemtap? And then? How to add an xmap only to the fourth item of my store? I hope someone can help.

[bluehipy]

If
current record . get( 'address' ) !== ''
Then
container add {xtype:'map'}




To se the address and center the view. read docs and docs
http://docs.sencha.com/touch/2-0/#!/...cfg-mapOptions
https://developers.google.com/maps/d...dressComponent