Composite field with RowEditor: too much recursion error

[nitrox83]

Hi there,

Have anyone tried composite fields with RowEditor? I have a date-time column, therefore using a composite fields of datefield and timefield to handle the editing of the column.

I added functions to the editor's 'beforeedit' event and gird's selection model's 'rowselect' event as RowEditor seem to be unable to populate my single datetime value into the separated date and time field.

However, when I tried to update, I am hit with a too much recursion error textfield validation error. I am not sure how the error got trigger, as I did no validation on my part. Could someone provide some light for me.

Thanks.

[sword-it]

Hi

Please add your code for better solution

Regards

[nitrox83]

Pasted my code below:

Realized that when I edit a row, upon clicking the "Update" button, it will go into the "CancelEdit" action instead of "afterEdit" action until stackoverflow.

function setEditorDateTime(rowIndex)
{
var store = Ext.ComponentMgr.get("timingGrid").store;
var startDate = store.getAt(rowIndex).data["startDateTime"];
var endDate = store.getAt(rowIndex).data["endDateTime"];

var sDateComp = Ext.ComponentMgr.get("startDate");
var sTimeComp = Ext.ComponentMgr.get("startTime");
var eDateComp = Ext.ComponentMgr.get("endDate");
var eTimeComp = Ext.ComponentMgr.get("endTime");

if(startDate == null || endDate == null)
{
sDateComp.setValue("");
sTimeComp.setValue("");

eDateComp.setValue("");
eTimeComp.setValue("");
}
else
{
var sdate = startDate.substring(0,10);
var stime = startDate.substring(11,19);

var edate = endDate.substring(0,10);
var etime = endDate.substring(11,19);

sDateComp.setValue(sdate);
sTimeComp.setValue(stime);

eDateComp.setValue(edate);
eTimeComp.setValue(etime);
}
}

function timingGrid()
{
var _timingRecord = Ext.data.Record.create([{
name: 'startDateTime',
type: 'date'
}, {
name: 'endDateTime',
type: 'date'
},{
name: 'lastModified',
type: 'string'
}]);

var store = new Ext.data.GroupingStore({
data:[
["1","06/30/2012 12:00 PM","06/30/2012 01:00 PM","Jones","06/30/2012 12:00 PM"],
["2","07/30/2012 12:00 PM","07/30/2012 01:00 PM","Jones","06/30/2012 12:00 PM"],
["3","08/30/2012 12:00 PM","08/30/2012 01:00 PM","Jones","06/30/2012 12:00 PM"]
],
reader: new Ext.data.ArrayReader
(
{id:'id'},
['id','startDateTime','endDateTime','recBy','recTime']

),
sortInfo: {field: 'startDateTime', direction: 'DESC'}
});

var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{
header: 'Start DateTime',
dataIndex: 'startDateTime',
width: 200,
editor: new Ext.form.CompositeField
({
items:
[{
id: 'startDate',
xtype: 'datefield',
name: 'startDate',
width: 100,
allowBlank: false
},
{
id: 'startTime',
xtype: 'timefield',
name: 'startTime',
width: 100,
allowBlank: false
}]
})
},{
header: 'End DateTime',
dataIndex: 'endDateTime',
width: 200,
editor: new Ext.form.CompositeField
({
items:
[{
id: 'endDate',
xtype: 'datefield',
name: 'endDate',
width: 100,
allowBlank: false
},
{
id: 'endTime',
xtype: 'timefield',
name: 'endTime',
width: 100,
allowBlank: false
}]
})
},{
header: 'Last Recorded By',
dataIndex: 'recBy',
name: 'Last Recorded By',
width: 200,
editor: new Ext.form.TextField({ })
}]
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
listeners:{
afterEdit: {
fn:function(rowEditor,changes,record,rowIndex){
var obj = new Object();

if(record.data["id"]!=null)
{
obj.id = record.data["id"];
}
obj.startDate = Ext.ComponentMgr.get('startDate').getValue();
obj.startTime = Ext.ComponentMgr.get('startTime').getValue();
obj.endDate = Ext.ComponentMgr.get('endDate').getValue();
obj.endTime = Ext.ComponentMgr.get('endTime').getValue();
obj.recBy = "Jones";

// to send object to servlet
}
}
}
});
editor.on('canceledit',
function(roweditor, forced)
{
editor.stopEditing();
if(roweditor.record.data["recBy"]==null)
gridPanel.getStore().remove(roweditor.record);
}
);
editor.on
('beforeedit',
function(editor, rowIndex)
{
setEditorDateTime(rowIndex);
}
)

var sm = new Ext.grid.RowSelectionModel({
singleSelect: false,
listeners: {
rowselect: {
fn:function(selectionModel,rowIndex,row)
{
setEditorDateTime(rowIndex);
}
}
}
});

var gridPanel = new Ext.grid.GridPanel({
id: 'timingGrid',
border: true,
width: 100,
viewConfig: {
forceFit: true
},
store: store,
cm: cm,
//sm: sm,
view: new Ext.grid.GroupingView({
markDirty: true
}),
plugins: [editor],
tbar: [
{
text: 'Add Timing',
id: 'addTiming',
handler: function(){
var e = new _timingRecord();
editor.stopEditing();
store.insert(0, e);
gridPanel.getView().refresh();
gridPanel.getSelectionModel().selectRow(0);
editor.startEditing(0);
editor.values={};
}
},'-',{
text: 'Delete Timing',
id: 'deleteTiming',
handler: function(){
editor.stopEditing();
var s = gridPanel.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}
]
});

return gridPanel;
}

[sword-it]

Hi nitrox,

I could not reproduce the too much recursion problem, sorry about that.

Which browser are you using?

Probably that's because of a date parsing/conversion problem. Some of the browsers cannot parse invalid dates and throw too much recursion error. You can check the values you want to set to your date fields.

I have never used compositefield in the row editor but here is an example for you:

(Note: Please see getValue methods that I used them for overwriting the original methods.)

function setEditorDateTime(rowIndex) {
    var store = Ext.ComponentMgr.get("timingGrid").store;
    var startDate = store.getAt(rowIndex).data["startDateTime"];
    var endDate = store.getAt(rowIndex).data["endDateTime"];


    var sDateComp = Ext.ComponentMgr.get("startDate");
    var sTimeComp = Ext.ComponentMgr.get("startTime");
    var eDateComp = Ext.ComponentMgr.get("endDate");
    var eTimeComp = Ext.ComponentMgr.get("endTime");


    if (startDate == null || endDate == null) {
        sDateComp.setValue("");
        sTimeComp.setValue("");


        eDateComp.setValue("");
        eTimeComp.setValue("");
    }
    else {
        var sdate = startDate.substring(0, 10);
        var stime = startDate.substring(11, 19);


        var edate = endDate.substring(0, 10);
        var etime = endDate.substring(11, 19);


        sDateComp.setValue(sdate);
        sTimeComp.setValue(stime);


        eDateComp.setValue(edate);
        eTimeComp.setValue(etime);
    }
}


function timingGrid() {
    var _timingRecord = Ext.data.Record.create([{
        name: 'startDateTime',
        type: 'date'
    }, {
        name: 'endDateTime',
        type: 'date'
    }, {
        name: 'lastModified',
        type: 'string'
    }]);


    var store = new Ext.data.GroupingStore({
        data: [
            ["1", "06/30/2012 12:00 PM", "06/30/2012 01:00 PM", "Jones", "06/30/2012 12:00 PM"],
            ["2", "07/30/2012 12:00 PM", "07/30/2012 01:00 PM", "Jones", "06/30/2012 12:00 PM"],
            ["3", "08/30/2012 12:00 PM", "08/30/2012 01:00 PM", "Jones", "06/30/2012 12:00 PM"]
        ],
        reader: new Ext.data.ArrayReader
        (
            { id: 'id' },
            ['id', 'startDateTime', 'endDateTime', 'recBy', 'recTime']
        ),
        sortInfo: { field: 'startDateTime', direction: 'DESC' }
    });


    var cm = new Ext.grid.ColumnModel({
        defaults: {
            sortable: true
        },
        columns: [
            {
                header: 'Start DateTime',
                dataIndex: 'startDateTime',
                width: 200,
                editor: new Ext.form.CompositeField({
                    getValue: function(){
                        return Ext.util.Format.date(this.items.get(0).getValue(), 'm/d/Y') + ' ' + this.items.get(1).getValue();
                    },
                    items:[
                        {
                            id: 'startDate',
                            xtype: 'datefield',
                            name: 'startDate',
                            width: 100,
                            allowBlank: false
                        },
                        {
                            id: 'startTime',
                            xtype: 'timefield',
                            name: 'startTime',
                            width: 100,
                            allowBlank: false
                        }
                    ]
                })
            }, {
                header: 'End DateTime',
                dataIndex: 'endDateTime',
                width: 200,
                editor: new Ext.form.CompositeField({
                    getValue: function(){
                        return Ext.util.Format.date(this.items.get(0).getValue(), 'm/d/Y') + ' ' + this.items.get(1).getValue();
                    },
                    items: [
                        {
                            id: 'endDate',
                            xtype: 'datefield',
                            name: 'endDate',
                            width: 100,
                            allowBlank: false
                        },
                        {
                            id: 'endTime',
                            xtype: 'timefield',
                            name: 'endTime',
                            width: 100,
                            allowBlank: false
                        }
                    ]
                })
            }, {
                header: 'Last Recorded By',
                dataIndex: 'recBy',
                name: 'Last Recorded By',
                width: 200,
                editor: new Ext.form.TextField({})
            }
        ]
    });


    var editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update',
        listeners: {
            afterEdit: {
                fn: function (rowEditor, changes, record, rowIndex) {
                    var obj = new Object();


                    if (record.data["id"] != null) {
                        obj.id = record.data["id"];
                    }
                    obj.startDate = Ext.ComponentMgr.get('startDate').getValue();
                    obj.startTime = Ext.ComponentMgr.get('startTime').getValue();
                    obj.endDate = Ext.ComponentMgr.get('endDate').getValue();
                    obj.endTime = Ext.ComponentMgr.get('endTime').getValue();
                    obj.recBy = "Jones";


                    // to send object to servlet
                }
            }
        }
    });


    editor.on('canceledit',
        function (roweditor, forced) {
            editor.stopEditing();
            if (roweditor.record.data["recBy"] == null)
                gridPanel.getStore().remove(roweditor.record);
        }
    );


    editor.on('beforeedit',
        function (editor, rowIndex) {
            setEditorDateTime(rowIndex);
        }
    );


    var sm = new Ext.grid.RowSelectionModel({
        singleSelect: false,
        listeners: {
            rowselect: {
                fn: function (selectionModel, rowIndex, row) {
                    setEditorDateTime(rowIndex);
                }
            }
        }
    });


    var gridPanel = new Ext.grid.GridPanel({
        id: 'timingGrid',
        border: true,
        width: 500,
        height: 300,
        viewConfig: {
            forceFit: true
        },
        store: store,
        cm: cm,
        //sm: sm,
        view: new Ext.grid.GroupingView({
            markDirty: true
        }),
        plugins: [editor],
        tbar: [
            {
                text: 'Add Timing',
                id: 'addTiming',
                handler: function () {
                    var e = new _timingRecord();
                    editor.stopEditing();
                    store.insert(0, e);
                    gridPanel.getView().refresh();
                    gridPanel.getSelectionModel().selectRow(0);
                    editor.startEditing(0);
                    editor.values = {};
                }
            }, '-', {
                text: 'Delete Timing',
                id: 'deleteTiming',
                handler: function () {
                    editor.stopEditing();
                    var s = gridPanel.getSelectionModel().getSelections();
                    for (var i = 0, r; r = s[i]; i++) {
                        store.remove(r);
                    }
                }
            }
        ]
    });


    return gridPanel;
}

[nitrox83]

Hi sword-it,

Tried adding the line, and it works when there are records (able to update existing or add new record). However when I tried to remove all records before adding a new record, the problem came back. I am using IE 6(error- stack overflow at line:8886) and Firefox 3.6.17 (error-too much recursion via Firebug).

[nitrox83]

Remove the following line:
editor.stopEditing();

from the canceledit event and it works