CODEWITHSUNDEEP
javascriptsencha-touchextjssencha-touch-2
GibboK
GibboK

Reputation: 73988

How to change a Text property for a Button Programmatically?

I'm using Sencha Touch 2, I have a button declaration, at EVENT click I want to change its text property.

This my code, does not work.. any idea how to solve it? 

var accessibilityButton = {
        id: 'accessibilityButton',
        xtype: 'button',
        ui: 'custom-btn-confirm',
        maxWidth: '360px',
        centered: true,
        flex: 1,
        scope: this,
        style: 'color: #ffffff',
        text: 'Larger Text',

        handler: function changeStyle() {

            // Swap the CSS for Accessibility             
            var i, a, url, btn;
            btn = document.getElementById('accessibilityButton');

            for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
                if(a.getAttribute("rel").indexOf("style") != -1) {
                    url = a.href;

                    if(url.lastIndexOf('app.css') !== -1) {
                        a.href = 'resources/css/app-accesibility.css';          
                        btn.innerHTML = 'Default Text';
                    }
                    else {
                        a.href = 'resources/css/app.css';
                        btn.innerHTML = 'Larger Text';   
                    }
                } 

            }

        }

    };

Upvotes: 1

Views: 680

Answers (1)

chinabuffet
chinabuffet

Reputation: 5598

Your handler function should be getting called in the scope of the button component, so just try doing something like this instead:

handler: function changeStyle() {
    this.setText('text');
}

EDIT

or if you have changed the scope:

scope: this,
handler: function changeStyle(btn) {
    btn.setText('text');
}

Note that the second version works all the time.

Upvotes: 2

Related Questions