Extjs dropdownlist

You could extend Ext.form.ComboBox to create a dropdownlist. In the example below all I have set is editable:false. That is enough to make it a dropdownlist.


The dropdownlist control

Ext.define('DropDownList', {
    extend: 'Ext.form.ComboBox',
    editable: false,

    alias: 'widget.dropdownlist',
    initComponent: function() {
        this.callParent([arguments]);
    },
    onRender: function() {
        this.callParent();

    }
});

The app.js that uses this control

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
        "abbr": "AL",
        "name": "Alabama"    }, {
        "abbr": "AK",
        "name": "Alaska"    }, {
        "abbr": "AZ",
        "name": "Arizona"    }]
});




Ext.application({

    name: 'MyApp',
    launch: function () {


        Ext.create('Ext.form.Panel', {

            items: [
                {
                    xtype: 'dropdownlist',
                    hideLabel: false,
                    title: 'ComboBox Test',
                    fieldLabel: 'Choose State',
                    store: states,
                    displayField: 'name',
                    valueField: 'abbr',
                    renderTo: Ext.getBody()
                }
            ]

        });
    }
});

Extjs Hello World application (Begginers introduction to extjs)

Show Hello World Alert

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
<script type="text/javascript">

    Ext.application({
        name: 'MyApp',

        launch: function () {
            alert("Hello World");

        }
    });
</script>

</body>
</html>

Show Hello World HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
<script type="text/javascript">
var myComponent=Ext.create('Ext.Component',{
    html: 'HelloWorld'});

Ext.application({
    name: 'MyApp',

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            items: [
                    myComponent            ]
        });
    }
});


</script>

</body>
</html>


The above code can also be written in a short hand way using xtype (preferred way)


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js"></script>
<script type="text/javascript">
Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                    xtype: 'component',
                    html: 'HelloWorld'                }
            ]
        });
    }
});

</script>

</body>
</html>

Extjs class example.

A car object in pure javascript

var myCar = new Object();
myCar.company = "Ford";
myCar.model = "Mustang";
myCar.year = 2007

alert(myCar.company);//displays Ford

A car class in ExtJS



Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.define("Car",
                            {
                                company: "Ford",
                                 model: "Mustang",
                                  year: 2007
                             }
                         );

        var myCar = Ext.create("Car");
        alert(myCar.company);

    }


});



The general syntax for defining classes in Extjs is

Ext.define(className, members, onClassCreated);

className: The class name
members is an object that represents a collection of class members in key-value pairs
onClassCreated is an optional function callback that is invoked when all dependencies of the defined class are ready and the class itself is fully created. Due to the asynchronous nature of class creation, this callback can be useful in many situations.

The config member

Extjs classes have a special property called config. If you put properties inside this property, then you can call set and get on them. You also can define an apply on these properties that run as soon as a set is called on them. The set get and apply names are by convention (see example below)

Ext.application({
    name: 'Fiddle',

    launch: function() {


        Ext.define("Car", {
            company: "Ford",
            model: "Mustang",
            config: {
                year: 2007
            },

            applyYear: function(year) {
                alert("applying year");
                return year;
            }

        });

        var myCar = Ext.create("Car");

        myCar.setYear(2010);
        alert(myCar.getYear()); //Displays 2010

        myCar.setCompany("Toyota"); //fails because not inside config
        myCar.getCompany(); //fails because not inside config
    }


});

Extjs TaskRunner Example (Extjs delay)

function ConsoleWrite() {
console.log(Ext.Date.format(new Date(), 'g:i:s A'))
}

var runner = new Ext.util.TaskRunner();

runner.start({
run: ConsoleWrite,
interval: 1000});


You will see something like this in the chrome F12 tools console