Can't create a segmentedbutton

Hi,

I am trying to create an 'Ext.SegmentedButton' and cannot manage to do so.
It feels like the class is not recognized by the Framework.

1. Trying to instantiate using 'xtype', I am getting this error: 'Uncaught ReferenceError: segmentedbutton is not defined'
2. Trying to instantiate with 'new Ext.SegmentedButton' from the example from the Sencha Touch documentation, I am getting this error: 'Uncaught TypeError: undefined is not a function'.

Please advice

Can you show more of your code please? It is hard to help when there is very little to work with.

You are right, I did not supply enough details... Sorry for that.
I receive this error on Google Chrome, with sencha-touch-2.0.1.1

Here is the code for the view ReportPost.js :

Code:

---

Ext.define('Surfspace.view.ReportPost', {    extend: 'Ext.form.Panel',
        requires: ['Ext.SegmentedButton'],
       
        segmentedButton: new Ext.SegmentedButton({
                allowMultiple: true,
                items: [
                        {
                                text: 'Option 1'
                        },
                        {
                                text: 'Option 2',
                                pressed: true
                        },
                        {
                                text: 'Option 3'
                        }
                ],
                listeners: {
                        toggle: function(container, button, pressed){
                                console.log("User toggled the '" + button.text + "' button: " + (pressed ? 'on' : 'off'));
                        }
                }
        }),
       
        config: {
                items: [{
                        xtype: 'button',
                        itemId: 'mapButton',
                        ui: 'round',
                        text: 'Choose spot',                                               
                }],
        }
});

---

And the app.js code:

Code:

---

Ext.application({    name: 'Surfspace',
        requires: ['Ext.Button'],
        views: ['ReportPost'],
       
    launch: function() {
        Ext.fly('appLoadingIndicator').destroy();
        Ext.Viewport.add(Ext.create('Surfspace.view.ReportPost'));
    }
});

---

Please advice.

I don't see anything syntactically wrong with your code. I even made a little demo of it and nothing came up.

Well, this is weird. I see this error on both Chrome and Safari.
Here is a link to the website, you can see it yourself:
https://surf-space.com/tests/segmentedbutton/

On Chrome I get:
Uncaught TypeError: undefined is not a function

And on Safari I get:
TypeError: 'undefined' is not a constructor (evaluating 'new Ext.SegmentedButton')

Any idea what may cause this?

Make sure it is actually including the source for Ext.SegmentedButton. I looked at all the JS files being called and I don't see it being loaded.

Code:

---

//new Ext.SegmentedButton({})
Ext.create('Ext.SegmentedButton',{})

---

@haduki , your suggested change to

Code:

---

Ext.create('Ext.SegmentedButton',{})

---

was successful.

The code I originally used was copy-pasted from the Sencha Touch 2 documentation. I have added a comment about that, and hopefully they will change it.

Thank you.

Quote:

---

Originally Posted by rbahumi

@haduki , your suggested change to

Code:

---

Ext.create('Ext.SegmentedButton',{})

---

was successful.

The code I originally used was copy-pasted from the Sencha Touch 2 documentation. I have added a comment about that, and hopefully they will change it.

Thank you.

---

Using the 'new Ext....' is not wrong in this context. But the orthodox way would be to use Ext.create(...)