title: Show multiple item in horizontal list
body: <p>i am new for sencha touch. Here I got a problem, how can I show each row only contain 3 or 4 item?</p>
  
  <p>Please see my screen shoot below
  <img src="https://i.stack.imgur.com/uRwlH.png" alt="enter image description here"></p>
  
  <p>I need to show the list like example below
  <img src="https://i.stack.imgur.com/WjIp5.png" alt="enter image description here"></p>
  
  <p>Here is my view js file</p>
  
  <pre><code>        Ext.define('bluebutton.view.BlueButton.CouponList', {
          extend: 'Ext.dataview.DataView',
          xtype: 'couponlist',
          requires: [
              'Ext.field.Select',
              'Ext.field.Search',
              'bluebutton.view.BlueButton.MemberDetail',
               'Ext.plugin.ListPaging',
              'Ext.plugin.PullRefresh'
  
          ],
          config: {
  
              styleHtmlContent: true,
              scrollable: 'vertical',
  
               store : { xclass : 'bluebutton.store.BlueButton.MemberList'},
              grouped: true,
              indexBar: true,
               autoLoad: false,
             disclosure: true,
             cls:'customHeader',
  
              id :'memberlist',
              items: [
                  {
  
  
  
                  }
  
              ],
  inline: { wrap: false },
              emptyText: '&lt;p class="no-search-results"&gt;No member record found matching that search&lt;/p&gt;',
              itemTpl: Ext.create(
                  'Ext.XTemplate',
  
  
      //             '&lt;div class="image" style="background-image:url(http://resources.shopstyle.com/static/mobile/image2-iPad/{urlId}.png)"&gt;&lt;/div&gt;',
      //            '&lt;div class="name"&gt;{memberId}&lt;/div&gt;'
  
  
                     '&lt;div class="demo-weather"&gt;',
                                  '&lt;tpl for="."&gt;',
                                      '&lt;div class="day"&gt;',
                                          '&lt;div class="date"&gt;{memberId}&lt;/div&gt;',
                                          '&lt;tpl for="weatherIconUrl"&gt;',
                                              '&lt;img src="{value}"&gt;',
                                          '&lt;/tpl&gt;',
                                          '&lt;span class="temp"&gt;{memberId}&amp;deg;&lt;span class="temp_low"&gt;{memberId}&amp;deg;&lt;/span&gt;&lt;/span&gt;',
                                      '&lt;/div&gt;',
                                  '&lt;/tpl&gt;',
                              '&lt;/div&gt;'
  
  
  
  
  
              ),
  
  
  
          },
  
  
      });
  
  
  My sass file
  
  
      .demo-weather {
        text-align: center;
      }
      .day {
        display: inline-block;
        background-color: #f9f9f9;
        color: rgba(0, 0, 0, .6);
        text-shadow: #fff 0 1px 0;
        width: 8em;
        text-align: center;
        @include border-radius(15px);
        @include box-shadow(inset 0 0 4px #888);
        box-shadow: inset 0 0 4px #888;
        padding: 1em;
        margin: .5em;
  
        .x-android &amp; {
          @include box-shadow(none);
        }
      }
      .date {
        font-size: .8em;
      }
      .icon img {
        @include border-radius(10px);
        margin: .6em;
        width: 3.5em;
      }
      .temp {
        margin-top: .2em;
        display: block;
        font-size: 2.2em;
        line-height: .5em;
      }
      .temp_low {
        display: inline;
        font-size: .5em;
        color: rgba(30, 30, 30, .5);
      }
  
  Please guild me solution. Thanks in advance
  </code></pre>