CODEWITHSUNDEEP
javascriptextjs
Jakub
Jakub

Reputation: 409

ExtJS combobox taken from sencha official page not working

I have taken the first example usage from https://docs.sencha.com/extjs/6.6.0/classic/Ext.form.field.ComboBox.html and after small modification (adding: Ext.onReady()) it does not work as a fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3m7g

I have found one fiddle which creates a combobox in a similar way and there the code is working: https://fiddle.sencha.com/#view/editor&fiddle/3m75

Here my code:

Ext.onReady(function () {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
    {"abbr":"AL", "name":"Alabama"},
    {"abbr":"AK", "name":"Alaska"},
    {"abbr":"AZ", "name":"Arizona"}
]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
});

Any idea what's wrong in my code?

Upvotes: 1

Views: 40

Answers (1)

DerKorb
DerKorb

Reputation: 702

ExtJS has two toolkits that work differently (the modern toolkit for modern and mobile oriented apps and the classic toolkit for browser applications with support for older browsers.)

You are using the ExtJS Classic toolkit implementation for the ComboBox.

In your fiddle you activated the "modern" toolkit.

So either you should use the "modern" toolkit implementation.

   Ext.create({
      fullscreen: true,
      xtype: 'container',
      padding: 50,
      layout: 'vbox',
      renderTo: Ext.getBody(),
      items: [{
          xtype: 'combobox',
          label: 'Choose State',
          queryMode: 'local',
          displayField: 'name',
          valueField: 'abbr',

          store: [
              { abbr: 'AL', name: 'Alabama' },
              { abbr: 'AK', name: 'Alaska' },
              { abbr: 'AZ', name: 'Arizona' }
          ]
      }]
  });

Or you can change the fiddle to the clasic toolkit.

enter image description here

Upvotes: 1

Related Questions