Question

Ok,

So I have standard sencha-touch panel, and because this application needs to be capable of interaction for both mobile users and desktop(webkit) users, I need this to feel and look like a standard web application. How do I replace the touch scrollbars, with permanent browser scrollbars when browsing with a desktop browser?

I am sure I can workout how to run based on device, but I do not know how to replace the scrollbars. I am running the latest version of sencha touch – 2 beta.

Cheers, Josh

Answer 1

Ok, so for any future sencha users this is the workaround I managed to come up with:

Add this function anywhere:

var setupPCScrollbar = function(container){
    var isMobile = (navigator.appVersion.toLowerCase().indexOf("mobile") > -1 || navigator.appVersion.toLowerCase().indexOf("ipad") > -1);
    if(!isMobile){
        if(container.isXType('selectfield'))container = container.down('list');// Add support for selectbuttons
        if(!Ext.isFunction(container.getScrollable) || !container.getScrollable() || !Ext.isFunction(container.getScrollable().getScroller))return console.warn("Attempting to apply pc scroller to non-container item");
        container.getScrollable().getScroller().setDisabled(true);
        var scrollContainers = Ext.DomQuery.select('.x-scroll-container', container.element.dom);
        var scrollBars = Ext.DomQuery.select('.x-scroll-indicator', container.element.dom);
        for(var i=0;i<scrollContainers.length;i++)
            scrollContainers[i].style.overflow = "auto";
        for(var i=0;i<scrollBars.length;i++)
            scrollBars[i].style.zIndex = "-1";
    }
}

This function will check for mobile/ipad, then if neither of these are found (likely to be pc) then disable sencha touch scrollbar, hide scrollbar and add standard html scrollbar.

This function is used for example as follows and should work on panels, lists, etc:

var container = ...
setupPCScrollbar(container);

I would like to have this implemented as a plugin, but have no idea how to add it to the ‘container’ class’s constructor.

**note this is a ipad/pc specific app.

Hope this helps someone 🙂