JSFiddle - React, Tailwind, and code Playground

by Hao Wu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>
<div id="renderer"></div>

JavaScript

Ext.define('Ext.store.Servers', {
    extend: 'Ext.data.Store',
    fields:['id','name','type'],   
    data: [{
        id: 1,
        name: 'Server 1',
        type: 1
    },{
        id: 2,
        name: 'Server 2',
        type: 2
    },{
        id: 3,
        name: 'Server 3',
        type: 3
    }]
}); 
Ext.define('Ext.view.settings.servers.ComboBox', {
    extend: 'Ext.form.ComboBox',
    alias : 'widget.server_combobox',
    haseReverseFilter:true,
    xtype: 'combobox',
    displayField: 'name',
    valueField: 'id',
    name: 'server',
    store: Ext.create('Ext.store.Servers'),
    listeners:{
        expand:function(picker){ 
            var store = picker.getStore();
                store.suspendEvents();
                store.clearFilter();
                store.resumeEvents(); 
            if(picker.haseReverseFilter){ 
                store.filter([{ 
                    fn: function(record) {  
                        return record.get('type') >= 2;       
                    } 
                }]);
            }else{
                store.filter([{
                       fn: function(record) { 
                         return record.get('type') <= 2;     
                       }
                }]);
            } 
        }
    }
});

Ext.onReady(function(){
    Ext.create('Ext.form.Panel',{
        title:'test',
        renderTo:'renderer',
        items:[
            Ext.create('Ext.view.settings.servers.ComboBox',{haseReverseFilter:false}),
            Ext.create('Ext.view.settings.servers.ComboBox')
        ]
    })
});