EXTJS: Editor grid - inserting one row with different attributes

Question

Hello, i have an editor grid, what i want to do i create one row in the editor grid that the user have to ADD new information on the grid with blank information.

What i want if, after inserting that row to the editor, apply different style/id/etc to it. 1- How do i do that first?

2- how do i make it that the NEW ROW for inserting is always the last one seen, even after scrolling to another page of that grid ?

Answer 1

Here is the code for assigning a custom class to your new records, and for inserting the new records at the end:

var grid = new Ext.grid.EditorGridPanel({
    store: store,
    cm: cm,
    viewConfig: {
        getRowClass : function(record, rowIndex, p, store){
            if(record.data.isNew){
                return 'x-tab-panel-header';
            }
        }
    },
    tbar: [{
        text: 'Add New',
        handler: function() {
            var Rec = grid.getStore().recordType;
            var p = new Rec({
                col1: 'value1',
                col2: 1.01
            });
            grid.stopEditing();
            var newRow = store.getCount();
            p.data.isNew = true;
            store.insert(newRow, p);
            grid.startEditing(newRow, 0);
        }}]
});

You can test this sample here: http://jsfiddle.net/xjkB5/