Adding custom records to a JSON data store for a combobox (ExtJS)

Question

Hello all,

I have a JSON data store used for a combobox selection which is working fine, however I wish to add a custom record to the combobox and it isn't working. Here is my code:

Note: I removed some of the code to make it easier to read.

var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'ajax.aspx?type=CR'
        }),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'clientId'
        }, [
            {name: 'name', mapping: 'clientName'},
            {name: 'address', mapping: 'clientAddress'}
        ])
    });

    // add the Other record

    // create a Record constructor from a description of the fields
    var TopicRecord = Ext.data.Record.create([ // creates a subclass of Ext.data.Record
        {name: "id"}, 
        {name: 'name'}, 
        {name: 'address'}
    ]);

    // create Record instance
    var myNewRecord = new TopicRecord({
        id: Ext.id(), 
        name: 'Other',
        address: 'Other'
    });

    ds.add(myNewRecord);
    ds.commitChanges();

    var carrierSearch = new Ext.form.ComboBox({
        // removed some code here
        onSelect: function(record){ 
            carrierSearch.setValue(record.data.name);
            document.getElementById(carrierIdHidden).value=record.id;
            fieldOnBlurPost(document.getElementById(id), page, true);
            carrierSearch.collapse();
        }
    });

Any ideas on why the section under "// add the Other record" (up until ds.commitChanges();) isn't adding my custom record?

Thanks,

Domenic

Answer 1

I have never tried this but from the documention I would think you don't need to create the record Type again using Ext.data.Record.Create() since the datastore is provided a reader it should be available in the store. In fact, my guess is that the id property on the record type creates a different type of record object that does not match the store configuration, so it causes the add function to fail.

Try something like this:

var defaultData = {
    name: 'Other Name'
    address: 'Other Address'
};
var r = new ds.recordType(defaultData, Ext.id()); // create new record
ds.add(r);

I based this on the sample information found in the 'recordType' property of the Ext.data.Store class http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.Store

Answer 2

First of all I would like to say O- H !!

From the ExtJS documentation for data.Store.add:

add( Ext.data.Record[] records ) : void Add Records to the Store and fires the add event. To add Records to the store from a remote source use load({add:true}). See also recordType and insert.

I'm assuming that your ComboBox is using mode : 'remote'. I believe that you'll need to use the load method and feed it the {add:true} there.

Answer 3

When I added the record inside the data store it worked:

var ds = new Ext.data.Store({
        proxy: new Ext.data.ScriptTagProxy({
            url: 'ajax.aspx?type=CR&searchtype=begins'
        }),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'clientId'
        }, [
            {name: 'name', mapping: 'clientName'},
            {name: 'address', mapping: 'clientAddress'}
        ]),
        listeners: {
                load: function() {

                    // add the Other record

                    // create a Record constructor from a description of the fields
                    var TopicRecord = Ext.data.Record.create([ // creates a subclass of Ext.data.Record
                        {name: "clientId"},
                        {name: 'name'}, 
                        {name: 'address'}
                    ]);

                    // create Record instance
                    var myNewRecord = new TopicRecord({
                        name: 'Other'
                    },'Other');

                    this.add(myNewRecord);
                    this.commitChanges();
                }
        }
    });