Question

this is this ausom row editor tool in ext js.

I am looking for more complex tool for grid and actual form.
Something with good API so I can give the user the abillity to see the from in full screen, and not just in a row.
Something that will help me building more and more CRUDs without recreating the forms again and again.
something like “form renderer” from settings.

Where can I get this kind of API.
Thanks

Answer 1

I don’t know of any built-in “form-renderers” but you can create analog using form’s loadRecord method.
First of all you create form with the same set of inputs as form’s columns (obviously, you can do it dynamicaly). For example if your columns config looks like this:

columns: [
    {header: 'Name',  dataIndex: 'name'},
    {header: 'Email', dataIndex: 'email', flex:1},
    {header: 'Phone', dataIndex: 'phone'}
],

your form’s config should look like this:

Ext.define('ux.FormEditor', {
    extend: 'Ext.window.Window',
    alias : 'widget.formeditor',
    title : 'Edit User',
    layout: 'fit',
    autoShow: true,
    initComponent: function() {
        this.items = [{
            xtype: 'form',
            items: [{
                    xtype: 'textfield',
                    name : 'name',
                    fieldLabel: 'Name'
                },{
                    xtype: 'textfield',
                    name : 'email',
                    fieldLabel: 'Email'
                },{
                    xtype: 'textfield',
                    name : 'phone',
                    fieldLabel: 'Phone'
                }]
        }];

        this.buttons = [{
                text: 'Save',
                action: 'save'
            },{
                text: 'Cancel',
                scope: this,
                handler: this.close
            }];

        this.callParent(arguments);
    }
});

Now you assign handler for grid’s itemdblclick event:

yourGrid.on('itemdblclick', function(grid, record) {
    var view = Ext.widget('useredit'),
        form = view.down('form');

    form.loadRecord(record);
    view.down('button[action=save]').on('click', function(btn) {
        var rec = form.getRecord(),
            values = form.getValues();

        rec.set(values);
        view.close();
    });
});