Strange problem....please help

[spaceman123]

I wonder if somebody could help me please. I am trying to build my very first Sencha Touch app and although I am enjoying it I'm finding a few problems that I'm having trouble sorting. I have a strange problem at the moment and didn't know how to fix it.
I've been testing my app as I go on an iPad and in Safari and it all works fine. This morning however I decided to test it on an iPhone. It all loaded okay and the forms loaded no problems. The problem occurred when I tried to load the nestedList stuff - on an iPhone it was completely blank :( I've not got a clue why it's not loadinging them on an iPhone.

Does anybody here know why this is happening and how I can fix it?

Thanks.

By the way the nestedList code is:

// wrap in closure to avoid global vars.
(function() {

Ext.regModel('Album', {
fields: [
{name: 'text', type: 'string'}
]
});


var txtFld = new Ext.form.Text({
label: 'Name'
});

var calculateDesiredWidth = function() {
var viewWidth = Ext.Element.getViewportWidth(),
desiredWidth = Math.min(viewWidth, 400) - 10;

return desiredWidth;
};


var editPnl = new Ext.Panel({
floating: true,
centered: true,
modal: true,
width: calculateDesiredWidth(),

dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Review Album'
},{
dock: 'bottom',
xtype: 'toolbar',
items: [{
text: 'Cancel',
handler: function() {
editPnl.hide();
}
},{
xtype: 'spacer'
},{
text: 'Change',
ui: 'action',
handler: function() {
var activeList = demos.NestedList.getActiveItem(),
record = activeList.getSelectedRecords()[0];
record.set('text', txtFld.getValue());

// Workaround: selection *should* be maintained.
activeList.getSelectionModel().select(record);

editPnl.hide();
}
}]
}],
items: [{
xtype: 'form',
items: [{
xtype: 'fieldset',
items: [txtFld]
}]
}]
});

Ext.EventManager.onOrientationChange(function() {
editPnl.setWidth(calculateDesiredWidth());
});

var editBtn = new Ext.Button({
text: 'Review',
disabled: true,
handler: function() {
editPnl.show();

var activeList = demos.NestedList.getActiveItem(),
record = activeList.getSelectedRecords()[0];

txtFld.setValue(record.get('text'));
}
});

var actionBar = new Ext.Toolbar({
ui: 'decline',
ui: 'action',
ui: 'confirm',
dock:'bottom',
items:[
{ ui: 'confirm', text: 'View' },
{ ui: 'action', text: 'Review' },
{ ui: 'decline', text: 'Report' }
]
});

var one = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../one.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.one = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: one
});

var two = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../two.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.two = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: two
});

var three = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../three.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.three = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: three
});

var four = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../four.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.four = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: four
});

var five = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../five.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.five = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: five
});

var six = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../six.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.six = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: six
});

var seven = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../seven.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.seven = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: seven
});

var eight = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../eight.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.eight = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: eight
});

var nine = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../nine.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.nine = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: nine
});

var ten = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../ten.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.ten = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: ten
});

var eleven = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../eleven.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.eleven = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: eleven
});

var twelve = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twelve.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twelve = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twelve
});

var thirteen = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../thirteen.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.thirteen = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: thirteen
});

var fourteen = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../fourteen.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.fourteen = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: fourteen
});

var fifteen = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../fifteen.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.fifteen = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: fifteen
});

var sixteen = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../sixteen.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.sixteen = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: sixteen
});

var seventeen = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../seventeen.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.seventeen = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: seventeen
});

var eighteen = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../eighteen.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.eighteen = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: eighteen
});

var nineteen = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../nineteen.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.nineteen = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: nineteen
});

var twenty = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twenty.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twenty = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twenty
});

var twentyone = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twentyone.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twentyone = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twentyone
});

var twentytwo = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twentytwo.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twentytwo = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twentytwo
});

var twentythree = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twentythree.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twentythree = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twentythree
});

var twentyfour = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twentyfour.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twentyfour = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twentyfour
});

var twentyfive = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twentyfive.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twentyfive = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twentyfive
});

var twentysix = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twentysix.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twentysix = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twentysix
});

var twentyseven = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twentyseven.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twentyseven = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twentyseven
});

var twentyeight = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twentyeight.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twentyeight = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twentyeight
});

var twentynine = new Ext.data.TreeStore({
model: 'Album',
proxy: {
type: 'ajax',
url: '../../twentynine.asp',
reader: {
type: 'tree',
root: 'items'
}
}
});

demos.twentynine = new Ext.NestedList({
plugins: [new Ext.LeafSelectedPlugin()],
toolbar: {
items: [{xtype: 'spacer'},actionBar]
},
store: twentynine
});

// leafselected event is provided by the LeafSelectedPlugin.js
demos.NestedList.on('leafselected', function(enabled) {
editBtn.setDisabled(!enabled);
});



})();

[ssawant]

Hi,

I don't have much details.
Have you used phonegap + mac to build the application for iphone?
I guess, some provioning profile is needed to run the mobile application on iphone.

Thanks.

[spaceman123]

I've only used the Sencha Touch demo files to help build this. It's all been completely built in that. The thing that's puzzling me is that it's working on an iPad - the Sencha Touch 'kitchensink' demo works fine on an iPhone and I've taken my files from that demo :(

[mitchellsimoens]

Seriously? 29 of basically the same thing? Wow.

Have you tried it again on the iPad and Safari? There shouldn't be a different between the iPhone and iPad unless you have an iPhone 3GS or before. If you do have an older iPhone then I would say you are hitting your resources.

[spaceman123]

Yeh there different albums. Not very original filenames though!! I've tried it on an iPhone 3GS as well as 4G and it didn't work on either. I didn't think there was a difference between the iPad and iPhone either though

[mitchellsimoens]

iPad and iPhone 4G no but 3GS and before yes, iPad is faster.

Have you tried it in Safari? If it doesn't work then look at error. If it works, clean up your code and try again.

[spaceman123]

I've tried it in Safari and it works fine there :S Sorry to be a pain but how do I clear the code up? I'm very new to this

[mitchellsimoens]

Each NestedList is an album? For that you can combine into one NestedList only starting with a list of albums.

What's the next level? Songs? Each album item then has songs as children. You can make everything into 1 NestedList and then 1 call to your asp code. That would be huge for you.

[spaceman123]

Each NestedList is a category of album then the next level is artwork, tracks, artist and a link to amazon. I'm happy making everything one list, but it's for a website where people can add there own albums and it's then listed via categories. Hence the different lists. When it's finished it'll be things like Pop, Rock, Country rather then one, two, three etc. Each category has an id number which displays only that category, but I'm not sure how to get that without having different lists?

[mitchellsimoens]

NestedLists are great for tree structured data. If you look at the Kitchen Sink example, the navigation part on the left (or button) is a NestedList. Click on an item and it loads a new listing of stuff based on what you clicked. If you don't need structured data then use a regular List.

For you, you have multiple categories. Each category has multiple albums. This is structured data so 1 NestedList can handle all of this.

I'm not sure how to do this in ASP as I am more of a PHP guy. You can visualize what you need to return by looking at the example in the API Docs. http://dev.sencha.com/deploy/touch/docs/?class=Ext.NestedList

Basically you need to return JSON like this:


[
{
text: "Pop",
items: [
{ text: "Album Name", leaf: true },
{ text: "Album Name", leaf: true },
{ text: "Album Name", leaf: true }
]
},
{
text: "Rock",
items: [
{ text: "Album Name", leaf: true },
{ text: "Album Name", leaf: true },
{ text: "Album Name", leaf: true }
]
},
{
text: "Country",
items: [
{ text: "Album Name", leaf: true },
{ text: "Album Name", leaf: true },
{ text: "Album Name", leaf: true }
]
}
]

Whatever is the end object, you need to add leaf: true to that object. I have added them on the albums but if you need to go a step further then remove them from the album and place it on the next level. Leaf tells the NestedList that it is the end of that tree structure.

[spaceman123]

I'm sorry to be such a pain, but the category titles are in one database with everything else being in another so hence me doing it like this.
The structure is more like this:
Each album title is listed, then when you click on that it shows the details such as description, tracks artist link etc. But before you can click on any album title you have to select the category. Unfortunately I don't normally use ASP either - preferring PHP so it's causing double problems for me :s

[mitchellsimoens]

Just because you are using 2 databases doesn't mean you cannot combine the data on the backend. Trust me, doing it the way you were doing, is not going to end good. You have to combine into one call.

[spaceman123]

Thanks, I'll see if I can work out how to combine them

[spaceman123]

Okay I've combined all of the data into one call, but when I then go to test it on both and iPhone 3GS and iPhone 4G it doesn't show anything still. I've removed all references to the other calls so it's only call all of the data once, ut again still nothing