title: Sencha-touch 2: how to display items in a list
body: <p>I am dynamically loading data from mysql server into a list whose itemTpl is defined as below:</p>
  
  <pre><code>itemTpl: "&lt;div class=\"list-item-title\"&gt;{item_name}{item_qty}&lt;/div&gt;&lt;div class=\"list-    item-narrative\"&gt;{item_detail}&lt;/div&gt;
  </code></pre>
  
  <p>I have my app.css defined accordingly shown below. I want my "item_name" to the leftmost side of my list and item_qty to be on the rightmost side in the same line. I can use a number of spaces (&amp;nbsp), but I want some relative spacing between the two items.</p>
  
  <p>When I am using 2 different div elements for {item_name} and {item_qty}, they appear in 2 different lines and not in the same in the list.</p>
  
  <pre><code>itemTpl: "&lt;div class=\"list-item-title\"&gt;{item_name}&lt;/div&gt;&lt;div class=\"list-item-qty\"&gt;{item_qty}&lt;/div&gt;&lt;div class=\"list-item-narrative\"&gt;{item_detail}&lt;/div&gt;
  </code></pre>
  
  <p>app.css</p>
  
  <pre><code>/* Increase height of list item so title and narrative lines fit */
  .x-list .x-list-item .x-list-item-label
  {
   min-height: 3.5em!important;
  }
  /* Move up the disclosure button to account for the list item height increase */
  .x-list .x-list-disclosure {
  position: absolute;
  bottom: 0.85em;
  right: 0.44em;
  }
  .list-item-title
  {
      float:left;
      width:100%;
      font-size:90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right:25px;
      line-height:150%;
  margin-right:520px;
  }
  .list-item-narrative
  {
      float:left;
      width:95%;
  
      font-size:90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding-right:25px;
  }
  .x-item-selected .list-item-title
  {
      color:#ffffff;
  }
  .x-item-selected .list-item-narrative
  {
      color:#ffffff;
  }
  .notes-list-empty-text
  {
      padding:10px;
  }
  </code></pre>