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

Posted 2023-02-26

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

【英文标题】：Extjs combobox to display records with value fetched from data store rest/jsp request

【发布时间】：2021-06-22 16:43:29

【问题描述】：

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

代码使用 Extjs store 从 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.
    ....

带有 ExtJs 的 Js 代码

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 (name: 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
                        

【参考方案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()
        )
    
);