Extjs 组合框显示具有从数据存储 rest/jsp 请求中获取的值的记录

Question

使用ExtJs (4.2) 版本，想知道如何从组合框下拉列表中过滤空记录。

该代码使用 Extjs 存储从 jsp 中获取数据，结果是一个 json 对象。下面说的是渲染出来的结果，

{ "data" : [
     {"source":"system1","key1" : "value system1", "key2" : " value for system1"},
     {"source":"system2","key1" : "value 11", "key2" : " value for key1, value 12"},
     {"source":"system3" },   //Blank or empty key1, key2 record.
    ....
}

Js 代码与 ExtJs

I am using ExtJs to display a combobox (Dropdown) below is the code fragment

      var dataStore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            fields: ['key1', 'key2'],
            proxy:
            {
                type: 'ajax',
                url: '<url to a jsp file which retruns json data>',
                reader:
                {
                    type: 'json',
                    root: 'templates'
                }
            }
        });
        
...

    var screenPanel = {
                xtype: 'fieldset',
                title: 'Panel - Data',
                margin: '0 10 15 15',
                padding: 10,
                flex: 1,
                width:"100%",
                layout: 'anchor',
                defaults: {
                    labelWidth: 160,
                },
                items: [
                {
                        xtype: 'checkbox',
                        name: 'visibility',
                        id: 'visibility',
                        fieldLabel : 'Check to enable', 
                        value:false                                 
                    },
                    {
                        xtype: 'combobox',
                        anchor: '80%',
                        name: 'combodropdown',
                        itemId: 'combo1',
                        fieldLabel: 'Dropdown selection',
                        displayField: 'key2',
                        valueField: 'key1',
                        store: dataStore,
                    },{
                        xtype: 'container',
                        anchor: '80%',
....

组合框下拉列表也列出了空记录。有没有办法过滤该值。在上述情况下，“source”：“system3”没有 key1 和 key2 值，但 xtype:combo（名称：combodropdown）也列出了一个空白项目。

是否有使用事件过滤空数据的示例。像 onClick 事件来过滤如下数据

....
                      {
                        xtype: 'combobox',
                        anchor: '80%',
                        name: 'combodropdown',
                        itemId: 'combo1',
                        fieldLabel: 'Dropdown selection',
                        displayField: 'key2',
                        valueField: 'key1',
                        store: dataStore,
                        
                        //some thing like this
                        onClick: function(value1,value2){
                            alert('clicked combox dropdown')
                            //data store value empty return something
                        }

Answer 1

您可以使用商店 filter。类似于：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var dataStore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            fields: ['key1', 'key2'],
            proxy: {
                type: 'ajax',
                url: 'comboData.json',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            },
            filters: [
                function (item) {
                    return !Ext.isEmpty(item.get('key1')) && !Ext.isEmpty(item.get('key2'));
                }
            ]
        });

        Ext.create('Ext.form.Panel', {
            title: "Sample Panel",
            items: [{
                xtype: 'combobox',
                name: 'combodropdown',
                itemId: 'combo1',
                fieldLabel: 'Dropdown selection',
                displayField: 'key2',
                valueField: 'key1',
                store: dataStore,
                listeners: {
                    expand: function(comboBox) {
                        console.log(comboBox.getStore().getRange());
                    }
                }
            }],
            renderTo: Ext.getBody()
        })
    }
});

Extjs 组合框显示具有从数据存储 rest/jsp 请求中获取的值的记录

Extjs combobox to display records with value fetched from data store rest/jsp request

javascript

extjs

Js 代码与 ExtJs