View Full Version : NestedList Issue

9 Mar 2011, 5:26 AM
Sencha Touch version tested:


only default android.css or apple.css

Platform tested against:

Chrome - works
Safari - works
iOS 4 emulator - works
Android 2.1 emulator & device - fails
Android 2.2 emulator - fails


I am using a Nested List on a PhoneGap / Sencha Touch app and struggling with a problem that I just can't seem to get around. When I launch this app, the very first click on a nested list item results in that item being highlighted and then - nothing... subsequent clicks result in the expected behavior. I can "work around" this by simply clicking someplace on the Nested List container where there aren't any items to select - after that all clicks work as expected.

As I hadn't received any help before I've put together a small test case and included it here.

Note this works as expected on web browsers and iOS but does not work on Android (emulator or device).

Test Case:


* createList - This function is called after all of the tables have been loaded

function createList() {

// The model is required as the data requesting methods in callbacks
// only access/pass the parameters listed here.
Ext.regModel('ListItem', {
fields: [
{name: 'ProductName', type: 'string'},

// This is the created root of our data tree -
// Each level of our tree has a name (ProductName) and a subtree (items)
var root = {
ProductName: "Recommended",
items: [
{ ProductName: "Recommended Beverages", items: [], order: 0 },
{ ProductName: "Fruits & Vegetables", items: [], order: 1},
{ ProductName: "Recommended Symbols", items: [], order: 2},
{ ProductName: "Recommended Liquor", items: [], order: 3},
{ ProductName: "Recommended Slurpees", items: [], order: 4},
{ ProductName: "Starbucks Products", items: [], order: 5},

// This is the data store used by the nested list to access our custom list
dataStore = new Ext.data.TreeStore({
model: 'ListItem',
root: root,
sortOnLoad: true,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'

// Create our nested list view using the data tree store above
// Note there is a custom detail card which is displayed when a
// leaf node is clicked.
var listView = new Ext.NestedList({
fullscreen: true,
displayField: 'ProductName',
store: dataStore,
updateTitleText: true,
//getDetailCard: function (){ console.log("getDetailFn") },
scroll: 'vertical',
title: 'Nested List Test'


function init() {

fullscreen: true,
icon: 'images/webIcon72.png',
glossOnIcon: false,
onReady: function(){
new Ext.Application({
name: 'Nested List test',
launch: createList



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="st/resources/css/apple.css" />
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="st/sencha_touch_debug.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<body onload="document.addEventListener('deviceready', init, false);">

Steps to reproduce the problem:

Launch the ST app provided above on iOS/Chrome/Safari. Click on one of the nested listed nodes and it will traverse the tree as expected.
Launch the app provided above on Android. Click on an item - the item highlights but doesn't navigate - click again and it navigates. Note that further navigation may work incorrectly as the first touch does seem to alter internal tree nav state.

The result that was expected:

The clicked item will transition to show its child(ren)

The result that occurs instead:

On Android, the clicked on item will highlight but that's it. You have to click again for the navigation to occur. For the first click you may be able to click outside of the nested list and this may allow the next click to work as expected.

Screenshot or Video:


Debugging already done:

I tried to put in all of the events that I could on the nested list itself but the initial click which caused the problem on Android doesn't seem to be firing.

Possible fix:

not provided

15 Mar 2011, 5:03 PM

16 Mar 2011, 9:45 AM
As a follow-up, I've tested this on an Android 2.3 device and it seems to work as expected, therefore, it appears (to me) as if this may be an issue related to the version of WebKit on devices prior to 2.3.

If I knew that this issue was something that was worked around or fixed in version 1.0.2, I would pay the $300 for it.

If someone with 1.0.2 could check this on an Android 2.2 device I'd appreciate it.

22 Mar 2011, 7:26 PM
Bump ^ 2