Question

我有一个水平滚动面板（2行布局），每当加载商店时我都会推动面板。如果面板数量超过10-15，则它们会退出视图，面板开始滚动但在实际内容结束前停止。如果我进一步拉动它我可以看到隐藏的内容但是一旦我释放它，它会向后滚动并且最后几个面板再次超出边界。

以下是我的观点代码：

Ext.define('MyTabApp.view.CatalogList', {
    extend: 'Ext.Panel',
    alias : 'widget.cataloglist',
    config: {
        layout  : 'fit',
        id      : 'catalogList',
        style : 'background-color:#FFF',
        store   : null, // Placeholder for store
        hash    : null,
        items   : [{
            xtype   : 'toolbar',
            id      : 'seachbar',
            docked  : 'top',
            title   : 'Search results',
            items   : [{
                xtype   : 'button',
                text    : 'back',
                ui      : 'back'
            }, 
            {
                xtype   : 'button',
                text    : 'Filter',
            },
            {
                xtype   : 'button',
                text    : 'Sort',
                id      : 'sortBtn',
                right   : 0,
                style   : 'margin-top: 0.3em;'
            }]
        },
        {
            xtype       : 'panel',
            id          : 'searchPanel',
            layout      : 'hbox',
//          html        : 'search results',
            scrollable  : {
                direction       : 'horizontal',
                directionLock   : true
            }
        }]
    },
    innerTpl    : MyTabApp.app.getMulticolumnListTpl(),
    updateData  : function(records) {
        if(records.length != 0) {
            var innerTpl = this.innerTpl;
            var data = [];
            for(var i=0; i<records.length; i++){
                data[i] = records[i].getData();
                data[i].searchImage = Utils.updateImgResolution(records[i].getData().searchImage, "240_320");
            }
            var plist = [];
            while(data.length){
                plist.push({
                    xtype   : 'panel',
                    layout  : 'fit',
                    data    : data.splice(0,10),
                    tpl     : innerTpl
                });
            }
            Ext.getCmp('searchPanel').add(plist);
        }
        Ext.getCmp('searchPanel').setMinWidth(5000);
        /*
         * Since removeData destroys all listeners so we need to bind it again
         */
        this.bindTap();
    },
    removeData  : function() {
        Ext.getCmp('searchPanel').destroy();
        this.add({
            xtype       : 'panel',
            id          : 'searchPanel',
            layout      : 'hbox',
            scrollable  : {
                direction       : 'horizontal',
                directionLock   : true
            }
        });
        if(this.config.store != null){
            this.config.store.destroy();
        }
    },
    initialize : function() {
        this.bindTap();
        this.callParent();
    },
    bindTap : function() {
        this.down('#searchPanel').element.on({
            scope: this,
            tap: 'onSearchTap'
        });
    },
    onSearchTap : function(e) {
        this.fireEvent("searchTapCmd", e);
    }
});

每当加载新内容时，存储调用updateData。

这是模板：

getMulticolumnListTpl : function()
{
    return new Ext.XTemplate(
    '<div isdraggable="false" class="products">',
        '<div isdraggable="false" class="row landscape">',
            '<tpl for=".">',
                '{% if (xindex % 2 === 1) { %}',
                    '<div isdraggable="false" class="product" ref="{id}">',
                        '<span style="float:right;"><img isdraggable="false" src="resources/icons/wishlist_temp.png" class="wishlist-icon"></img></span>',
                        '<div isdraggable="false" class="image" style="background-image:url({searchImage});"><!----></div>',
                        '<div isdraggable="false" class="name">{styleName}</div>',
                        '<div isdraggable="false" class="price">Rs. {discountedPrice}</div>',
                    '</div>',
                '{% } %}',
            '</tpl>',
        '</div>',

        '<div isdraggable="false" class="row landscape">',
        '<tpl for=".">',
            '{% if (xindex % 2 === 0) { %}',
                '<div isdraggable="false" class="product" ref="{id}">',
                    '<span style="float:right;"><img isdraggable="false" src="resources/icons/wishlist_temp.png" style="width:24px; height:24px; opacity:0.5;"></img></span>',
                    '<div isdraggable="false" class="image" style="background-image:url({searchImage});"><!--<span style="float:right;"><img isdraggable="false" src="resources/icons/wishlist_temp.png" class="wishlist-icon"></img></span>--></div>',
                    '<div isdraggable="false" class="name">{styleName}</div>',
                    '<div isdraggable="false" class="price">Rs. {discountedPrice}</div>',

                '</div>',
            '{% } %}',
        '</tpl>',
    '</div>',
    '</div>');
},

以下是此模板的CSS：

.products .x-innerhtml{display:table;table-layout:fixed;width:100%;height:100%;border:1px solid #ccc;border-width:0 1px 1px 0}
.products .row{display:table-row}
.products .row>*{display:table-cell}
.products .row:last-child .product{border-bottom:0}
.products .product{background-size:80%;background-position:center;background-repeat:no-repeat;border-width:0 1px 1px 0;border-style:solid;border-color:#ddd;text-align:center}
.products .product .image{height: 240px;width: 180px;background-repeat:no-repeat;background-position:center center}
.products .product img{-webkit-border-radius:5px;border-radius:5px}
.products .product .name{width:100%;padding:20px 10px 5px 10px;color:black;font-size:16px;overflow:hidden;text-overflow:ellipsis; font-size: 60%}
.products .product .price{width:100%;font-size:12px;color:#d14747;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.products .landscape .product{width: 300px;padding: 5px;}
.products .landscape .product .image{margin-top:36px; margin: auto;}
.products .wishlist-icon {width:24px; height:24px; opacity:0.5;}

我已尝试更改searchPanel的minWidth，但这也无效。

Answer 1

在渲染HTML模板时，sencha touch会混乱翻译计算并创建一个小于显示所有项目所需的视口。这可以通过创建作为Sencha Touch组件（Panel / Component而不是tpl中的div）作为父容器一部分呈现的所有组件来解决，通过取消tpl。如果需要，您仍然可以在这些单独的容器中使用tpl。

可滚动面板的一部分始终是隐藏的

1 个答案: