Can't create a segmentedbutton

[rbahumi]

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

[jerome76]

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

[rbahumi]

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 :

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:

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.

[jerome76]

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

[rbahumi]

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?

[jerome76]

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.

[haduki]

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

[rbahumi]

@haduki , your suggested change to

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.

[jerome76]

@haduki , your suggested change to

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(...)