Geek Answers Handbook

ExtJs Combobox from local array

I am trying to populate an Ext Js combo box using a list of local arrays. In Ext Js examples, the combo is populated from another states.js file.

In my example, the data should come from a local variable. He does not work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Combo Boxes</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"> </head> <body> <script type="text/javascript"> var exampleData2 = [['1', 'hello'],['2', 'hi'],['3', 'bye']]; Ext.onReady(function(){ Ext.QuickTips.init(); // simple array store var store = new Ext.data.ArrayStore({ fields: ['abbr', 'state'], data : exampleData2 }); var combo = new Ext.form.ComboBox({ store: store, displayField:'state', typeAhead: true, mode: 'local', forceSelection: true, triggerAction: 'all', emptyText:'Select a state...', selectOnFocus:true, applyTo: 'local-states' }); </script> <div> <input type="text" id="local-states" size="20"/> </div> <div id="local-states" style="margin-top:10px"> </body> </html>
+6
javascript arraylist html extjs combobox
source share
2 answers

scope, scope, scope

  Ext.onReady (function () { 
   Ext.QuickTips.init ();  // simple array store 
   var exampleData2 = [['1', 'hello'], ['2', 'hi'], ['3', 'bye']];
   var store = new Ext.data.ArrayStore ({
      fields: ['abbr', 'state'],
      data: exampleData2 
      // or even better data: [['1', 'hello'], ['2', 'hi'], ['3', 'bye']]
      // next to change: combo.getStore (). loadData (new_table);
   });
   var combo = new Ext.form.ComboBox ({
      store: store,
      displayField: 'state',
      typeAhead: true,
      mode: 'local',
      forceSelection: true,
      triggerAction: 'all',
      emptyText: 'Select a state ...',
      selectOnFocus: true,
      applyTo: 'local-states'
    });
 });

to get a more complicated solution

  Ext.ux.states = Ext.Extend (Ex.form.ComboBox, {....
+7
source share

Below, I created a repository called Ext.data.FlatStore , which extends the default value of ArrayStore . During construction, the configured data is processed.

 { xtype: 'combo', queryMode: 'local', store: Ext.create('Ext.data.FlatStore', { data: [ 'yes', 'no', 'maybe' ] }) }

Demo @JSFiddle

 Ext.require(['*']); String.capitalize = function (str) { return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase(); }; Ext.define('Ext.data.FlatStore', { extend: 'Ext.data.ArrayStore', config: { data: [] }, fields: [{ name: 'id', type: 'int' }, { name : 'value' }, { name: 'display', type: 'string', convert: function (newValue, model) { return String.capitalize(model.get('value')); } }], constructor: function (config) { var me = this; config.data = config.data.map(function (value, index, values) { return [index, value]; }); me.callParent(arguments); me.loaded = true; } }), Ext.define('App.view.MainView', { extend: 'Ext.panel.Panel', xtype: 'mainView', alias: 'widget.mainview', controller: 'mainView', title: 'Outer Panel', referenceHolder: true, layout: { type: 'border' }, initComponent: function () { var me = this; me.items = [{ region: 'center', xtype: 'panel', title: 'Inner Panel', margin: 20, bodyStyle: 'padding: 8px;', layout: 'vbox', items: [{ xtype: 'combo', store: Ext.create('Ext.data.FlatStore', { data: [ 'yes', 'no', 'maybe' ] }), displayField: 'display', valueField: 'value', fieldLabel: 'Response', typeAhead: true, queryMode: 'local', forceSelection: true, triggerAction: 'all', emptyText: 'Choose...', selectOnFocus: true, applyTo: 'local-states' }] }], me.callParent(); } }); Ext.define('App.controller.MainViewController', { extend: 'Ext.app.ViewController', alias: 'controller.mainView', init: function () { var me = this; } }); Ext.define('App.app.App', { extend: 'Ext.app.Application', name: 'App', launch: function () { Ext.create('Ext.Viewport', { layout: 'fit', flex: 1, items: [{ xtype: 'mainview' }] }); } }); Ext.onReady(function () { Ext.application('App.app.App'); });
0
source share

More articles:


All Articles