CODEWITHSUNDEEP
extjscomboboxstoreextjs5
Multitut
Multitut

Reputation: 2169

How to add selectable option to combobox without affecting the store on Sencha ExtJS 5?

so I have a view where I display a combobox and a grid that share a 'Roles' store. If you pick an option on the combobox, the grid will be filtered accordingly.

I am looking for a way to add an "All" option to the combobox that is selectable (so placeholder or value attributes don't work for me). I want to do this because I cannot add that option to the store without affecting the grid as well.

This is my code:

Ext.define("MODIFE.view.administration.Roles",{
    extend: "Ext.panel.Panel",
    xtype: "app-administration-roles",
    controller: "administration-roles",
    viewModel: {
        type: "administration-users"
    },

    title: "Roles",
    items:[
    {
        title: 'Búsqueda de Roles',
        frame: true,
        resizable: true,
        xtype: 'form',
        layout: 'column',

        defaults: {
            layout: 'form',
            xtype: 'container',
            defaultType: 'textfield',
            style: 'width: 50%'
        },

        items: [{
            items: [{
                fieldLabel: 'Rol',
                xtype: 'combobox',
                store: 'Roles',
                displayField: 'Description',
                valueField: 'RoleId',
            }]
        }, {
            items: [
                { fieldLabel: 'Estatus', xtype: 'combobox' },
            ]
        }],

        buttons: [
            { text: 'Nuevo' },
            { text: 'Buscar' }
        ]
    },
    {
        layout: 'fit',
        items: [{
            xtype: 'grid',
            id: 'rolesGrid',
            title: 'Listado de Roles',
            store: 'Roles',
            columns: [
                { text: 'Rol',  dataIndex: 'Description', flex: 2},
                { text: 'Estatus', dataIndex: 'Status', flex: 2},
            ]
        }]
    }]
});

Thanks in advance!

Upvotes: 0

Views: 501

Answers (1)

Lesley.Oakey
Lesley.Oakey

Reputation: 354

You could clone the store, then any alterations wont be reflected in the original store. (but it's messy, and may have problems with syncing if you have this enabled)

//clone store
var records = [],
    me = this;

me.store.each(function(r){
    records.push(r.copy());
});

var store2 = new Ext.data.Store({
    recordType: me.store.recordType,
    model: me.store.model
});

store2.add(records);

//add record
store2.add({ID:"-1", NAME: "-Please select-"});

Upvotes: 1

Related Questions