[SOLVED] Ext.grid.plugin.CellEditing

[mwmayer4]

I'm attempting to deploy an editable grid. I'm getting the error
Uncaught TypeError: Object [object Object] has no method 'getModifiedRecords'

I must have left something out somewhere. (all i did was copy and paste from Lab19 of class VV202)

//controller code snippet:
    onSaveTaxIdButton: function() {   
		var changedRecords = this.getStore('AP1099s').getModifiedRecords();
		if (changedRecords.length > 0) {
			var recs = Ext.Array.pluck(changedRecords, 'data');
			Ext.getBody().mask();
			Ext.Ajax.request({
				url: 'vvcall.pgm',
				params: {
					pgm: 'ap1099zr',
					action: 'updateTaxID',
					changes: Ext.encode(recs)
				},
				scope: this,
				success: function(response) {
					Ext.getBody().unmask();
					var d = Ext.decode(response.responseText);
					if (d.SUCCESS === '1') {
						this.getStore('AP1099s').load();
						Valence.util.msg('Saved', d.NUMBERSAVED + ' Tax ID Changes');
					} else {
						Ext.Msg.show({
							title: 'Error',
							msg: 'An error occurred....',
							icon: Ext.Msg.ERROR
						});
					}
				}
			});
		}
	}

//view snippet......
initComponent: function() {
		var me = this;
		Ext.apply(me, {
			store: 'AP1099s',
			forceFit: true,
			stripeRows: true,
			frame: true,
			viewConfig: {
				emptyText: '<b><br><br><br><center>*** Enter Search Criteria ***</center></b>',
				deferEmptyText: false
			},
			columns: me.buildColumns(),
			tbar: me.buildTbar(),
            dockedItems: me.buildDockedItems(),
            menu: me.buildMenu(),
            plugins : this.buildPlugins()
		});

buildPlugins: function() {
		return [Ext.create('Ext.grid.plugin.CellEditing', {
			clicksToEdit: 1
		})];

buildColumns: function() {
		return [{
                    dataIndex: 'A99FID',
                    text: '<b>FED ID</b>',
                    width: 9,
                    align: 'left',
                    editor : {
                       xtype : 'textfield'
                    }

[sean.lanktree]

this.getStore('AP1099s')

must not be returning a store....

[mwmayer4]

well, first thing I just found was in the view i put plugins: this.buildPlugins .. should have been me.buildPlugins.
but that didn't fix it. I do have the store configured as autoLoad: false.
would that matter?

btw... this store is there. the grid is full and it let's me edit the cell.

[mwmayer4]

I add this in the controller before the getModifiedRecords()

var myStore = this.getStore('AP1099s');
console.log(myStore)

.... it's there and loaded...

[mwmayer4]

ummm..... could this be an ExtJS4 version thing? I don't see getModifiedRecords in my API docs. I do see getUpdatedRecords.

[eweiler]

Sounds like it. The class would have been in Ext 4, which are you using?

[mwmayer4]

that's what it is... getModifiedRecords is in 4.1
looks like 4.0.7 is what is shipped with valence-3.1

now what???

[eweiler]

I would try getUpdatedRecords like you said you saw in the API.

[mwmayer4]

I did. Evidently there's a lot more that needs to be done to use it.
I tried this first.

var changedRecords = this.getStore('AP1099s').getUpdatedRecords();
console.log(changedRecords);

it returned an empty array. []

[sean.lanktree]

Each record that is updated should have a property named "dirty" set to true. So you can loop through the store and add each record that is dirty to your array.

[mwmayer4]

I'll give it a try. I was studying the sample in the valence examples and trying to figure it out, but the loop idea sounds easier.

[mwmayer4]

I tried this. I'm getting close but my plucker won't pluck...

var changedRecords = [];

for (c = 0; c < this.getStore('AP1099s').count(); c++) {
if (this.getStore('AP1099s').data.items[c]["dirty"] === true) {
var dirtyRecord = this.getStore('AP1099s').data.items[c];
changedRecords[c] = dirtyRecord;
console.log(changedRecords); //<-----works.. I get the dirty records in an array
}
}

//plucker won't pluck...
//....console error "Cannot read property 'data' of undefined"

var recs = Ext.Array.pluck(changedRecords, 'data'); //why would I get an undefined here????
console.log(recs);

[eweiler]

When you log the changed records, what does your array look like? Does each item have a property called data?

Try iterating through the records like this, use the Ext.data.Store.each():

var st = this.getStore('AP1099s');

st.each(function(rec) {
  if (rec.dirty) {
    //push rec.data instead of dealing with pluck.
    // also, avoid having copies of the records floating around (Can also use rec.copy())
    
    changedRecords.push(rec.data);
  }
}

[mwmayer4]

I knew there was a cleaner way.

Before I saw what you posted above, though, I kept fiddling around, and much to my amazement, it works!! unbuhleeeeevable.....

This must have something to do with our good ole friend, Scope....

i moved the line of code with the pluck and then it worked... I had also put in some debug code on the back end to see if I got the values I wanted. It was all good.

I don't understand or see what the difference is though on where I put the var recs=.......

    onSaveTaxIdButton: function() {
     	var changedRecords = [];

		for (c = 0; c < this.getStore('AP1099s').count(); c++) {
			if (this.getStore('AP1099s').data.items[c]["dirty"] === true) {
				var dirtyRecord = this.getStore('AP1099s').data.items[c];
				changedRecords[c] = dirtyRecord;
			}
		}

        console.log(changedRecords);
        var recs = Ext.Array.pluck(changedRecords, 'data');
        console.log(recs);

		if (changedRecords.length > 0) {    
			//var recs = Ext.Array.pluck(changedRecords, 'data');
			Ext.getBody().mask();
			Ext.Ajax.request({
				url: 'vvcall.pgm',
				params: {
					pgm: 'ap1099zr',
					action: 'updateTaxID',
					changes: Ext.encode(recs)
				},
				scope: this,
				success: function(response) {
					Ext.getBody().unmask();
					var d = Ext.decode(response.responseText);
					if (d.SUCCESS === '1') {
						this.getStore('AP1099s').load();
						Valence.util.msg('Saved', d.NUMBERSAVED + ' Tax ID Changes');
					} else {
						Ext.Msg.show({
							title: 'Error',
							msg: 'An error occurred....',
							icon: Ext.Msg.ERROR
						});
					}
				}
			});
		}
	},

[mwmayer4]

scratch that.... something is screwy... now it doesn't work.. i'm getting the undefined error again...