来自本地数组的 ExtJs 组合框
Posted
技术标签:
【中文标题】来自本地数组的 ExtJs 组合框【英文标题】：ExtJs Combobox from local array 【发布时间】：2011-06-20 13:01:18 【问题描述】：我正在尝试使用本地数组列表填充 Ext Js 组合框。在 Ext Js 示例中，组合是从不同的 states.js 文件填充的。
在我的示例中，数据应该来自局部变量。它不工作。
<!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>
【问题讨论】：
它应该可以工作，你确定你对 Ext js 文件的引用是正确的吗？您是否清除了浏览器缓存以检查它不是缓存问题？ @wimvds：修复它。有 '）;'缺少在 javascript 的末尾。 【参考方案1】：范围，范围，范围
Ext.onReady(函数() Ext.QuickTips.init(); // 简单的数组存储 var exampleData2 = [['1', 'hello'],['2', 'hi'],['3', 'bye']]; var store = new Ext.data.ArrayStore( 字段：['abbr'，'state']， 数据：exampleData2 // 甚至更好的数据：[['1', 'hello'],['2', 'hi'],['3', 'bye']] // 下一步更改：combo.getStore().loadData(new_table); ); var combo = new Ext.form.ComboBox( 商店：商店， 显示字段：'状态'， 预输入：真， 模式：'本地'， 强制选择：真， triggerAction: '全部', emptyText:'选择一个状态...', 选择焦点：真， applyTo: '本地状态' ); );得到更复杂的解决方案
Ext.ux.states = Ext.Extend (Ex.form.ComboBox, ....【讨论】：
【参考方案2】：下面，我创建了一个名为Ext.data.FlatStore 的商店，它扩展了默认的ArrayStore。在构建过程中，对配置的数据进行处理。
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');
);
【讨论】：
以上是关于来自本地数组的 ExtJs 组合框的主要内容，如果未能解决你的问题，请参考以下文章