开发者

Extjs Automatic form grid / binding

this is this ausom row editor tool in ext js.

Extjs Automatic form grid / binding

I am looking for more complex tool for grid and actual f开发者_StackOverflow中文版orm.

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


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();
    });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜