change records using the set() method

[Speedy]

Hi,


I use a grid with a store that is manually loaded via ajax, that is why i use a memory store.
Manually my grid has a method that shall change some values via script.

var store = Ext.create('Ext.data.Store', {
            fields: ['value', 'display', 'visible', 'isDefault' ], autoLoad: true,  
            data: [
             { value: 'A', display: ' Display A', visible: false, isDefault: false },
             { value: 'B', display: 'Display B' visible: false, isDefault: false },
             { value: 'C', display: 'Display C', visible: false, isDefault: false }
            ],
            proxy: {
                type: 'memory',
                reader: { type: 'json', root: 'data', idProperty: 'value' }
            }
        });

the method that shall edit the store is trying to do f.e.

            var rec = grid.getStore().findRecord( 'value', 'A' );
            rec.set('isDefault', true);

after this line of code the following error is thrown by firebug

d is undefined
d.parentNode.insertBefore(replacement, d); ext-debug.js( 16037 )


I tried to debug and it looks like this error happens when the grid view wants to update the grid-rows somehow.

Even more weird is, if I use

      rec.data.isDefault = true;

instead of the set method the error does not occur.


Someone knows what is going wrong here?



thanks,

Speedy

[skirtle]

Exact ExtJS version?

Tried it in different browsers?

Grid config?

[Speedy]

4.0.2a

tried with Firefox 5 only

the file extends the grid and the config is applied within the initComponent method

        

Ext.apply(this, {
            store: store, 
            plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ],
            selType: 'cellmodel', 
            columns: [{
                name: 'display', dataIndex: 'display'
            },{
                name: 'visible', dataIndex: 'visible', header: 'Visible'
            },{
                name: 'default', dataIndex: 'isDefault', header: 'Default'
            }]
});
this.callParent(arguments);

[jay@moduscreate.com]

OK, your problem is *not* the Store:

        Ext.require('Ext.data.Store');


        Ext.onReady(function() {
            var store = Ext.create('Ext.data.Store', {
                fields: ['value', 'display', 'visible', 'isDefault' ],
                autoLoad: true,
                data: [
                 { value: 'A', display: ' Display A', visible: false, isDefault: false },
                 { value: 'B', display: 'Display B', visible: false, isDefault: false },
                 { value: 'C', display: 'Display C', visible: false, isDefault: false }
                ],
                proxy: {
                    type: 'memory',
                    reader: { type: 'json', root: 'data', idProperty: 'value' }
                }
            });

            var rec = store.findRecord( 'value', 'A' );

            rec.beginEdit();
            rec.set('isDefault', true);
            rec.endEdit();
            rec.commit();
            console.log(rec.data)

        });

That works fine.

[jay@moduscreate.com]

The problem is actually in the panel.Table class itself

It's fixed in Ext JS 4.0.6 (to be released in the future). I highly suggest you consider looking at better formatted code and learn to do so.

 Ext.require(['Ext.data.Store', 'Ext.grid.Panel', 'Ext.grid.plugin.CellEditing']);

        Ext.onReady(function () {
            var store = Ext.create('Ext.data.Store', {
                fields: ['value', 'display', 'visible', 'isDefault'],
                autoLoad: true,
                data: [{
                    value: 'A',
                    display: ' Display A',
                    visible: false,
                    isDefault: false
                }, {
                    value: 'B',
                    display: 'Display B',
                    visible: false,
                    isDefault: false
                }, {
                    value: 'C',
                    display: 'Display C',
                    visible: false,
                    isDefault: false
                }],
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'data',
                        idProperty: 'value'
                    }
                }
            });

            var grid = Ext.create('Ext.grid.Panel', {
                renderTo: Ext.getBody(),
                height: 200,
                width: 400,
                store: store,
                plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 1
                })],
                selType: 'cellmodel',
                columns: [{
                    name: 'display',
                    dataIndex: 'display'
                }, {
                    name: 'visible',
                    dataIndex: 'visible',
                    header: 'Visible'
                }, {
                    name: 'default',
                    dataIndex: 'isDefault',
                    header: 'Default'
                }],
                buttons: [{
                    text: 'Do Update',
                    handler: function () {
                        var rec = store.findRecord('value', 'A');

                        rec.beginEdit();
                        rec.set('isDefault', true);
                        rec.endEdit();
                        rec.commit();
                        console.log(rec.data)

                    }
                }]

            });


        });

[Speedy]

thanks for the try but the beginEdit(), endEdit(), commit() doesnt work.

I tried that before too

console.log('Before End Edit');
rec.endEdit();
console.log('End Edit done');
rec.commit();
console.log('Commit done');

the only output before the error is the 'Before End Edit'

[bodyboarder20]

@Speedy

The problem is actually in the panel.Table class itself

It's fixed in Ext JS 4.0.6 (to be released in the future).