Display only the active items in combobox ExtJs

extjs combobox listeners
extjs combobox multiselect
extjs combobox get selected record
extjs combobox default value
extjs combobox without store
extjs combobox disable selection
extjs tagfield
extjs button

The data from my store is like this:

responseText:
"insurance" : [{
        "insurance_id" : "1",
        "insurance_companyName" : "Nas Administrative Services",
        "insurance_status" : "1"
    }, {
        "insurance_id" : "2",
        "insurance_companyName" : "Abu Dhabi National Insurance Company",
        "insurance_status" : "0"
    }
]

I am passing this data to a combobox.

              {
                xtype:'combobox',
                name:'network_comapanyId',
                fieldLabel: 'Insurance Company',
                displayField: 'insurance_companyName',
                valueField: 'insurance_id',                                     
                store: insuranceStore,
                allowBlank: false,
                padding: '2 2 2 2',
                width: 300, 
                queryMode : 'local'
            }, 

It is showing the data, but I just want to display only items with 'insurance_status : 1'.

I am using the same store data in other pages, so I can't update my store. Is there any solution to display only the active items???

You can add a filter to your store Here is Example Filldle

Ext.create('Ext.form.Panel', {
title: 'FOrm',
width: 400,
height: 200,
renderTo: Ext.getBody(),
items: [{
    xtype: 'combobox',
    reference: 'states',
    publishes: 'value',
    fieldLabel: 'Select State',
    displayField: 'displayField',
    anchor: '-15',
    store: {
        fields: ['valueField', 'displayField', 'fieldStatus'],
        filters: [{
            property: 'fieldStatus',
            value: 1
        }],
        data: [
            ['1', 'MyDisplayValueFor1', 1],
            ['2', 'MyDisplayValueFor2', 0],
            ['3', 'MyDisplayValueFor3', 1]
        ]
    }
}]
});

Display only the active items in combobox ExtJs - extjs - iOS, items with 'insurance_status : 1'. I am using the same store data in other pages, so I can't update my store. Is there any solution to display only the active items  How can I disable specific items in a combobox in Ext JS? For example I have these records. row_1_type_1 row_2_type_2 row_3_type_3 and I want to disable the third row i.e it should stay in the combo as label but it will be greyed out and not clickable.

Here's another way to filter :

var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
     storeId:'userStore',
     autoLoad: true,
     load:function(){
        Ext.Ajax.request({
        url: '/rmwb/resources/js/app/infoBar/data/data.json',
        timeout: 60000,
        method: 'GET',
        scope: this,
        success: function(resp) {
            console.log(resp.responseText);
            var store = Ext.data.StoreManager.lookup('userStore');
            var data = Ext.JSON.decode(resp.responseText);
            var filteredData = data.insurance.filter(instance => instance["insurance_status"]==1);
            store.loadData(filteredData), true);
        },
        failure: function(resp, opts) {


        },
        callback: function(options, success, resp) {
        }
        });
     }
 });

Ext.form.field.ComboBox, If your store is not remote, i.e. it depends only on local data and is loaded up front​, If specified, then the component will be displayed with this value as its active  JavaScript ExtJS ComboBox ComboBoxes are one of the most popular components in any UI toolkit and the ExtJS combobox is no exception. However, the flexibility offered by a combobox comes at the expense of having to navigate through a minefield of configuration options.

Adding a listener with expand event and filter the store in it will be a better approach. I have updated your code by adding relevant code. Please find it below:

{
    xtype:'combobox',
    name:'network_comapanyId',
    fieldLabel: 'Insurance Company',
    displayField: 'insurance_companyName',
    valueField: 'insurance_id',                                     
    store: insuranceStore,
    allowBlank: false,
    padding: '2 2 2 2',
    width: 300, 
    queryMode : 'local',
    listeners: {
        expand : function(combo, eOpts){
            combo.store.filter('insurance_status',1);
        }
    }
}

Ext.field.ComboBox, The data items in the store are mapped to each option's displayed text and backing value via the valueField and displayField configurations which are applied to  Summary. A combobox control with support for autocomplete, remote loading, and many other features. A ComboBox is like a combination of a traditional HTML text <input> field and a <select> field; the user is able to type freely into the field, and/or pick values from a dropdown selection list.

Ext.field.ComboBox, A ComboBox is like a combination of a traditional HTML text <input> field and a If your store is not remote, i.e. it depends only on local data and is loaded up  If you want to display multiple fields in the display of an Ext JS ComboBox, you will want to use the listConfig's itemTpl like so: xtype: 'combobox', listConfig : { itemTpl : '{Name} {Season} {Year}' } The above example will override the displayField with the configured template.

Ext.form.ComboBox - Ext JS 3.4.0, true to select the first result gathered by the data store (defaults to true). A false value would require a manual selection from the dropdown list to set the  Shop Thousands of Combo Box for Every Storage Need. Great Prices and Selection of Combo Box. Up To 70% Off!

Ext.form.ComboBox, Select an item in the dropdown list by its numeric index in the list. This function does True to hide the trigger element and display only the base text field (​defaults to false). inputType : String The action to execute when the trigger field is activated. Use 'all' to run the Ext - Copyright © 2006-2007 Ext JS, LLC All rights 

Comments
  • @Sruthy, did you get a chance to test above solution?