Results 1 to 6 of 6

Thread: ExtJs 5.x store.insert(0, record), Row Editing Grid Example bug

    You found a bug! We've classified it as EXTJS-16360 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574

    Default ExtJs 5.x store.insert(0, record), Row Editing Grid Example bug

    Hello
    There is a strange bug in insert method of store.
    In the row editing example: http://dev.sencha.com/extjs/5.0.0/examples/grid/row-editing.html
    1
    . Add new row
    2. edit the name field of record
    3. again click on the add button

    as you can see instead of adding new row, it makes edit of the first row.

    Regards
    A.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Oct 2013
    Posts
    2

    Default Extjs 5.1 Insert row bug

    I have also a problem when I insert a row in a grid store. If the row is added at the end of the store then there is no problem. But if I insert a new row somewhere in the middle of the rows, ie after the first row, then I have a peculiar behavior.
    What I want is to insert a row in a store binded to a grid and the first field to get the correct id value.
    The code is tested with fiddle: https://fiddle.sencha.com/#fiddle/ic7

    Ext.define('Vertex_Store_model', {
    extend: 'Ext.data.Model',
    fields: [{
    name: 'id',
    type: 'int'
    }, {
    name: 'LABEL',
    type: 'string'
    }, {
    name: 'X',
    type: 'float'
    }, {
    name: 'Y',
    type: 'float'
    }]
    });


    var Vertex_Store_Nodes_Draw = Ext.create('Ext.data.ArrayStore', {
    model: 'Vertex_Store_model',
    autoLoad: true,
    autoDestroy: true,
    data: [],
    proxy: {
    type: 'memory'
    }
    });


    var columns = [{
    header: "ID",
    width: 40,
    sortable: false,
    dataIndex: "id"
    }, {
    header: "code",
    width: 90,
    sortable: false,
    dataIndex: "LABEL",
    editor: new Ext.form.TextField({
    allowBlank: true
    })
    }, {
    header: "X",
    width: 90,
    sortable: false,
    dataIndex: "X",
    editor: new Ext.form.NumberField({
    allowBlank: false,
    allowNegative: false,
    hideTrigger: true
    })
    }, {
    header: "Y",
    width: 90,
    sortable: false,
    dataIndex: "Y",
    editor: new Ext.form.NumberField({
    allowBlank: false,
    allowNegative: false,
    hideTrigger: true
    })
    }, {
    xtype: 'actioncolumn',
    width: 25,
    resizable: false,
    items: [{
    icon: 'mfbase/Personal/icons/cross.png',
    handler: function(view, rowIndex, item, e) {
    var record = Vertex_Store_Nodes_Draw.getAt(rowIndex);
    Vertex_Store_Nodes_Draw.remove(record);


    var total = Vertex_Store_Nodes_Draw.getCount();


    for (var i = 0; i < total; i++) {
    var rec = Vertex_Store_Nodes_Draw.getAt(i);
    rec.set('id', i);
    };


    Vertex_Store_Nodes_Draw.sync();
    }
    }]
    }];


    var gridtopbar_draw = Ext.create('Ext.toolbar.Toolbar', {
    items: [{


    text: 'Add Point',
    iconCls: 'add',
    id: 'addnewAsciiPointButton',
    handler: function() {
    var record = mygrid.getView().getSelectionModel().getSelection()[0];
    var total = Vertex_Store_Nodes_Draw.getCount();


    var val_id;
    if (record) {
    val_id = record.get('id') + 1;
    } else {
    val_id = total;
    };




    for (var i = val_id; i < total; i++) {
    var rec = Vertex_Store_Nodes_Draw.getAt(i);
    if (rec) {
    rec.set('id', i + 1);
    };
    };


    var myrecord = Ext.create('Vertex_Store_model', {
    id: val_id,
    LABEL: '',
    X: 0,
    Y: 0
    });


    Vertex_Store_Nodes_Draw.insert(val_id, myrecord);
    Vertex_Store_Nodes_Draw.commitChanges();
    Vertex_Store_Nodes_Draw.sync();




    }
    }]
    });


    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
    });


    var mygrid = Ext.create('Ext.grid.Panel', {
    title: 'Vertex',
    selModel: {
    selType: 'cellmodel'
    },
    store: Vertex_Store_Nodes_Draw,
    columns: columns,
    plugins: [cellEditing],
    height: 600,
    width: 400,
    dockedItems: [gridtopbar_draw],
    renderTo: Ext.getBody()
    });



    Do you have any idea how I will manage to overcome these issues?

    Thank you.

  4. #4
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    München
    Posts
    574

    Default

    Hallo Papadis,
    you are manipulating 'id' property of record, it is auto generated and AFAIK must be unique.Try to use 'orderId' instead of 'id' (just rename 'id' with 'orderId').

    Code:
    Ext.define('Vertex_Store_model', {    extend: 'Ext.data.Model',
        fields: [{
            name: 'orderId',
            type: 'int'
        }, {
            name: 'LABEL',
            type: 'string'
        }, {
            name: 'X',
            type: 'float'
        }, {
            name: 'Y',
            type: 'float'
        }]
    });
    
    
    var Vertex_Store_Nodes_Draw = Ext.create('Ext.data.ArrayStore', {
        model: 'Vertex_Store_model',
        autoLoad: true,
        autoDestroy: true,
        data: [],
        proxy: {
            type: 'memory'
        }
    });
    
    
    var columns = [{
        header: "ID",
        width: 40,
        sortable: false,
        dataIndex: "orderId"
    }, {
        header: "code",
        width: 90,
        sortable: false,
        dataIndex: "LABEL",
        editor: new Ext.form.TextField({
            allowBlank: true
        })
    }, {
        header: "X",
        width: 90,
        sortable: false,
        dataIndex: "X",
        editor: new Ext.form.NumberField({
            allowBlank: false,
            allowNegative: false,
            hideTrigger: true
        })
    }, {
        header: "Y",
        width: 90,
        sortable: false,
        dataIndex: "Y",
        editor: new Ext.form.NumberField({
            allowBlank: false,
            allowNegative: false,
            hideTrigger: true
        })
    }, {
        xtype: 'actioncolumn',
        width: 25,
        resizable: false,
        items: [{
            icon: 'mfbase/Personal/icons/cross.png',
            handler: function(view, rowIndex, item, e) {
                var record = Vertex_Store_Nodes_Draw.getAt(rowIndex);
                Vertex_Store_Nodes_Draw.remove(record);
    
    
    
    
                var total = Vertex_Store_Nodes_Draw.getCount();
    
    
                for (var i = 0; i < total; i++) {
                    var rec = Vertex_Store_Nodes_Draw.getAt(i);
                    rec.set('orderId', i);
                };
    
    
                Vertex_Store_Nodes_Draw.sync();
            }
        }]
    }];
    
    
    var gridtopbar_draw = Ext.create('Ext.toolbar.Toolbar', {
        items: [{
    
    
            text: 'Add Point',
            iconCls: 'add',
            id: 'addnewAsciiPointButton',
            handler: function() {
                var record = mygrid.getView().getSelectionModel().getSelection()[0];
                var total = Vertex_Store_Nodes_Draw.getCount();
    
    
                var val_id;
                if (record) {
                    val_id = record.get('orderId') + 1;
                } else {
                    val_id = total;
                };
    
    
    
    
                for (var i = val_id; i < total; i++) {
                    var rec = Vertex_Store_Nodes_Draw.getAt(i);
                    if (rec) {
                        rec.set('orderId', i + 1);
                    };
                };
    
    
                var myrecord = Ext.create('Vertex_Store_model', {
                    orderId: val_id,
                    LABEL: '',
                    X: 0,
                    Y: 0
                });
    
    
                Vertex_Store_Nodes_Draw.insert(val_id, myrecord);
                Vertex_Store_Nodes_Draw.commitChanges();
                Vertex_Store_Nodes_Draw.sync();
    
    
    
    
            }
        }]
    });
    
    
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });
    
    
    var mygrid = Ext.create('Ext.grid.Panel', {
        title: 'Vertex',
        selModel: {
            selType: 'cellmodel'
        },
        store: Vertex_Store_Nodes_Draw,
        columns: columns,
        plugins: [cellEditing],
        dockedItems: [gridtopbar_draw],
        renderTo: Ext.getBody()
    });
    "The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague." – Edsger W. Dijkstra

  5. #5
    Sencha User
    Join Date
    Oct 2013
    Posts
    2

    Default Fixed the problem.

    I changed the id name in the model and this fixed the problems.
    Thank you very much.

  6. #6

    Default

    how edit row by doubleclick in chrome extjs 5.1.0

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •