Sencha Touch 2旋转木马方向改变

Question

我在Sencha Touch 2 / Phonegap应用程序中遇到问题，该应用程序在显示ImageViewer项目列表的carousel中管理方向更改。

当我打开carousel时，一切都很好。如果我更改设备的方向（通过Ripple插件或iPhone4S在Chrome中），布局会自行调整。

更改方向后出现问题我会滑动到下一张图像。它已预先加载并位于为前一个方向标注尺寸的容器中，因此布局混乱。

请注意，如果我继续滑动到下一个图片布局再次正确，因为我的carousel仅预加载单个图片。

我设法拦截changeorientation上的Ext.Viewport事件，对轮播进行操作以修复此行为，我试图在轮播和ImageViewer上触发调整大小事件，但没有成功。每次循环播放的activeItem发生变化时，我也尝试在changeorientation上触发Ext.Viewport事件，但这也不起作用。您是否有任何想法可以解决此问题？

Answer 1

我通过遍历轮播中的每个项目并在Viewport上触发orientationchange之后调用ImageViewer项目上的resize（）方法来解决它。我的功能如下：

handleOrientationChange: function(viewport, orientation, width, height){
    var items = this.getItems();
    for (var i=0;i<items.getCount();i++){
        var obj = items.getAt(i);
        if (obj instanceof Ext.view.ux.ImageViewer){
            console.log("Resize");
            obj.resize();
        }
    }
}

您需要验证该项目是否为Imageviewer。轮播指示符也会在ItemCollection中返回。

我不是100％确定这是最有效的方法，但确实有效。

Answer 2

您可以在.css文件中添加此内容

.my-carousel-item{background:url(images/loading.png) no-repeat center center}@media screen and (orientation: portrait){.my-carousel-item-img{background-size:100% auto}}@media screen and (orientation: landscape){.my-carousel-item-img{background-size:auto 100%}}.x-portrait .my-carousel-item-img{background-size:100% auto}.x-landscape .my-carousel-item-img{background-size:auto 100%}.my-carousel-item-img{background-position:center center}.x-carousel-indicator>*{background-color:orange !important;opacity:0.4}.x-carousel-indicator>.x-carousel-indicator-active{opacity:1}