Question

I am new to ExtJs, just stepped into some basic things and found that its very hard to get started as a beginner.

Below are the two ways of implementing Ext button:

Sample1:

var nextBtn = new Ext.Button({
    text: 'Next >>',
    handler: function() {
        Ext.getDom('form_main').submit();
    },
    id: 'next',
    renderTo: 'next'
});

Sample2:

Ext.widget('button', {
text: 'some long title of my cool button',
scale: 'large',
cls: 'my-button',
width: 100,
renderTo: 'output'
});

My guess is beacuse of the version, it has changed. Please let me know what is the difference between these two codes.

Regards,

Answer 1

There are many ways to instantiate a class in ExtJS.

Take this definition as example:

Ext.define ('Ext.button.Button', {
  alias: 'widget.button' ,
  // here other properties and methods ...
});

Then you can chose one of these ways to instantiate Ext.button.Button:

First: javascript style

var button = new Ext.button.Button ({
  // props and methods
});

Second: ExtJS style with Ext.create method

var button = Ext.create ('Ext.button.Button', {
  // props and methods
});

Third: ExtJS style with Ext.widget method (it uses alias property)

var button = Ext.widget ('button', {
  // props and methods
});

I suggest you to use the second or the third way because they use ExtJS dynamic loader: here’s the documentation