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() {
    onRender: function() {


The app.js that uses this control

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


    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