Grouped list's nested items docked to the top are positioned incorrectly

[bumpy]

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:

• a.jpg

Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• none

Operating System:

• Windows 7

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[dix.alex]

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]

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);
}