1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    11
    Vote Rating
    0
    nitrox83 is on a distinguished road

      0  

    Default Composite field with RowEditor: too much recursion error

    Composite field with RowEditor: too much recursion error


    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.

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi

    Please add your code for better solution

    Regards
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    11
    Vote Rating
    0
    nitrox83 is on a distinguished road

      0  

    Default


    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;
    }

  4. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default date parsing/conversion problem

    date parsing/conversion problem


    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.)

    Code:
    
    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;
    }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    11
    Vote Rating
    0
    nitrox83 is on a distinguished road

      0  

    Default


    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).

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    11
    Vote Rating
    0
    nitrox83 is on a distinguished road

      0  

    Default Solved

    Solved


    Remove the following line:
    editor.stopEditing();

    from the canceledit event and it works

Thread Participants: 1