PDA

View Full Version : Nested List - Initial Selection Failure (BUG in Sencha Touch?)



ferneau
20 Feb 2011, 9:30 PM
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 but does not work on Android (emulator or device).

main.js:


/*
* createList - This function is called after all of the tables have been loaded
*/
function createList() {

console.log("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 mainScreen() {

console.log("mainScreen");

// Setup event listeners for PhoneGap
document.addEventListener("deviceready", createList, false);

// If this is not a phone (hence no phonegap, continue the processing)
if (!Ext.is.Phone) {
console.log("init: manually calling createList()");
createList();
}
}

function init(){

console.log("init()");

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

console.log("post Ext.setup()");
}


index.html:



<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<link rel="stylesheet" type="text/css" href="st/resources/css/android.css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="st/sencha-touch.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body onload="init();"></body>
</html>

ferneau
22 Feb 2011, 3:05 AM
Alright - I went ahead and tried the code on iOS and it works as expected but it still does not work on Android. To me that points to a bug in Sencha Touch for Nested List behavior. I made a small tweak to the code above so that the iOS and Android test code is identical.

To restate the problem - a Nested List is created full screen as the first/main interaction component. After it is created, the very first time the user tries to click on an item, it highlights but nothing happens. If instead the first touch is on the list but not on an item (say an empty area) then subsequent touches work just fine. For what it's worth, if we click on an item first and nothing happens then subsequent clicks do have issues navigating the Nested List hierarchy.

New code (that works on iOS and not on Android) is:

main.js:


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

function createList() {
//alert("createList");
console.log("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'
});
//alert("post-nestedlist");

}

function init() {
//alert("init");
console.log("init");

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

}


index.html:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- 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" />

<title>NestedListTest</title>
<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>
</head
<body onload="document.addEventListener('deviceready', init, false);">
</body>
</html>


Just to ensure that you can see what's going on - here's an image. Note I did not change to use the
Android CSS so don't be confused by the iOS look/feel on the Android Simulator.

http://www.rocketouch.com/tmp/NestedListFail-Android.jpg

Thank you for any help.

luisvsilva
1 Aug 2011, 5:47 AM
Is there any update on this issue. I am also experiencing this. Any known workaround or solution?

Thanks

Luis

ferneau
1 Aug 2011, 12:01 PM
I wish I could say that this was resolved but this issue was such a problem I actually dropped Sencha and went straight to the Android SDK. I wish I could have stuck around and used Sencha + PhoneGap. Unfortunately I didn't have the time to waste.

luisvsilva
1 Aug 2011, 5:26 PM
So this is known since February and hasnt been fixed yet? I wonder if this is happening with all the Androids? or just with some specific handsets...

I dont have time now to build an SDK version, but I am starting to regret it:

-Animations (and performance in general) are slow and jerky
-Initial Selection Failure
-Styling problems - transparencies are being ignored when panels slide

ferneau
1 Aug 2011, 5:34 PM
The problem is with specific handsets - that's the problem. It's probably less of a Sencha issue than it is an Android issue. That being said, it is - to me - a major failing.

Honestly since I jumped off of Sencha I haven't been paying attention to the boards anymore. I even have paid support...