Hello hello,
i am working on a grid with CRUD using RESTful ASP.NET MVC WEB-API.
Read, Update and Delete are already working. I found some examples but only with Ext.JS and not with my wishes.

grid_start.jpg

1) [User]-Store: I fill my grid regular "User"-Data:
Code:
Ext.define('MyApp.model.User', {    extend: 'Ext.data.Model',


    idProperty: 'userID',


    fields: [
        {
            name: 'name'
        },
        {
            name: 'emailAddress'
        },
        {
            name: 'age'
        },
        {
            name: 'birthdate',
            type: 'date'
        },
        {
            name: 'gender'
        },
        {
            name: 'getNewsletter',
            type: 'boolean'
        },
        {
            name: 'contactFK'
        },
        {
            name: 'userID',
            type: 'int'
        }
    ]
});
2) [Contact]-Store "Kontakt"-column gets filled by another JSON-File:
Code:
Ext.define('MyApp.store.Contacts', {    extend: 'Ext.data.Store',


    requires: [
        'MyApp.model.Contact'
    ],


    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            autoSync: true,
            model: 'MyApp.model.Contact',
            storeId: 'MyJsonStore1',
            proxy: {
                type: 'ajax',
                url: 'http://localhost/sencha/api/contact',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            }
        }, cfg)]);
    }
});
3. [User]-Model:
Code:
Ext.define('MyApp.model.User', {    extend: 'Ext.data.Model',


    idProperty: 'userID',


    fields: [
        {
            name: 'name'
        },
        {
            name: 'emailAddress'
        },
        {
            name: 'age'
        },
        {
            name: 'birthdate',
            type: 'date'
        },
        {
            name: 'gender'
        },
        {
            name: 'getNewsletter',
            type: 'boolean'
        },
        {
            name: 'contactFK'
        },
        {
            name: 'userID',
            type: 'int'
        }
    ]
});
4. [Contact]-Model:
Code:
Ext.define('MyApp.model.Contact', {    extend: 'Ext.data.Model',


    fields: [
        {
            name: 'ContactID'
        },
        {
            name: 'Name'
        },
        {
            name: 'SourceContacTID'
        },
        {
            name: 'CustomerFK'
        },
        {
            name: 'DateCreated'
        },
        {
            name: 'BasePriority'
        }
    ]
});
5) View:
Code:
Ext.define('MyApp.view.MyViewport', {    extend: 'Ext.container.Viewport',


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    frame: true,
                    id: 'gridPanelId',
                    autoScroll: true,
                    title: 'My Grid Panel',
                    store: 'Users',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'userID',
                            text: 'ID'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name',
                            flex: 4,
                            editor: {
                                xtype: 'textfield',
                                maxLength: 20,
                                minLength: 3
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'emailAddress',
                            text: 'E-Mail',
                            flex: 4,
                            editor: {
                                xtype: 'textfield',
                                vtype: 'email'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                if (value > 33) {
                                    return '<span style="color:green;font-weight: bold">' + value + '</span>';
                                } else if (value <= 33) {
                                    return '<span style="color:red;font-weight: bold">' + value + '</span>';
                                }
                                return value;
                            },
                            width: 45,
                            dataIndex: 'age',
                            text: 'Alter',
                            editor: {
                                xtype: 'numberfield',
                                decimalPrecision: 0
                            }
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'birthdate',
                            text: 'Geburtstag',
                            format: 'd.m.Y',
                            editor: {
                                xtype: 'datefield',
                                format: 'd.m.Y'
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                if (value == 'M') {
                                    return '<span style="color:green;font-weight: bold;">männlich</span>';
                                } else if (value  == 'F') {
                                    return '<span style="color:red;font-weight: bold;">weiblich</span>';
                                }
                                return value;
                            },
                            width: 65,
                            align: 'center',
                            dataIndex: 'gender',
                            groupable: true,
                            text: 'Geschlecht'
                        },
                        {
                            xtype: 'gridcolumn',
                            renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                if(value == true)
                                {
                                    return '<span style="color:green;font-weight: bold;">Ja</span>';
                                } else if (value == false)
                                {
                                    return '<span style="color:red;font-weight: bold;">Nein</span>';
                                }
                            },
                            dataIndex: 'getNewsletter',
                            text: 'Newsletter',
                            editor: {
                                xtype: 'combobox',
                                autoRender: false
                            }
                        },
                        {
                            xtype: 'gridcolumn',
                            width: 100,
                            align: 'center',
                            dataIndex: 'contactFK',
                            menuText: '',
                            text: 'Kontakt',
                            editor: {
                                xtype: 'combobox',
                                displayField: 'ContactID',
                                forceSelection: true,
                                store: 'Contacts',
                                valueField: 'ContactID'
                            }
                        },
                        {
                            xtype: 'actioncolumn',
                            id: 'delete',
                            width: 25,
                            items: [
                                {
                                    handler: function(view, rowIndex, colIndex, item, e, record, row) {
                                        var user = Ext.getStore('Users');
                                        user.remove(record);
                                    },
                                    icon: 'resources/icons/fam/delete.gif'
                                }
                            ]
                        }
                    ],
                    items: [
                        {
                            xtype: 'combobox',
                            width: 100,
                            fieldLabel: 'Label',
                            displayField: 'Name',
                            forceSelection: true,
                            store: 'Contacts',
                            valueField: 'ContactID'
                        }
                    ],
                    plugins: [
                        Ext.create('Ext.grid.plugin.RowEditing', {
                            clicksToEdit: 1
                        })
                    ],
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            items: [
                                {
                                    xtype: 'button',
                                    handler: function(button, event) {
                                        var user = Ext.getStore('Users');
                                        user.insert(0, new User());
                                        rowEditing.startEdit(0, 0);
                                    },
                                    text: 'Add User'
                                }
                            ]
                        }
                    ]
                }
            ]
        });


        me.callParent(arguments);
    }


});
This code doesn't work. It isn't able to find my model => not being able to get an instance of User [new User()]. A second error is the "rowEditing". It is also "undefined" and i don't know how to declare rowEditing.

What i just want is:
If i press the "Add"-button a new line should appear at line 0 and should be selected to be editable immediately.

Maybe testwise i want to implement an empty row at the bottom of the grid which always adds a new row if "enter" is pressed and all cells are filled with proper data.

Any idea? Thanks alot