Question

我正在尝试使用本地数组列表填充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>

Answer 1

范围，范围，范围

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'
   });
});

获得更复杂的解决方案

Ext.ux.states = Ext.Extend ( Ex.form.ComboBox, { ....

Answer 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 Combobox

2 个答案: