PDA

View Full Version : [FIXED] Sencha Touch 2.1 List using ui = round has problems with styling



william.cheung
15 Nov 2012, 10:48 AM
When using ui = normal in the Ext.dataview.List control, it styles properly. When using ui = round in the same control, the selected style is not done properly. It was working in 2.0.x release. I'm thinking that due to the changes in this control, this particular ui style was missed. What is the proper fix?

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

william.cheung
17 Nov 2012, 12:20 PM
Thanks. Is there a Tracking number to track when it will be fixed?

karlshea
13 Dec 2012, 1:21 PM
Fix:

resources/themes/stylesheets/sencha-touch/default/widgets/_list.scss

Line 295 becomes

&.x-list-item-first .x-dock-horizontal {

Line 299 becomes

&.x-list-item-last .x-dock-horizontal {


It was using :first-child and :last-child, but that selector doesn't work anymore now that the DOM structure has changed with infinite scrolling.

jlaguilar
3 Jan 2013, 10:41 AM
There are even more styling bugs when using 'round' ui in grouped lists.

If your first group in the list has only one item, that group will be displayed attached to the next group (without any bottom padding) because the CSS property .x-list-footer-wrap is not added to the item. The bug is in the calculation of the list of footerIndices in the function findGroupHeaderIndices in the file /touch/src/dataview/List.js

You can add the following code in the funciton findGroupHeaderIndices to calculate the footerIndices correctly:

lastGroupItem = (groups[i].children.length) - 1;
lastGroupedRecord = groups[i].children[lastGroupItem];
storeIndex = store.indexOf(lastGroupedRecord);
footerIndices[storeIndex] = true;

kjlee203
5 Jan 2013, 10:34 PM
:)

BostonMerlin
12 Jan 2013, 12:44 PM
Rock on garth, thanks for the fix. I was hitting this same bug. Spent hours trying to figure out why.. thinking it had to do with my stores grouping logic. You deserve an up vote, and now you have your first! John


There are even more styling bugs when using 'round' ui in grouped lists.

If your first group in the list has only one item, that group will be displayed attached to the next group (without any bottom padding) because the CSS property .x-list-footer-wrap is not added to the item. The bug is in the calculation of the list of footerIndices in the function findGroupHeaderIndices in the file /touch/src/dataview/List.js

You can add the following code in the funciton findGroupHeaderIndices to calculate the footerIndices correctly:

lastGroupItem = (groups[i].children.length) - 1;
lastGroupedRecord = groups[i].children[lastGroupItem];
storeIndex = store.indexOf(lastGroupedRecord);
footerIndices[storeIndex] = true;

ateodorescu
23 Jan 2013, 6:24 AM
Hi,

We have solved this by changing the code in findGroupHeaderIndices (v 2.1) of the dataview.List component:



findGroupHeaderIndices: function() {
var me = this,
store = me.getStore(),
storeLn = store.getCount(),
groups = store.getGroups(),
groupLn = groups.length,
headerIndices = me.headerIndices = {},
footerIndices = me.footerIndices = {},
i, previousIndex, firstGroupedRecord, storeIndex;


me.groups = groups;


for (i = 0; i < groupLn; i++) {
firstGroupedRecord = groups[i].children[0];
storeIndex = store.indexOf(firstGroupedRecord);
headerIndices[storeIndex] = true;


previousIndex = storeIndex - 1;
if (previousIndex >= 0) {
footerIndices[previousIndex] = true;
}
}


footerIndices[storeLn - 1] = true;


return headerIndices;
},

The red line is what we have changed to fix this.

Cheers!

BostonMerlin
1 Mar 2013, 1:07 PM
I'm still seeing this issue with 2.1.1 where the selected list item does not highlight, instead, 3d style is applied to the list items text. Is there a workaround?

thanks
John

BostonMerlin
6 Mar 2013, 10:56 AM
Hello, Sencha team. This is NOT fixed in 2.1.1

John

darrylm
20 May 2013, 2:29 AM
I agree - not fixed at 2.1.1.

I have applied the fix that is indicated above and it now works.

minjuny
13 Jun 2013, 6:05 AM
in sencha touch v2.2.1, there is not findGroupHeaderIndices.