CODEWITHSUNDEEP
javascriptextjs
supaplexy
supaplexy

Reputation: 15

ComboBox appears empty - Ext.JS 4

I'm trying to display values in combobox as follows: 

Ext.define('Pgmtems.view.combo.DepoTurCombo', {
            extend : 'Ext.form.field.ComboBox',
            alias : 'widget.depoturcombo',
            fieldLabel : 'Depo Cinsi',
            displayField : 'aciklama',
            valueField : 'value',
            typeAhead : true,
            forceSelection : true,
            enableKeyEvents : true,
            emptyText : '-Depo Cinsi-',
            editable : false,
            labelWidth : 70,

            constructor : function(cfg) {
                console.warn(cfg.xtype, " constructor arld.");
                var me = this;
                Ext.apply(this, cfg);
                var store = Ext.create('Ext.data.Store', {
                            autoLoad : true,
                            fields : ['value', 'aciklama'],
                            data : [[3, "TL"], [2, "YTL"], [1, "ETL"]]
                        });
                Ext.apply(this, {
                            store : store
                        });
                this.callParent(arguments);
            },
            initComponent : function() {
                console.log('DepoTurCombo initComponent');
                this.trigger1Cls = 'x-form-clear-trigger';
                this.trigger2Cls = 'x-form-arrow-trigger';
                this.callParent(arguments);
            },
            onTrigger1Click : function() {
                this.clearValue();
            }
        });

However, it doesn't show the combobox values. As you can see, Depo Cinsi values are empty (actually I can see 3 items there but their names don't appear).

Any ideas on how to solve this?

enter image description here

Upvotes: 0

Views: 69

Answers (1)

CD..
CD..

Reputation: 74096

Use Ext.data.ArrayStore instead of Ext.data.Store:

Small helper class to make creating Ext.data.Stores from Array data easier. An ArrayStore will be automatically configured with a Ext.data.reader.Array.

Working example: https://fiddle.sencha.com/#fiddle/1e2p

If you want to use Ext.data.Store without using Ext.data.reader.Array you'll need to pass the data like this:

data: [{value: 3, aciklama: "TL"}, {value: 2, aciklama: "YTL"}, {value: 1, aciklama: "ETL"}]

Upvotes: 3

Related Questions