PDA

View Full Version : [FIXED] Grouped list's nested items docked to the top are positioned incorrectly



bumpy
6 Nov 2012, 2:09 PM
REQUIRED INFORMATIONExt version tested:

Sencha Touch 2.1.0 RC2
Browser versions tested against:

Chrome 22
Safari 5.1
Description:

When nesting an item inside a grouped list and setting the nested item's docked and scrollDocked properties to 'top', the item is positioned incorrectly and is hidden under the first list item's group header

Test Case:
Ext.define('TestModel', {
extend : 'Ext.data.Model',
config : {
fields : [
{name : 'field1'},
{name : 'field2'},
{name : 'field3'}
]
}
});


var store = Ext.create('Ext.data.Store', {
model : 'TestModel',
data : [
{ field1 : 'data1Field1', field2 : 'data1Field2', field3 : 'data1Field3' },
{ field1 : 'data2Field1', field2 : 'data2Field2', field3 : 'data2Field3' },
{ field1 : 'data3Field1', field2 : 'data3Field2', field3 : 'data3Field3' },
{ field1 : 'data4Field1', field2 : 'data4Field2', field3 : 'data4Field3' }
],
grouper: {
groupFn: function(record) {
return record.get('field1');
}
}
});


var list = Ext.create('Ext.dataview.List', {
store : store,
itemTpl : '{field1} - {field3}',
flex : 1,
grouped: true,
items : [
{
xtype : 'textfield',
label : 'TestField',
placeHolder : 'Enter the field value',
scrollDock : 'top',
docked : 'top'
}
]
});


Ext.Viewport.add(list);
HELPFUL INFORMATIONScreenshot or Video:

39874

Debugging already done:

none
Possible fix:

not provided
Additional CSS used:

none
Operating System:

Windows 7

mitchellsimoens
7 Nov 2012, 7:53 AM
Thanks for the report! I have opened a bug in our bug tracker.

dix.alex
6 May 2013, 6:31 AM
I've searched through all releases and haven't found anything about this fix.

Also I've tested this on on ST 2.2 - it's not fixed.

If it can't be fixed - can you give a different approach to make it look the same?

dix.alex
8 May 2013, 11:46 PM
Whether it's fixed or not - this is a simple fix I've found for ST 2.2:

In touch/src/dataview/list.js of your project you should change the line 837 which is this:

scrollDockItem.renderElement.insertBefore(item.renderElement);
with this code:


if (info.grouped) {
scrollDockItem.renderElement.insertBefore(header.renderElement);
} else {
scrollDockItem.renderElement.insertBefore(item.renderElement);
}