在水平列表中显示多个项目

Question

我是煎茶触摸的新手。这里我遇到了一个问题，我怎样才能显示每行只包含 3 或 4 项？

请看我下面的截图

我需要显示如下示例的列表

这是我的视图js文件

        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: '<p class="no-search-results">No member record found matching that search</p>',
            itemTpl: Ext.create(
                'Ext.XTemplate',


    //             '<div class="image" style="background-image:url(http://resources.shopstyle.com/static/mobile/image2-iPad/{urlId}.png)"></div>',
    //            '<div class="name">{memberId}</div>'


                   '<div class="demo-weather">',
                                '<tpl for=".">',
                                    '<div class="day">',
                                        '<div class="date">{memberId}</div>',
                                        '<tpl for="weatherIconUrl">',
                                            '<img src="{value}">',
                                        '</tpl>',
                                        '<span class="temp">{memberId}&deg;<span class="temp_low">{memberId}&deg;</span></span>',
                                    '</div>',
                                '</tpl>',
                            '</div>'





            ),



        },


    });


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 & {
        @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

Answer 1

我有类似的问题，我的每个图像都附有几个处理程序，所以基本上这就是我想做的：

1. 在我的例子中，列表实际上是轮播。
2. 每页轮播包含 4-8 张图片，具体取决于屏幕尺寸。
3. 每个图像实际上都是一个面板，其中包含图像和工具栏和文本之类的其他内容。点按这些图像应该会打开一个模态详细信息窗口，其中包含有关该项目的更多详细信息。

这是我所做的：

1. 定义了一个视图，ListItemView，它是一个以图像和工具栏为项目的面板。点击图像 showDetails 事件被触发，打开视图。这可以通过构造函数中传递的数据对象来实例化。

   Ext.define('myshop.view.ListItemView', {
       extend : 'Ext.Panel',
       alias : 'widget.listitemview',
       xtype : 'listitemview',
       config : {
           layout : 'fit'
       },
       initialize : function() {
           var me = this;
           var data = me.config.data;
           var w = Ext.Viewport.getWindowWidth()/2;
           var pHtml = data.price;
           var pi = [{
               xtype : 'toolbar',
               title : data.styleName,
               top : 0,
               left : 0,
               width : w,
               cls : 'x-toolbar-transparent-top'
           },{
               xtype: 'image',
               layout: 'fit',
               flex : 1,
               rec : me.config.data,
               src : data.searchImage,
               width : w,
               listeners: {
                   tap: function (self, e, eOpts, einfo)
                   {
                       me.fireEvent('loadDetailsCommand', me.parent.parent.parent, data);
                   }
               }
           },{
               xtype : 'toolbar',
               html : pHtml,
               bottom : 40,
               left : 0,
               width : w,
               cls : 'x-toolbar-transparent-top'
           }];
           this.setItems(pi);
           this.callParent(arguments);
       }
   });
   

2. 为页面定义了另一个视图 ListPage，它又是一个面板，并使用数据对象数组进行了初始化。根据initialize函数中的这个数组，将items(ListItemView)添加到这个面板的items中。

   Ext.define('myshop.view.ListPage', {
       extend : 'Ext.Panel',
       requires : [ 'myshop.view.ListItemView' ],
       alias : 'widget.listpage',
       xtype : 'listpage',
       config : {
           layout : 'fit',
           width : '100%'
       },
       initialize : function() {
           var me = this;
           var data = me.config.data;
           var items = {
                   xtype : 'panel',
                   layout: 'hbox',
                   items : [{
                       xtype : 'panel',
                       layout: 'vbox',
                       flex: 1,
                       items : [{
                           xtype : 'listitemview',
                           data : data[0],
                           detailsView : Properties.details_view_type_CATALOG,
                           container : hccontainer,
                           flex : 1
                       }, {
                           xtype : 'listitemview',
                           data : data[1],
                           detailsView : Properties.details_view_type_CATALOG,
                           container : hccontainer,
                           flex : 1
                       }]
                   }, {
                       xtype : 'panel',
                       layout: 'vbox',
                       flex: 1,
                       items : [{
                           xtype : 'listitemview',
                           data : data[2],
                           detailsView : Properties.details_view_type_CATALOG,
                           container : hccontainer,
                           flex : 1
                       }, {
                           xtype : 'listitemview',
                           data : data[3],
                           detailsView : Properties.details_view_type_CATALOG,
                           container : hccontainer,
                           flex : 1
                       }]
                   }]
               };
           this.setItems(items);
           this.callParent(arguments);
       }
   });
   

3. 定义了一个存储，它将从远程服务加载分页数据，并在加载时创建/使用轮播视图并将记录传递给它。

   Ext.define('myshop.store.CatalogListStore',{
       extend:'Ext.data.Store',
       requires: [
                  'myshop.model.CatalogListItem',
                  'Ext.data.proxy.JsonP'
              ],
       config:{
           model:'myshop.model.CatalogListItem',
           storeId: 'catalogListStore',
           autoLoad :false,
           listeners : {
               load: function( me, records, successful, operation, eOpts ){ 
                   console.log(operation.getRequest().getUrl());
                   if(successful){
                       var itemsList = Ext.getCmp("ilid");
                       if(itemsList == undefined || itemsList == null){
                           bossController.createCatalogList(records, me);
                       } else {
                           bossController.setMaskOnSearchList();
                           bossController.fillCatalogList(records, itemsList);
                       }
                   }
               }
           }
       },
       filterParam: undefined,
   
       initialize: function() {
           console.log("CatalogListStore Initializing");
           var me = this;
           var qstring = this.config.q;
           if(qstring != undefined){
               qstring = qstring.replace(/ /g,"-");
           }
           this.setProxy({
               type: 'jsonp',
               url: Properties.PORTAL_SERVICE_BASE_URL+'test/catalog/list',
               callbackKey: 'callback',
               startParam: false, //to remove param "start"
               limitParam: false, //to remove param "limit"
               pageParam: 'page',
               extraParams: {
                   limit : 20,
                   start : 0,
                   _type : 'json',
                   q : qstring,
                   filter : this.config.f
               },
               reader: {
                   type: 'json',
                   rootProperty: 'catalogSearchResponse.data'
               }
           });
           this.load();
           this.callParent();
       }
   });
   

4. 定义了轮播视图，该视图使用记录数组并将其分成 4 条记录的块，并使用这些块中的每一个创建 ListPage 并将其添加到轮播项目中。 观点：

   Ext.define('myshop.view.CatalogList', {
   extend : 'Ext.carousel.Carousel',
   alias : 'widget.cataloglistview',
   xtype : 'cataloglistview',
   config : {
       id : 'ilid',
       masked: {
           xtype: 'loadmask',
           message: 'Loading'
       },
       directionLock : true,
       indicator : false
   },
   listeners: {
       activeitemchange: function(container, value, oldValue, eOpts) {
           var activeItemIndex = container.getActiveIndex();
           var galleryTotal = container.getInnerItems() ? container.getInnerItems().length : 0;
           if ((activeItemIndex + 1 == galleryTotal)) {
               var store = this.config.store;
               store.nextPage({ addRecords: true });
           }
       }
   }
   });
   

   来自控制器：

   createCatalogList : function(records, store){
       console.log("createCatalogList called");
       var hccontainer = Ext.getCmp('hccontainer');
       var itemsList = Ext.create('myshop.view.CatalogList', {
           store : store
       });
   
           //itemsList.setItems(panels);
           itemsList = this.fillCatalogList(records,itemsList);
           hccontainer.setItems([itemsList]);
   },
   fillCatalogList : function(records, list){
       var hccontainer = Ext.getCmp('hccontainer');
       console.log("filling started");
       var datas = [];
       if(list == undefined || list == null){
           list = Ext.getCmp("ilid");
       }
           for(var i=0; i<records.length; i++){
               datas.push(records[i].getData());
           }
           var panels = [];
           while(datas.length){
               panels.push({
                   xtype : 'listpage',
                   data : datas.splice(0,4),
                   detailsView : Properties.details_view_type_CATALOG,
                   container : hccontainer
               });
           }
           list.add(panels);
           this.removeMaskFromSearchList();
           return list;
   },
   

5. 为了支持分页，在轮播中使用了activeitemchange监听器。

   listeners : {
       activeitemchange: function(container, value, oldValue, eOpts) {
           var activeItemIndex = container.getActiveIndex();
           var galleryTotal = container.getInnerItems() ? container.getInnerItems().length : 0;
           if ((activeItemIndex + 1 == galleryTotal)) {
               var store = this.config.store;
               store.nextPage({ addRecords: true });
           }
       }
   }
   

Answer 2

使用 dataview 代替 list

前：

        xtype:'dataview',
        id:'thumbs',
        itemId:'dataview',
        flex:1,
        itemTpl:'<div style="float:left;width=33%;margin:2px;"><div class="demo-weather">',
                            '<tpl for=".">',
                                '<div class="day">',
                                    '<div class="date">{memberId}</div>',
                                    '<tpl for="weatherIconUrl">',
                                        '<img src="{value}">',
                                    '</tpl>',
                                    '<span class="temp">{memberId}&deg;<span class="temp_low">{memberId}&deg;</span></span>',
                                '</div>',
                            '</tpl>',
                        '</div>'</div>',    
        store: this.myStore

代码未经测试，但我这样使用并为我工作

Answer 3

我想这就是你要找的东西
http://try.sencha.com/touch/2.0.0/demos/Ext.List.inline/

 Ext.create('Ext.List', {
            fullscreen: true,
            inline: true,
});

Answer 4

在 CSS 中使用 display: inline-block !important;