IE10桌面上的Sencha Touch滚动问题

时间:2013-11-11 20:13:48

标签: sencha-touch scrollbar internet-explorer-10

无法在64位IE10 Win7上使滚动正常工作。

Main.js

Ext.define('ScrollLab.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [

],
config: {
    layout: 'vbox',
    itemId: 'mainPanel',
    scrollable: true,

    items: [
        {

            xtype: 'container',
            html: 'Sencha Touch 2.3 is the latest version of our industry-leading mobile app framework. In Sencha Touch 2.3 we updated the device APIs to make Apache Cordova a fully supported component in the library, including support (using the latest version of Sencha Command) for the Adobe PhoneGap Build. Touch 2.3 also includes two brand new themes: Cupertino and Mountain View, in addition to several enhancement to existing themes, especially the Blackberry 10 theme. Other enhancements in Touch 2.3 include full support for XMLHTTPRequest Level 2 (XHR2) on devices that support it, and a new ProgressIndicator Component to give users a true indication when uploading. Read more about all the new features of Touch 2.3.',
            width: '100px'
        }

    ]
}
});

MainController.js

Ext.define('ScrollLab.controller.MainController', {
extend : 'Ext.app.Controller',
requires : [
],
config:{
    refs:{
        mainView:      'main'
    },
    control:{
        mainView: {
            activate: 'onMainViewActivate'
        }
    }
},

onMainViewActivate: function(view) {
    "use strict";
    var me=this;

    var container = view;

    if(container.isXType('selectfield')) {
        container = container.down('list');
    }// Add support for selectbuttons

    // Disable default scroll for mobile.
    container.getScrollable().getScroller().setDisabled(true);

    console.log(me.getMainView().element.dom);
    var scrollContainers = Ext.DomQuery.select('.x-scroll-view', me.getMainView().element.dom);
    var scrollBars = Ext.DomQuery.select('.x-scroll-indicator', me.getMainView().element.dom);

    for(var i=0;i<scrollContainers.length;i++){
        scrollContainers[i].style.overflowY = "scroll";
    }

    for(i=0;i<scrollBars.length;i++) {
        scrollBars[i].style.zIndex = "-1";
    }
    console.log(scrollContainers);
    console.log('Length - ' + scrollContainers.length);

}
});

此代码启用滚动但它会冻结我当前视图,并且当内容超出屏幕时不允许我向上/向下滚动。

这段代码适用于Webkit浏览器(Chrome,Safari),但在IE10上效果不佳。

1 个答案:

答案 0 :(得分:1)

我明白了。没有一个解决方案。对于不同的组件,我必须以不同方式启用滚动条。但关键是使用溢出:在DOM中的正确位置滚动和高度100%CSS属性。

如果您需要建议,请随时与我联系。