View Full Version : Handling Master-Detail-Detail displays with back button support

12 Jul 2010, 4:51 AM

Is there a preferred method or pattern for handling apps with master-detail-detail type displays, e.g. a list of items, you select one, it displays a detail list, select one of these and it displays full page details - all with back button support so the user can go back to where they came from and drill down again.

Is the solution to declare multiple panels then display these from the lists on each page. If so can you declare these panels or screens at app start without displaying them, - or is the solution to have multiple .html pages for the app and call these like a normal HTML app would (one screen/panel per .html page).

I have not found it easy to determine the best ways to approach this problem from the API documentation, worked example or ExtJS books/documentation I have read.

Any help would be appreciated.


12 Jul 2010, 5:15 AM
Sorry to reply so quickly to my own post.
I have a rudimentary example working with 2 full screen panels which I can toggle between using show() and hide().
However going back to the first panel causes the status line (toolbar, bottom) to disappear , or rather it goes all white - it does come back when refresh screen - this happens in Chrome and on iPhone.


13 Jul 2010, 1:35 PM
Using two fullscreen panels is not the preferred way to achieve this. You will want to create one fullscreen container, with a layout of card, and switch between your master and detail panels using setCard on the fullscreen container. Please refer to the source code of the examples, since most of them have this type of behavior.

var master = new Ext.List({...list configuration here. store etc...});
var detail = new Ext.Component({
// you probably want to specify a tpl here you fill in your component with some data

master.on('itemtap', function(list, index, item) {

var panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [master, detail]

This code is incomplete and untested, but I hope it shows you the general concept of how to achieve this master detail type of functionality.

Stephan Schrade
13 Jul 2010, 11:56 PM
Ok, many thanks.
But if you would now please add an example how to fill a list with a store (from JSONP with parameters) we all would be very happy.

TIA Stephan

14 Jul 2010, 12:56 PM
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.regModel('Tweet', {
fields: [
{name: 'id', type: 'int'},
{name: 'profile_image_url', type: 'string'},
{name: 'from_user', type: 'string'},
{name: 'text', type: 'string'}

var twitterStore = new Ext.data.Store({
model: 'Tweet',
proxy: {
type: 'scripttag',
url: 'http://search.twitter.com/search.json',
extraParams: {
q: 'sencha',
rpp: 50,
suppress_response_codes: true
reader: {
type: 'json',
root: 'results'
autoLoad: true

var searchField = new Ext.form.SearchField({
placeholder: 'Search',
flex: 1

var timeline = new Ext.List({
fullscreen: true,
dockedItems: {
xtype: 'toolbar',
dock: 'top',
items: [searchField, {
xtype: 'button',
ui: 'mask',
iconCls: 'search',
handler: function() {
var value = searchField.getValue();
if (value.length > 0) {
params: {
q: value
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<img src="{profile_image_url}" />',
'<div class="x-tweetanchor"></div>',
'<div class="tweet-bubble">',
'<div class="tweet-content">',
'<span class="posted">{created_at}</span>',

itemSelector: 'div.tweet',
emptyText : '<p style="padding: 10px">No tweets found matching that search</p>',

store: twitterStore

15 Jul 2010, 12:59 AM
Many thanks for that example code, it works very well with my own data as well. The code I have been wrestling with for the last two days looks very similar but obviously had something wrong as it would not work at all.

This has given me the impetus to go forward again now ... until the next question arises :)