load data from grid to form

问题:

i want to load data into a form when a user click on a row. I found some examples but not sure how to use it in my script. I made a form in architect and it looks like this

items: [
            {
                xtype: 'tabpanel',
                id: 'mainTab',
                activeTab: 0,
                region: 'center',
                items: [
                    {
                        xtype: 'panel',
                        id: 'configurationTab',
                        title: 'Configuration',
                        dockedItems: [
                            {
                                xtype: 'tabpanel',
                                height: 479,
                                id: 'configurationVehicles',
                                suspendLayout: true,
                                title: 'configuration',
                                activeTab: 0,
                                dock: 'top',
                                items: [
                                    {
                                        xtype: 'panel',
                                        id: 'configurationDrivers',
                                        layout: {
                                            type: 'border'
                                        },
                                        collapsed: false,
                                        title: 'Drivers',
                                        items: [
                                            {
                                                xtype: 'form',
                                                floating: false,
                                                height: 420,
                                                id: 'configurationDriversConfiguration',
                                                itemId: 'configurationDriversConfiguration',
                                                bodyPadding: 10,
                                                animCollapse: false,
                                                collapsed: false,
                                                collapsible: true,
                                                title: 'Driver Configuration',
                                                floatable: false,
                                                region: 'north',
                                                items: [
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'configurationDriversCode',
                                                        name: 'configurationDriversCode',
                                                        fieldLabel: 'Driver Code',
                                                        allowBlank: false
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'configurationDriversName',
                                                        fieldLabel: 'Driver Name',
                                                        allowBlank: false
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'configurationDriversLicense',
                                                        fieldLabel: 'Driver License nr',
                                                        allowBlank: false
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'FirstName',
                                                        name: 'FirstName',
                                                        fieldLabel: 'Driver Given Name',
                                                        allowBlank: false
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'configurationDriversFamilyName',
                                                        fieldLabel: 'Driver Familiy Name',
                                                        allowBlank: false
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'configurationDriversPhone',
                                                        fieldLabel: 'Driver Phone Nr',
                                                        allowBlank: false
                                                    },
                                                    {
                                                        xtype: 'textfield',
                                                        id: 'configurationDriversEmail',
                                                        fieldLabel: 'Driver Email',
                                                        allowBlank: false
                                                    },
                                                    {
                                                        xtype: 'combobox',
                                                        id: 'configurationDriversProvider',
                                                        fieldLabel: 'Provider',
                                                        allowBlank: false,
                                                        displayField: 'name',
                                                        store: 'comboProviders',
                                                        valueField: 'id'
                                                    },
                                                    {
                                                        xtype: 'textareafield',
                                                        id: 'configurationDriversMemo',
                                                        fieldLabel: 'Memo',
                                                        allowBlank: false
                                                    },
                                                    {
                                                        xtype: 'button',
                                                        handler: function(button, event) {
                                                            var form = this.up('form');
                                                            var formfields = form.getForm().getValues();
                                                            //this.up('form').getForm().submit();
                                                            console.log(formfields);
                                                            Ext.MessageBox.alert('Submitted Values', formfields);
                                                            form.getForm().reset();
                                                        },
                                                        id: 'configurationDriversSave',
                                                        text: 'Save',
                                                        formBind: true
                                                    },
                                                    {
                                                        xtype: 'button',
                                                        handler: function(button, event) {
                                                            var form = this.up('form');
                                                            form.getForm().reset();
                                                        },
                                                        style: 'margin-left: 10px;',
                                                        text: 'Clear'
                                                    }
                                                ]
                                            },
                                            {
                                                xtype: 'gridpanel',
                                                id: 'configurationDriversGrid',
                                                itemId: 'configurationDriversGrid',
                                                animCollapse: false,
                                                collapsible: true,
                                                title: 'Drivers',
                                                store: 'gridDrivers',
                                                region: 'center',
                                                viewConfig: {

                                                },
                                                columns: [
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'id',
                                                        text: 'Id'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'version',
                                                        text: 'Version'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'driverId',
                                                        text: 'DriverId'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        id: 'FirstName',
                                                        dataIndex: 'firstName',
                                                        text: 'FirstName'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'middleName',
                                                        text: 'MiddleName'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'lastName',
                                                        text: 'LastName'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'email',
                                                        text: 'Email'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'workPhone',
                                                        text: 'WorkPhone'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'note',
                                                        text: 'Note'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'licenseNumber',
                                                        text: 'LicenseNumber'
                                                    },
                                                    {
                                                        xtype: 'gridcolumn',
                                                        dataIndex: 'providerId',
                                                        text: 'ProviderId'
                                                    },
                                                    {
                                                        xtype: 'actioncolumn',
                                                        id: 'idAction',
                                                        dataIndex: 'id',
                                                        items: [
                                                            {
                                                                handler: function(view, rowIndex, colIndex, item, e) {

                                                                    console.log('Delete');
                                                                },
                                                                icon: 'img/delete.png'
                                                            }
                                                        ]
                                                    }
                                                ],

I found an example like this

    onRowselectionmodelSelect: function(rowmodel, record, index, options) {
    console.log(record.get('id'));
    formpanel.getForm().load({
        url: 'xml-form-data.xml',
        waitMsg: 'Loading...'
    });
}

The formpanel.getForm().load({ should point to the form section. In the examples they used var formpanel = ... But how can i load it in this setup into my form?

回答1:

I suppose it is ExtJs 4. Then you can load record to the form using loadRecord function:

var form = formpanel.getForm();
form.loadRecord(record);

After you finished editing and hit a Save button use updateRecord method to populate data back from a form to a loaded record, see: Ext.form.Basic - updateRecord.

form.updateRecord();

and then save it with store.sync() or record.save() depending on how you configured your store and model.