PDA

View Full Version : Dataview repaint issue



parky128
3 Oct 2012, 12:14 PM
Hi,

I have encountered a situation after upgrading to the 2.1.0b3 with a List component in my application.

See the before and after screenshots attached.

I have a Map panel which is 'bound' to the same store as the Locations list

When I click the refresh button in the top toolbar when viewing the map screen, markers on the map change position (if new data is available). Likewise the Locations list rows update and re-sorts. When switching back to the Locations lists from the Map panel, I end up with the horrible looking rows as per the attached 'after' image.

This doesn't happen when viewing the list and doing a refresh, it updates and re-sorts and displays as expected.

Is this something to do with the list view no longer being in the viewport as an active item when viewing the Map and not handling the updates\store sort properly in the DOM structure?

In case it's relevant, here is the code for the Locations list:


Ext.define('PinpointersTouch.view.UnitList', {
extend: 'Ext.dataview.List',
xtype: 'unitslist',

config: {
emptyText: 'There are no vehicles in your tracking list.',
loadingText: false,
itemTpl: new Ext.XTemplate(
'<ul id="unitList">',
'<tpl for=".">',
'<li>',
'<table width="100%" cellspacing="0">',
'<tr>',
'<td style="width:24px; text-align:center;"><img src="resources/images/{[values.InJourney == true ? "green_vehicle_icon": "red_vehicle_icon"]}.png"/></td>',
'<td valign="top">&nbsp;{UnitName}</td>',
'</tr>',
'</table>',
'<div class="journeyCurrentLocation">{Location}</div>',
'<span class="journeyDetail">{Subtitle}</span>',
'<div class="journeyLastReportedTimestamp"><b>Last Reported at:</b> {EventDTDisplay}</div>',
'</li>',
'</tpl>',
'</ul>'),
store: 'CurrentGrid',
items: [{
xtype: 'toolbar',
docked: 'bottom',
ui: 'light',
items: [{
xtype: 'label',
html: 'Show:',
style: 'color:white;'
},{
xtype: 'selectfield',
store: 'TrackingListWithShowAll',
displayField: 'UnitName',
valueField: 'UntID',
itemId: 'selectVehicle'
}]
}]
}


});

parky128
4 Oct 2012, 12:03 PM
I have just upgraded to the 2.1.0.RC1 and I am still seeing the same behaviour.

I am wondering if for now I should prevent the list component responding to the store load event if the list is not currently 'active' and when it becomes activated refresh the list?

olouvignes
4 Oct 2012, 12:25 PM
That's the main issue that made me rollback to 2.0.3, I do confirm this issue. You should create a bug.

parky128
4 Oct 2012, 9:39 PM
Can anyone from Sencha please comment?

I have tested this on desktop Safari and Chrome, mobile Safari on iOS6 and the Android stock browser (gingerbread) all with the same results.

Bunchofstring
5 Oct 2012, 8:54 AM
Your issue seems related to a recent bug fix in RC1. From the release notes:
"[TOUCH-3486] Fixed an issue where itemHeights would be incorrect if the list was refreshed or updated while the list was hidden"

parky128
5 Oct 2012, 10:08 AM
Hmm ok, so seems this hasn't been fixed, unless its the way in which I have my tab panel setup or something up with my List definition.