1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    1
    Vote Rating
    0
    lucianf is on a distinguished road

      0  

    Default Navigation view detail panel created from code

    Navigation view detail panel created from code


    Hi All,

    Sorry if this may have a very simple solution, but I've been banging my head for a couple of days already and can't figure out what's wrong. Obviously I'm still in my early days with ST.. so would really appreciate the help.

    I'm trying to follow the "Building a ST Mobile App with Sencha Designer 2 Beta" guide (posted by Phil). I think I've followed all the instructions, but I can't get the detail panel to come up correctly.

    To sum up, I have a Navigation view that shows a list of items (populated from a local store).
    I have an "on list item tap" function that creates a detail panel upon the first tap, and then reuses that panel upon subsequent taps. In my case, on the first tap it works just fine (the panel gets displayed), but after that I'm getting "Uncaught TypeError: Cannot call method 'child' of null", as if the "details" object is no longer correct.

    Please see the relevant code below. I don't know what happens with me.details after the first tap, but somehow it loses the connection to the detail panel. The object still exists, but has no children etc. Any idea what may be going on?

    PS. If I change the ontap function to always create the detail panel (basically, drop the "if (!me.details)" condition, it works perfectly. However, since this was there in the example, I assume there's a strong reason (probably, performance-related) for not doing this..

    Much appreciated!
    Lucian

    -- code follows

    app.js:
    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    
    Ext.application({
        models: [
            'Customer'
        ],
        stores: [
            'CustomerStore'
        ],
        views: [
            'MainNav',
            'ListContainer',
            'DetailPanel'
        ],
        name: 'TabletApp',
        controllers: [
            'Customer'
        ],
    
    
        launch: function() {
    
            Ext.create('TabletApp.view.MainNav', {fullscreen: true});
        }
    
    
    });
    app/controller/Customer.js:
    Code:
    Ext.define('TabletApp.controller.Customer', {    extend: 'Ext.app.Controller',
        config: {
            refs: {
                dataList: '#dataList',
                listCard: '#listCard',
                mainNav: 'mainnav',
                detailCard: '#detailCard'
            },
    
            control: {
                "#dataList": {
                    itemtap: 'onListItemTap'
                }
            }
        },
    
    
        onListItemTap: function(dataview, index, target, record, e, options) {
            var me = this;
    
            if (record) {
    
                if (!me.details) {
                    me.details = Ext.create('TabletApp.view.DetailPanel', {title: 'Details'});
                }
    
                 // set the info
                var info = me.details.child('#contact').child('#info');
                info.child('#id').setData(record.data);
                info.child('#data').setData(record.data);
                me.getMainNav().push(me.details);
            }
        }
    
    });
    app/view/MainNav.js:
    Code:
    Ext.define('TabletApp.view.MainNav', {
        extend: 'Ext.navigation.View',
        alias: 'widget.mainnav',
        requires: [
            'TabletApp.view.ListContainer'
        ],
    
        config: {
            items: [
                {
                    xtype: 'listcontainer',
                    id: 'listCard',
                    title: 'Customers'
                }
            ],
            navigationBar: {
    
            }
        }
    
    
    });
    app/view/ListContainer.js:
    Code:
    Ext.define('TabletApp.view.ListContainer', {
        extend: 'Ext.Container',
        alias: 'widget.listcontainer',
    
        config: {
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'list',
                    id: 'dataList',
                    itemTpl: [
                        '<div>ID: {id}, Name: {firstName} {lastName}</div>'
                    ],
                    store: 'CustomerStore'
                }
            ]
        }
    
    
    });
    app/view/DetailPanel.js:
    Code:
    Ext.define('TabletApp.view.DetailPanel', {
        extend: 'Ext.tab.Panel',
        alias: 'widget.detailpanel',
    
    
        config: {
            items: [
                {
                    xtype: 'container',
                    id: 'contact',
                    title: 'Customer',
                    items: [
                        {
                            xtype: 'container',
                            id: 'info',
                            padding: 10,
                            layout: {
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'component',
                                    height: 100,
                                    id: 'id',
                                    tpl: [
                                        'ID: {id}'
                                    ],
                                    width: 100
                                },
                                {
                                    xtype: 'component',
                                    id: 'data',
                                    padding: 10,
                                    tpl: [
                                        '<h2>{firstName} {lastName}</h2><br>',
                                        '{address} {city}'
                                    ]
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            layout: {
                                pack: 'center',
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'button',
                                    width: 150,
                                    text: 'View'
                                },
                                {
                                    xtype: 'spacer',
                                    width: 50
                                },
                                {
                                    xtype: 'button',
                                    width: 150,
                                    text: 'Edit'
                                }
                            ]
                        }
                    ]
                }
            ],
            tabBar: {
                docked: 'top',
                ui: 'light',
                layout: {
                    pack: 'center',
                    type: 'hbox'
                }
            }
        }
    });
    Last edited by lucianf; 6 May 2012 at 11:50 PM. Reason: One more thing

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi