Пользовательский ListView в IBM Worklight с использованием Dojo

Question

Я делаю пользовательский список с помощью this tutorial. Посредством этого урока я могу добавить ярлык и выровнять его в правой и левой части списка. Но я нахожу никакой варианта для выравнивания больше этикетки вертикально на одном side.Actually я хочу реализовать как этого

Две вещи я хочу знать

1. этикетки под другой Этикеткой
2. Дата литерой
3. Star рейтинг под Ярлык

Answer 1

Я использовал HTML-код, который предоставил элучер, и сделал this fiddle.

HTML

<div data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='back:"Home", moveTo:"foo"'>Inbox</h1> 

    <ul data-dojo-type="dojox.mobile.RoundRectList"> 

     <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight: true'> 
      <table> 
       <tr> 
        <td style="padding: 5px" valign="top"> 
         <div style="margin-bottom: 10px; border-top-style: solid; border-right-style: solid; border-color: #cccc00; border-width:4px; width: 8px; height: 8px; -webkit-transform: scale(0.7,1) rotate(45deg);"></div> 
         <input type="checkbox" checked="true"></input> 
        </td> 
        <td> 
         <div style="font-weight: bold">Mike Cleron</div> <span style="font-weight: bold; font-size: small">Ice Cream Social Announcement</span> 
<span style="font-weight: normal;font-size: small">- Like ice cream sandwiches? Like being social? </span> 
        </td> 
        <td valign="top" align="right" width="60px"> 
         <div style="margin-bottom: 10px">Oct 18</div> 
         <div> 
      <div data-dojo-type="dojox/mobile/Rating" data-dojo-props='image:"http://archive.dojotoolkit.org/nightly/checkout/demos/mobileGallery/images/star-orange.png",numStars:1,value:1'></div> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </li> 

    </ul> 
</div> 

JS

// Load the widget parser and mobile base 
require(["dojox/mobile/parser", "dojox/mobile/deviceTheme", "dojox/mobile/Rating", "dojox/mobile/compat", "dojox/mobile"], 
    function (parser, deviceTheme) { 

    // Parse the page for widgets! 
    parser.parse(); 
}); 

Answer 2

Что вы можете сделать, это просто добавить содержимое HTML в вашем ListItem и использовать стандартный HTML/CSS, чтобы определить расположение. Вот пример, который я поставил быстро, используя таблицу HTML, который выглядит как пример, вы послали:

<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='variableHeight: true, selected: true'> 
      <table> 
      <tr> 
      <td style="padding: 5px" valign="top"> 
      <div style="margin-bottom: 10px; border-top-style: solid; border-right-style: solid; border-color: #cccc00; border-width:4px; width: 8px; height: 8px; -webkit-transform: scale(0.7,1) rotate(45deg);"></div> 
      <input type="checkbox" checked="true"></input> 
      </td> 
      <td> 
      <div style="font-weight: bold">Mike Cleron</div> 
      <span style="font-weight: bold; font-size: small">Ice Cream Social Announcement</span> 
      <span style="font-weight: normal;font-size: small">- Like ice cream sandwiches? Like being social? </span> 
      </td> 
      <td valign="top" align="right" width="60px"> 
      <div style="margin-bottom: 10px">Oct 18</div> 
      <div data-dojo-type="dojox/mobile/Rating" data-dojo-props='image:"images/star-orange.png",numStars:1,value:1'></div> 
      </td> 
      </tr> 
      </table> 
     </li> 

Надеется, что это помогает.