Getters, Setters and Ext.getCmp - how to update another panel on tap

[digeridoopoo]

I'm trying to understand the relationship with getters and setters and Ext.getCmp properly in regards to getting information and updating a panel.
I basically understand how getters and setters work, referring to the city bars example this bit of code is used, so that on tap the new view is pushed into view in a single screen:

me.getMainNav().push(details);

However I get stuck when in a split screen scenario where I would like to update the main panel when tapping on the left hand panel. The detail panel has an id of detail panel and class name of DetailPanel.
I have tried bits of code like this:

me.getDetailPanel().push(details);

but I get the error:

Uncaught TypeError: Object [object Object] has no method 'getDetailPanel'

How would you go about updating another panel with information instead of pushing into an existing view like the above?


Would I have to use Ext.getCmp?


Thanks

[eastlander]

try:

Ext.Viewport.down('#idofotherpanel')

or

Ext.Viewport.down('panel[class=classofotherpanel]')

[mitchellsimoens]

Is the getDetailPanel method coming from a ref?

[digeridoopoo]

The confusion for me is whether I should be 'pushing' the page to the detail view or if I should be using some other method. Is pushing an item into view usually only used in single screen views, or can you push to other components?

When I try this code (I'm posting a bit more for you to see) I get in the console this error:

'Uncaught TypeError: Object [object Object] has no method 'push''

So I'm guessing I can't use the push method.

I'm starting to think maybe the detail panel should be a viewport somehow and it should just be updating the viewport on tap but not sure where to go from here. Here's some more code:

Ext.define('CityBars.controller.Business', {
    extend: 'Ext.app.Controller',


    config: {
        refs: {
            dataList: '#dataList',
            listCard: '#listCard',
            mainNav: 'mainnav',
            detailPanel: '#detailpanel'
        },


        control: {
            "#dataList": {
                itemtap: 'onListItemTap'
            },
            "detailpanel button[text='Call']": {
                tap: 'onCallButtonTap'
            }
        }
    },


    onListItemTap: function(dataview, index, target, record, e, options) {
        var me = this,
            map,
            lat,
            lon,
            loc,
            marker,
            info, details;


        if (record) {


            details = Ext.create('CityBars.view.DetailPanel', {
                title: 'Details'
            });


            // set the map
            map = details.child('#detailMap');
            lat = record.get('latitude');
            lon = record.get('longitude');


            map.setMapOptions({
                zoom: 18
            });


            map.setMapCenter({
                latitude: lat,
                longitude: lon
            });


            // set the info
            //   info = details.child('#contact').child('#info');
            //   info.child('#photo').setData(record.data);
            //   info.child('#data').setData(record.data);


            //     me.getMainNav().push(details);
            var DetailPanel = Ext.getCmp('detailpanel');
            me.getDetailPanel().push(details);  --> Doesnt work, pushing the details from above into the detailpanel
            //   Ext.Viewport.add('#detailpanel')


        }
    },