sencha-touchextjssencha-touch-2sencha-touch-theming

How to swap CSS in Sencha Touch


I need to swap the css for my Mobile application done in Sencha Touch.

At the moment I=m not obtaining any result. Could you tell me how to do it?

Thanks


Solution

  • I solved the issue using this code...

    var accessibilityButton = {
                    xtype: 'button',
                    ui: 'custom-btn-confirm',
                    maxWidth: '360px',
                    centered: true,
                    flex: 1,
                    scope: this,
                    style: 'color: #ffffff',
                    text: 'Active Accesibility',
                    ui: 'custom-btn-confirm',         
    
                    handler: function changeStyle() {
                        // Swap the CSS for Accessibility
                        var i, a, url, btn;
                        for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
                            if(a.getAttribute("rel").indexOf("style") != -1) {
                                url = a.href;
                                btn = document.getElementById("ext-element-114");
    
                                if(url.lastIndexOf('app.css') !== -1) {
                                    a.href = 'resources/css/app-accesibility.css';
                                    btn.textContent = "AAAA";
                                }
                                else {
                                    a.href = 'resources/css/app.css';
                                    btn.textContent = "BBBB";
                                }
                            } 
    
                        }
    
                    }
    
                };