SegmentedButton - button.text is 'undefined'

[rockinthesixstring]

I'm working through the SegmentedButton docs and I'm trying to add a listener for the buttons.

Problem is that it's text is undefined. Not sure why.

{            // BUTTON ROW
            xtype: 'segmentedbutton',
            layout: {
                type: 'hbox',
                pack: 'center',
                align: 'middle'
            },
            allowMultiple: false,
            config: {
                baseCls: 'plain',
                pressedCls: ''
            },
            items: [{
                text: 'videos'
            }, {
                text   : 'calendar'
            }, {
                text: 'sites'
            }],
            listeners: {
                toggle: function(container, button, pressed){
                    console.log(button.text);  // UNDEFINED
                    console.log("User toggled the '" + button.text + "' button: " + (pressed ? 'on' : 'off'));
                }
            }
        } 

[j.k]

try button.getText()

[rockinthesixstring]

try button.getText()

nope, sorry.. that's not it.

[j.k]

I haven't tested, but are you sure the button is passed as the second argument to your event handler function and not the first one? When in doubt do a
console.log(arguments)
and inspect the passed values

[rockinthesixstring]

I haven't tested, but are you sure the button is passed as the second argument to your event handler function and not the first one? When in doubt do a
console.log(arguments)
and inspect the passed values

I'm actually logging as much as I can

    console.log(container);
    console.log(button);
    console.log(pressed);
    console.log(button.text);

I can see in the output of the 'button' the right value for '_text', but it's private and inaccessible

+ Ext.apply.create.Class

• _badgeCls: "x-badge"
• _baseCls: "x-button"
• _cls: Array[2]
• _hasBadgeCls: "x-hasbadge"
• _iconAlign: "left"
• _iconMaskCls: "x-icon-mask"
• _itemId: "ext-button-1"
• _labelCls: "x-button-label"
• _pressedCls: "x-button-rpc-pressed"
• _pressedDelay: 0
• _style: "margin-top: 5px;"
• _styleHtmlCls: "x-html"
• _text: "videos"
• _ui: "plain"

.

[j.k]

Okay, that is odd, can't reproduce that behavior. When printing out the button argument you should see something like this:

_cls: Array[2]
_iconAlign: "left"
_itemId: "ext-button-7"
_pressedDelay: 0
_styleHtmlCls: "x-html"
_text: "sites"
config: Ext.Object.classify.objectClass
[...redacted...]
__proto__: TemplateClass
$className: "Ext.Button"
[...redacted...] 

calling getText() on that object works as expected.
I'm using ST2 Beta2.

[rockinthesixstring]

Okay, that is odd, can't reproduce that behavior. When printing out the button argument you should see something like this:

_cls: Array[2]
_iconAlign: "left"
_itemId: "ext-button-7"
_pressedDelay: 0
_styleHtmlCls: "x-html"
_text: "sites"
config: Ext.Object.classify.objectClass
[...redacted...]
__proto__: TemplateClass
$className: "Ext.Button"
[...redacted...]

calling getText() on that object works as expected.
I'm using ST2 Beta2.

Strange, I tried it again and it works. Sorry for not believing you ;-)

side note: my editor (webstorm) sees getText() as an unresolved function or method.

[j.k]

side note: my editor (webstorm) sees getText() as an unresolved function or method.

I'm using phpstorm, too. It's saying it's unresolved, because the get/set methods are generated during runtime, and webstorm is not smart enough, yet, to recognize the new class system's config property and the property accessors