sencha-touch-2 - 水平リストに複数のアイテムを表示する

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

score 5 · Accepted Answer

同様の問題があり、各画像にはハンドラーがほとんど接続されていないため、基本的にこれが私がやりたかったことです。

私の場合のリストは実際にはカルーセルでした。
カルーセルの各ページには、画面サイズに基づいて4〜8枚の画像が含まれています。
各画像は、実際には画像とツールバーやテキストなどのいくつかのパネルです。これらの画像をタップすると、そのアイテムの詳細が表示されたモーダル詳細ウィンドウが開きます。

これが私がしたことです：

ビュー、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);
    }
});

ページの別のビューであるListPageを定義しました。これもパネルであり、データオブジェクトの配列で初期化されています。初期化関数のこの配列に基づいて、items（ListItemView）がこのパネルのアイテムに追加されます。

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

リモートサービスからページ付けされたデータをロードし、ロード時にカルーセルビューを作成/使用してレコードを渡すストアを定義しました。

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つのレコードのチャンクに分割し、これらのチャンクのそれぞれで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;
},

ページネーションをサポートするために、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 });
        }
    }
}

score 3 · Accepted Answer

リストの代わりにデータビューを使用

元：

        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

コードはテストされていませんが、私はこのように使用し、私のために働きました

score 1 · Accepted Answer

これはあなたが探しているものだと思います
http://try.sencha.com/touch/2.0.0/demos/Ext.List.inline/

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

sencha-touch-2 - 水平リストに複数のアイテムを表示する

4 に答える 4

Related

Reference