How to change a Text property for a Button Programmatically?

Question

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';   
                    }
                } 

            }

        }

    };

score 2 · Answer 1 · edited Oct 03 '12 at 22:49

2

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.

edited Oct 03 '12 at 22:49

Titouan de Bailleul

12,920
11
66
121

answered Oct 01 '12 at 13:01

chinabuffet

5,278
9
40
64

I already tried does not work. It say Object does not have the method... any idea? – GibboK Oct 01 '12 at 13:15
Oh, I didn't notice you're setting the scope on the button to be something else. You could get rid of the scope or try: Ext.getCmp('accessibilityButton').setText('Default Text'); – chinabuffet Oct 01 '12 at 13:42
Or, easier you change the signature of the handler function to changeStyle(btn) and then you do btn.setText('Default Text'); – Titouan de Bailleul Oct 01 '12 at 16:06

How to change a Text property for a Button Programmatically?

1 Answers1