sencha-touch-2 - 在水平列表中显示多个项目

Question

我是 sencha touch 的新手。在这里我遇到了一个问题，如何显示每行仅包含 3 或 4 个项目？

请看下面我的屏幕截图


我需要像下面的例子一样显示列表


这是我的 View 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

我遇到了类似的问题，并且我的每个图像都几乎没有附加处理程序，所以基本上这就是我想要做的:

就我而言，列表实际上是轮播。

每页轮播包含 4-8 个基于屏幕大小的图像。

每个图像实际上是一个带有图像的面板，还有一些工具栏和文本之类的东西。点击这些图像应该打开一个模式详细信息窗口，其中包含有关该项目的更多详细信息。

这是我所做的:

定义了一个 View ListItemView，它是一个以图像和工具栏作为项目的面板。点击图像 showDetails 事件会被触发，从而打开 View 。这可以使用构造函数中传递的数据对象进行实例化。

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);
    }
});

为页面定义了另一个 View ListPage，它又是一个面板，并使用数据对象数组进行初始化。基于初始化函数中的这个数组，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);
    }
});

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

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();
    }
});

定义了使用记录数组的轮播 View ，并将其分成每条 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 });
        }
    }
}
});

来自 Controller :

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;
},

为了支持分页，轮播中使用了 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 });
        }
    }
}