dojoibm-mobilefirst

Custom ListView in IBM Worklight using Dojo


I am making custom list with the help of this tutorial.By the help of this tutorial i am able to add label and align it to right side and left side of list.But i find no option to align more label vertically at one side.Actually i want to implement like this

enter image description here

Two things i want to know

  1. Label under other Label
  2. Date under Label
  3. Star Rating under Label

Solution

  • I've used the HTML that edurocher provided and made 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();
    });
    

    Dojo Custom List Item