Menu
I am trying to populate a Ext Js combo box using local array list. In the Ext Js examples, the combo is populated from a different states.js file.
In my example the data should come from local variable. Its not working.
<!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>
941
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 more complex solution
Ext.ux.states = Ext.Extend ( Ex.form.ComboBox, { ....
180
Below, I have created a store, called Ext.data.FlatStore, which extends the default 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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
