Newbie working using panel.hide() through multiple layers.

[djangolackey]

I have a Ext.list() of items in on an initial page. When you click an item an .on() listener fires creating an Ext.Panel() which has a Ext.List() of items in it. When you click one of these items an .on() listener fires creating a third Ext.Panel() with the content detail in it is created. However my back button from the third panel fails on the panel.hide() method. The error is Property '1' of object function (e, args) is not a function.


Here's some code:

Ext.setup({
tabletStartupScreen: '{{ STATIC_MEDIA_URL }}scripts/sencha-touch/resources/themes/images/AO/AO_tablet_splash.png',
phoneStartupScreen: '{{ STATIC_MEDIA_URL }}scripts/sencha-touch/resources/themes/images/AO/AO_splash.png',
icon: '{{ STATIC_MEDIA_URL }}scripts/sencha-touch/resources/themes/images/AO/AO_splash.png',
glossOnIcon: true,
onReady : function() {
var numberOfStories = 50;
var Section = Ext.regModel('Section', {
idProperty:'section_id',
fields: [
{name: 'section_id', type: 'int'},
{name: 'url', type: 'string'},
{name: 'name', type: 'string'},
{name: 'updated', type: 'date'},
{name: 'story_count', type: 'int'}
],
hasMany: 'Stories'
});


var Story = Ext.regModel('Story', {
idProperty:'story_id',
fields: [
{name: 'section_id', type: 'int'},
{name: 'story_id', type: 'int'},
{name: 'kicker', type: 'string'},
{name: 'headline', type: 'string'},
{name: 'subhead', type: 'string'},
{name: 'bylines', type: 'string'},
{name: 'pub_date', type: 'date'},
{name: 'update_date', type: 'date'},
{name: 'dateline', type: 'int'},
{name: 'tease', type: 'string'},
{name: 'pre_story_blurb', type: 'string'},
{name: 'story', type: 'string'},
{name: 'post_story_blurb', type: 'string'},
{name: 'tease_photo', type: 'string'},
{name: 'lead_photo', type: 'string'},
{name: 'small_thumbnail', type: 'string'},
{name: 'large_thumbnail', type: 'string'},
{name: 'is_printed', type: 'boolean', default_value: 'False'},
{name: 'subscription_required', type: 'boolean', default_value: 'False'},
{name: 'print_page', type: 'int'},
{name: 'print_edition', type: 'int'},
{name: 'print_section', type: 'int'}//,
// {name: 'default_framing', type: 'int'},
// {name: 'categories', type: 'auto'},
// {name: 'status', type: 'int'},
// {name: 'comment_status', type: 'int'},
],
createThumb: function() {
if (this.get('lead_photo')) {
this.set('small_thumbnail', this.get('lead_photo').replace(/(.*)\.([a-zA-Z0-9]+)$/, '<img src="$1_t120.$2" alt="" />'));
this.set('large_thumbnail', this.get('lead_photo').replace(/(.*)\.([a-zA-Z0-9]+)$/, '<img src="$1_t300.$2" alt="" />'));
}
},
belongsTo: 'Section'
});


Ext.regModel('NavItems', {
fields: ['link', 'icon', 'name']
});


var THEME_MEDIA_URL = '{{ STATIC_MEDIA_URL }}scripts/sencha-touch/resources/themes/images/AO/';
var navList = new Ext.data.JsonStore({
model : 'NavItems',
width : 175,
data : [
{section_id: 36, url: '/news/latest/', icon: THEME_MEDIA_URL+'nav_icon.jpg', name: 'Latest News'},
{section_id: 362, url: '/news/news/', icon: THEME_MEDIA_URL+'nav_icon.jpg', name: 'News'},
{section_id: 364, url: '/news/business/', icon: THEME_MEDIA_URL+'nav_icon.jpg', name: 'Business'},
{section_id: 366, url: '/news/entertainment/', icon: THEME_MEDIA_URL+'nav_icon.jpg', name: 'Entertainment'},
{section_id: 363, url: '/news/sports/', icon: THEME_MEDIA_URL+'nav_icon.jpg', name: 'Sports'},
{section_id: 34, url: '/news/entertainment/features/', icon: THEME_MEDIA_URL+'nav_icon.jpg', name: 'Features'}//,
// {section_id: 36, url: '/galleries/', icon: THEME_MEDIA_URL+'nav_icon.jpg', name: 'Galleries'},
],
proxy: {
type: 'localstorage',
id: 'section_id'
}
});
var storyLocalStore = new Ext.data.Store({
model: 'Story',
proxy: {
type: 'localstorage',
id : 'story_id'
},
groupDir: 'ASC',
getGroupString: function(instance) {
return instance.get('section_id');
}
});


var getSectionIds = function() {
ids = '';
navList.each(function (record) {ids += record.data.section_id + ',';});
console.log(ids);
return ids
};


var storyListStore = new Ext.data.JsonStore({
autoLoad : true,
model : 'Story',
proxy : {
type : 'ajax',
url : '/news/ajax/?ids='+getSectionIds(),
reader : {
type : 'json',
root : 'stories',
},
timeout: 2000,
listeners: {
exception:function () {
console.log("I think we are offline");
storyLocalStore.load();
}
}
},
/*
sorters: [
{property: 'pub_date', direction: 'DESC'},
{property: 'update_date', direction: 'DESC'}
],
getGroupString : function(record) {
return record.get('pub_date')[0];
},
*/
totalProperty: 'stories.totalRows',
});


storyListStore.addListener('load', function () {
console.log("I think we are online");
storyLocalStore.proxy.clear();
storyListStore.each(function (record) {
record.createThumb();
var story_id = storyLocalStore.add(record.data)[0];
});
storyLocalStore.sync();
});


var getstories = function(section_id) {
storyLocalStore.clearFilter(true);
storyLocalStore.filter('section_id', section_id, false, false);
console.log('here it is: ' + storyLocalStore.data);
return storyLocalStore;
};


var list = new Ext.List({
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="stories">',
'{small_thumbnail}',
'<h2>{headline}</h2><p class="date">{pub_date:date("F j, Y, g:i a")}</p><img class="arrow" src="{{ STATIC_MEDIA_URL }}ellington_mobile_default/images/bracket_right.gif" alt=">" />',
'</div>',
'</tpl>'
),
itemSelector : 'div.stories',
store : storyLocalStore,
baseCls : 'story_list',
height : 730,
scroll : 'vertical'
});


var sectionStories = new Ext.List({
height: 730,
activeItem: 0,
store: navList,
baseCls: 'section_list',
itemSelector : 'div.sections',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="sections">',
'<h2>{name}</h2><img class="arrow" src="{{ STATIC_MEDIA_URL }}ellington_mobile_default/images/bracket_right.gif" alt=">" />',
'</div>',
'</tpl>'
)


});
var navBar = new Ext.Panel({
dock : 'bottom',
height: 75,
title: '',
id: 'footer',
items: [
{
html: '<a href=""><img src="{{ STATIC_MEDIA_URL }}ellington_mobile_default/images/icons/nav_news.png" alt="" /></a>'
},
{
html: '<a href=""><img src="{{ STATIC_MEDIA_URL }}ellington_mobile_default/images/icons/nav_events.png" alt="" /></a>'
},
{
html: '<a href=""><img src="{{ STATIC_MEDIA_URL }}ellington_mobile_default/images/icons/nav_best_bets.png" alt="" /></a>'
},
{
html: '<a href=""><img src="{{ STATIC_MEDIA_URL }}ellington_mobile_default/images/icons/nav_news.png" alt="" /></a>'
}
],
layout: 'hbox',
});


var contentBlock = new Ext.Panel({
height: 730,
title: '',
id: 'mainContent',
items: [sectionStories],
});


var device_detection = function(){
if (Ext.is.iPad) {
contentBlock.setSize({height:730});
return 'ipad';
} else if (Ext.is.iPhone || Ext.is.iPod) {
contentBlock.setSize({height:400});
return 'iphone';
} else if (Ext.is.Android) {
return 'android';
} else if (Ext.is.Mac) {
contentBlock.setSize({height:730});
return 'mac';
} else {
return 'none';
}


};


var addLogoToHomescreen = new Ext.Container({
floating : true,
html : '<p><span class="tip">TIP:</span> To put our icon on your homescreen press the plus then "add to homescreen"</p>',
padding : 10,
baseCls : device_detection() + '_icon_encouragement'
});


// Create the header
var header = new Ext.Panel({
id: 'header',
height: 121,
html: '<div id="header"><h1><a href="/"><img src="{{ STATIC_MEDIA_URL }}mobile/img/arkansasonline-mobile_logo_e2.jpg" alt="Arkansas Online Mobile"></a></h1></div>'
});
// Create the wrapper (which has the fixed height header and scroller)
var wrapper = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [header, contentBlock],
dockedItems: [addLogoToHomescreen,navBar],
padding:10,
baseCls: 'x-wrapper'
});


sectionStories.on('itemtap', function(dataView, index, item, e){
var this_section = dataView.store.data.items[index].data;
console.log(this_section.name + ' tapped');
var sectionToolbar = new Ext.Toolbar({
dock : 'top',
title: this_section.name,
items: [
{text: 'Back',
ui: 'back',
handler: function(){
section_panel.hide();
}}
]
});
console.log(this_section.section_id)
storyLocalStore.clearFilter(true);
storyLocalStore.filter('section_id', this_section.section_id, false, false);
var section_panel = new Ext.Panel({
id : 'sectionPanel',
fullscreen : true,
scroll : 'vertical',
showAnimation: 'slide',
floating : true,
dockedItems: [sectionToolbar,],
items: [list]
});
section_panel.show();
});




list.on('itemtap', function(dataView, index, item, e){
var this_story = dataView.store.data.items[index].data;
console.log(this_story.headline + ' tapped');
var template = new Ext.XTemplate(
'<div class="story_content" style="padding:20px;">',
'<h1>{headline}</h1>',
'<h2>{subhead}</h2>',
'{large_thumbnail}',
'<p><strong>{pub_date}</strong></p>',
'{story}',
'<p>{post_story_blurb}</p>',
'</div>'
);
var str = template.apply(this_story);
var storyToolbar = new Ext.Toolbar({
dock : 'top',
title: 'Story',
items: [
{
text: 'Close',
ui: 'back',
handler: function(){
story_panel.hide();
}
}
]
});
var story_panel = new Ext.Panel({
id : 'storyPanel',
fullscreen : true,
scroll : 'vertical',
showAnimation: 'slide',
floating : true,
dockedItems: [storyToolbar],
html: str
});
story_panel.show();
});
}
});

[bharatn]

Best way to do this is via a Panel with 'card' layout having 2 items. 1st item will be a list and 2nd item will be Panel with 'card' layout and so on. In Back button handler use Panel's setActiveItem API to switch to previous card.