Translate

Monday, June 1, 2015

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()
                }
            ]

        });
    }
});

No comments:

Post a Comment

Comments will appear once they have been approved by the moderator