来自本地数组的 ExtJs 组合框答案

【问题标题】：ExtJs Combobox from local array来自本地数组的 ExtJs 组合框
【发布时间】：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 的末尾。

标签： javascript html combobox extjs arraylist

【解决方案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');
});

【讨论】：