将数据从网格加载到表单

时间:2012-06-06 13:05:57

标签: forms extjs load row

我想在用户点击某行时将数据加载到表单中。我找到了一些例子但不确定如何在我的脚本中使用它。我在建筑师中制作了一个表格,看起来像这样

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'
                                                            }
                                                        ]
                                                    }
                                                ],

我找到了一个这样的例子

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

formpanel.getForm()。load({应该指向表单部分。在示例中,他们使用var formpanel = ... 但是如何将此设置加载到我的表单中呢?

1 个答案:

答案 0 :(得分:2)

我认为它是ExtJs 4.然后你可以使用loadRecord函数将记录加载到表单中:

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

完成编辑并点击“保存”按钮后,使用updateRecord方法将数据从表单填充回已加载的记录,请参阅:Ext.form.Basic - updateRecord

form.updateRecord();

然后使用store.sync()record.save()保存,具体取决于您配置商店和模型的方式。