从网格加载数据以形成 [英] 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...'
});
}
formpanel.getForm（）。load（{should指向表单部分在这些示例中，使用var formpanel = ...
但是我可以如何将其加载到我的表单中？
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?
推荐答案
我想这是ExtJs 4.然后你可以使用 loadRecord 函数加载记录到表单中：
I suppose it is ExtJs 4. Then you can load record to the form using loadRecord function:
var form = formpanel.getForm();
form.loadRecord(record);
完成编辑并点击保存按钮后，使用 updateRecord 方法将数据从表单填充到加载的记录，请参阅： Ext.form.Basic - updateRecord 。
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();
然后使用 store.sync（）或 record.save（）取决于您如何配置商店和型号。
and then save it with store.sync() or record.save() depending on how you configured your store and model.
这篇关于从网格加载数据以形成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
