PDA

View Full Version : .initComponent on Ext.List breaks CSS



Totland
16 May 2011, 10:49 AM
Sencha Touch version tested:

1.0.3



only default ext-all.css

Platform tested against:

iOS 4
Chrome on Ubuntu

Description:

If I do a .initComponent on a Ext.List component after the component have been rendered the first time, and tap an item in the list, the onItemDeselect() event is triggered right after the onItemSelect() event (somewhere around line 22965 in sencha-touch-debug.js). Hence the x-item-selected CSS class is removed straight away.

Test Case:
Ext.setup({

onReady : function() {


Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',

getGroupString : function(record) {
return record.get('lastName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});

var list = new Ext.List({
fullscreen: true,

itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: true,

store: store,

simpleSelect: true,

listeners: {
itemtap: function(list, index){
var rec = list.store.getAt(index)
alert(rec.get('firstName') + ' ' + rec.get('lastName'));

}
}
});

list.show();

//// code below messes things up
list.itemTpl = '{lastName}';
list.initComponent();
list.refresh();


}
}); Steps to reproduce the problem:

See code above

The result that was expected:

I would expect the x-item-selected class to stay on tap

The result that occurs instead:

The x-item-selected is applied on tap, but gets removed straight away

Debugging already done:

none

Possible fix:

not provided

Totland
16 May 2011, 11:08 AM
On a sidenote: why is it not possible to do a simple .refresh() on a Ext.List component after changing the template? This is possible on Ext.DataView, and I would assume the same approach should be used on Ext.List. On Ext.List you have to do a .initComponent() in addition to .refresh()

Yoann M.
17 May 2011, 12:38 AM
Same error detected in an other context

Sencha Touch version tested:
1.1

Totland
18 May 2011, 11:26 AM
Yoann,

I think the Sencha team would appreciate some more info, such as exactly what context you are experiencing this in. Would make it easier fro them to verify the bug.

Stian

jep
9 Jun 2011, 2:43 PM
On a sidenote: why is it not possible to do a simple .refresh() on a Ext.List component after changing the template? This is possible on Ext.DataView, and I would assume the same approach should be used on Ext.List. On Ext.List you have to do a .initComponent() in addition to .refresh()

If you look at the code, they do some really bizarre stuff with itemTpl/groupTpl/tpl in the initComponent for List. I think a lot of it should be rewritten, frankly. I understand that you don't want to re-process all the templates on every refresh(), since you do that for other reasons. But it could be broken out into another function that is called by initComponent and the user's code. Or their could bet setItemTpl/setGroupTpl/setGrouped functions that cause it to refresh.

Surykat
18 Aug 2011, 5:10 AM
Error like that also raised during execute method: 'bindStore()' or simple 'refresh()' of list component. The couse of that always is selecting the node at the list. If node is not selected every method execute properly.

Surykat
19 Aug 2011, 4:00 AM
I found a solution for that problem.

All you need is change code in sencha/sencha-debug in two methods: 'onItemSelect' and 'onItemDeselect' in dataView like I show in code below:



onItemSelect: function(record) {
var node = this.getNode(record);
if(node) {
Ext.fly(node).addCls(this.selectedItemCls);
}
},


// invoked by the selection model to maintain visual UI cues
onItemDeselect: function(record) {
var node = this.getNode(record);
if(node) {
Ext.fly(node).removeCls(this.selectedItemCls);
}
},

Heidi Cooper
22 Nov 2011, 5:52 AM
Rather than changing template (and thereby avoiding having to use initcomponent), the following worked for me:
http://www.sencha.com/forum/showthread.php?137693-How-to-change-template-of-a-DataView-at-runtime