dojox.mobile.ListItem should have a widget as replacement of the rightIcon

[ebengtso]

The right icon does not provide enough flexibility in today's use of ListItem? in mobile apps.

ListItem? commonly have action buttons shown on the right corner. Usually the button is initially hidden, but an icon is displayed. When the user clicks on left side of the ListItem?, or performs a swipe, the button is displayed.

Such flexibility could be achieved if we were able to:

-define a widget placed on the right corner of the ListItem? -listen on the click of the left icon in the ListItem? -listen on the swipe of the ListItem?

An example: ​http://a3.mzstatic.com/us/r1000/090/Purple/c2/e8/61/mzl.rcdvjxfc.320x480-75.jpg

[ykami]

You can place a widget as a child of ListItem, and set float:right (and probably margins) to the widget.

[ebengtso]

Not the most elegant solution, but it does layout the contents the way I want.

<div dojoType="dojox.mobile.ListItem?"> Text <div style="float:right; margin-top: -32px;"> <input type="text"/> </div> </div>

Not sure if you consider this as a workaround, but I think I can find a way to mimic iphone's behaviour.

[ykami]

Specifying a child widget through a ListItem property does not sound an elegant solution either. Any better ideas (from the dojo API consistency perspective)?

[ebengtso]

like BorderContainer?, we could search nested nodes for "layout" property, and layout them accordingly.

eg

<div dojoType="dojox.mobile.ListItem" label="Text">
<div dojoType="Look" layout="left"></div>
<div dojoType="Action" layout="right"></div>
</div>

or

<div dojoType="dojox.mobile.ListItem">
<div dojoType="Lock" layout="left"></div>
<div layout="center">Text</div>
<div dojoType="Action" layout="right"></div>
</div>

[ykami]

That makes sense. Something like that would be useful especially when ListItem is variable height, that is, when you cannot hard-code top-margin. Let me think about it. Thank you.

[Colin Snover]

Bulk update of open ticket priorities.

[ykami]

In [27754]:

Fixes #14582 !strict Children of a ListItem? can have the layout property/attribute, whose value is "right", "center", or "left", to be able to be placed accordingly. Also, the preventTouch property/attribute can be specified to the children to disable the default click action.

[ykami]

fyi, regarding the example in the description, test_EdgeToEdgeList-editable.html provides an example of a different approach, which does not require a button widget.

[ebengtso]

Nice, but the vertical alignment only work for text nodes, and not for DIVs