PDA

View Full Version : JSON store/view bug?



Seth_J
21 Nov 2011, 1:48 PM
I have an application that requests JSON and sends it to a store/view then to a list. Each item selected requests a new JSON data and displays it in the list.. pretty simple. Even pressing the back button sends a "back" request and new JSON data.

The problem is when I get a few levels deep the list breaks. console.log still shows the JSON being returned and processed correctly but the data never makes it to the list. From then on the list is broken and you have to refresh the entire app to get it back.

All the JSON messages check out in JSONLint.... Using Touch 1.1.1.

Any ideas?

Controller:

GoR.controllers.GoRController=Ext.regController("GoRController",{
remoteCommandJson: function(params){
var host = localStorage.serveraddress;
var uuid = device.uuid;
var port = '4041' //fixed port at 4041
var makeurl = 'http://'+host+':'+port+'/?id='+uuid+'&action='+params.actionName+'&cmd='+params.cmd;
Ext.Ajax.request({
url: makeurl,
scope : this,
timeout: 10000,
success: function(response){
GoR.views.devicelist.setLoading(false);
GoR.serverstatus="Status: Connected to Server";
Ext.getCmp('serverstatuspanel').update(GoR.serverstatus);

this.listData = Ext.decode(response.responseText);

if (this.listData.listresponse) {

GoR.stores.RoomDeviceListStore.loadData(this.listData.listresponse.listdata);
GoR.views.toolbar.setTitle(this.listData.listresponse.listinfo.listname);
if(this.listData.listresponse.listinfo.container){
Ext.getCmp('btnBack').setVisible(true);
}else{
Ext.getCmp('btnBack').setVisible(false);
}
}
else if(this.listData.listcontrol){
if(this.listData.listcontrol.controlinfo.name=="AV"){
Ext.getCmp('navigation').setActiveItem(0);
}
}


},
failure:function(response){
GoR.serverstatus="Unable to reach Server.<br />Please check network settings.";
Ext.getCmp('serverstatuspanel').update(GoR.serverstatus);
GoR.views.devicelist.setLoading(false);
Ext.getCmp('navigation').setActiveItem(2); // time out reached send to settings page
}

});

}

});

Model:

GoR.models.Remote=Ext.regModel('Remote', { fields: [
{
name:'id',
type:'int'
},
{
name:'iconcls',
type:'string'
},
{
name:'selectable',
type:'boolean'
},
{name:'label',
type:'string'
}]
});
Store:

GoR.stores.RoomDeviceListStore= new Ext.data.Store({ model:'Remote',
data : []
});
View:

GoR.views.RoomDeviceListPanel=Ext.extend(Ext.Panel,{ title: 'List',
iconCls: 'icnList',
layout:'fit',
initComponent:function(){


GoR.views.currentListTitle='';
GoR.views.toolbar = new Ext.Toolbar({

title: '',

items: [
{
text: 'Back',
id:'btnBack',
ui: 'back',
hidden:true,
handler: function(){
GoR.views.devicelist.setLoading(true);

Ext.dispatch({
controller:'GoRController',
action:'remoteCommandJson',
actionName:'LISTBACK',
cmd:'0'
});


}
}
]
});











GoR.views.devicelist= new Ext.List({

store: GoR.stores.RoomDeviceListStore,
itemTpl: '<div class="item-title {iconcls}">{label}</div><tpl if="selectable !== false"><div class="x-list-disclosure"></div></tpl> ',
loadingText:'Loading...',
emptyText:"Unable to load list. <br />Please check network settings.",
listeners: {
itemtap: function(dataView, index, item, e) {
this.setLoading(true);

Ext.dispatch({
controller:'GoRController',
action:'remoteCommandJson',
actionName:'KEYPRESS',
cmd:index+''
});
Ext.getCmp('btnBack').show();

}
}
});
var config={
dockedItems: [GoR.views.toolbar],
items:[GoR.views.devicelist]

};
Ext.apply(this, config);
GoR.views.RoomDeviceListPanel.superclass.initComponent.apply(this, arguments);
}

});

mitchellsimoens
22 Nov 2011, 1:02 PM
All you need to do is add/remove from the Panel.. you can do that all day.

Seth_J
22 Nov 2011, 3:34 PM
Mitchell -- I must be over-thinking something... Can you point me in the right direction?

Seth_J
27 Nov 2011, 11:51 AM
A little more digging and testing. I found that the list gets 'stuck' above the title bar. In the iPhone simulator if you pull down the list will appear and redraw itself correctly. On the phone it does not exhibit this behavior and you're stuck looking at a blank page.

Seth_J
30 Nov 2011, 11:13 AM
This seems to be a problem with the number of items in the data. Most of the smaller lists only have 5-10 items but I have one that is about 90 items. Once that one is parsed Sencha stops rendering the list component for some reason.

I know the data is valid (JSONLint) and it parses correctly since I see the top toolbar's title changing.

:(

mitchellsimoens
30 Nov 2011, 11:16 AM
Are you sure Sencha stops or the device is? Remember, you are on a mobile device and you should limit the amount rendered at one time.

Seth_J
30 Nov 2011, 11:37 AM
It renders the "long" list every time... its the list after that will break every time. Then getting out of the view and going back in doesn't display the first list. You have to kill the application and reload it to get the view to render again..

It also renders the title in the toolbar at the top correctly -- just not the list portion which is all part of the same JSON data packet.

Seth_J
6 Dec 2011, 12:40 PM
After debugging I keep finding is the list is being generated but it is placed above the title bar -- so the last item is out of reach of the cursor. It takes 8-9 items in the list before you can (barely) see the bottom of the last item.

This really seems like a bug in Sencha. According to the online documentation I'm doing everything correctly. It is just not being rendered correctly.

Is there a setting that tells the list panel where to render that I'm missing?

mitchellsimoens
6 Dec 2011, 12:48 PM
Not really... a Panel with layout fit should fit the list properly. The only think I can think of is


GoR.views.RoomDeviceListPanel.superclass.initComponent.apply(this, arguments);

should be


GoR.views.RoomDeviceListPanel.superclass.initComponent.call(this);

Seth_J
6 Dec 2011, 12:57 PM
While that did seem to render things a little faster it still had the same outcome.

Seth_J
6 Dec 2011, 3:59 PM
I was able to limit my lists to 25-30 or so items. While this is not ideal it does solve the problem for the time being. I noticed the problem sprang back up about 40 items (not sure of the exact number).

I still think this is a bug. The list does render but in the wrong location above the top tab bar.


-----------

Edit: Length of the list does not matter. Over time the list will render incorrectly above the top tab bar and out of the view.

This is frustrating.

Seth_J
7 Dec 2011, 8:56 AM
HA! I figured out the 'actual' problem!!

If I get a long list (90 items) and scroll down the list and select an item at the bottom. The next list retains its vertical location on the screen. For example if I scroll down 300px and select an item. The next list will render -300px above the top tab bar. Sencha is remembering where vertically it is on the screen and renders the next page at that height -- so if the list is smaller (4 items) there will be a four item list rendered -300px above the top tab bar and no way to retrieve it.

Weird...

Seth_J
7 Dec 2011, 4:25 PM
Okay.. got it working!! Just needed this:


List.doComponentLayout();

Found this thread (http://www.sencha.com/forum/showthread.php?110053-Reset-list-scroll-position-to-top) in one of the other forums which lead me here (http://www.movableapp.com/2011/09/sencha-touch-list-scroll-to/). Awesome...