Adding an "None" item to a DirectStore

Question

I have a ComboBox for a user to select a table which is linked to a DirectStore. The DirectStore contains a directFn which points to a C# function which gets all the tables. This all looks something like this:

Ext.define('MyApp.store.DataSourceTable', {
    extend: 'Ext.data.DirectStore',

    constructor: function (cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            storeId: 'DataSourceTable',
            buffered: true,
            purgePageCount: false,
            directFn: NameSpace.API.DataSourceTables,
            fields: [ 'Name', 'Id' ],
            root: 'items',
            totalProperty: 'total'
        }, cfg)]);
    }
});

This works beautifully, but I want the user to have the option of selecting 'no table'. Short of changing the function on the server to return none as an element, how do I achieve this?

Is there an event I can hook on to which gets called after the directFn returns data, where I can add my 'no table' element?

Or is there a better way than that?

Answer 1

I use the 'load' event when I want to add custom records like this (http://docs-origin.sencha.com/extjs/5.0.1/#!/api/Ext.data.DirectStore-event-load), so your code would look like:

Ext.define('MyApp.store.DataSourceTable', {
extend: 'Ext.data.DirectStore',

constructor: function (cfg) {
    var me = this;
    cfg = cfg || {};
    me.callParent([Ext.apply({
        autoLoad: true,
        storeId: 'DataSourceTable',
        buffered: true,
        purgePageCount: false,
        directFn: NameSpace.API.DataSourceTables,
        fields: [ 'Name', 'Id' ],
        root: 'items',
        totalProperty: 'total',


        listeners: {
            'load': function(store) {
                store.insert(0, {
                    'Id': -1,
                    'Name': 'None'
                });
            }
        }
    }, cfg)]);
}

});