PDA

View Full Version : Navigation view detail panel created from code



lucianf
6 May 2012, 11:47 PM
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" (http://sencha.com/blog/sencha-designer-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:

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:

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:

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:

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:

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'
}
}
}
});