我想在用户点击某行时将数据加载到表单中。我找到了一些例子但不确定如何在我的脚本中使用它。我在建筑师中制作了一个表格,看起来像这样
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 = ... 但是如何将此设置加载到我的表单中呢?
答案 0 :(得分:2)
我认为它是ExtJs 4.然后你可以使用loadRecord
函数将记录加载到表单中:
var form = formpanel.getForm();
form.loadRecord(record);
完成编辑并点击“保存”按钮后,使用updateRecord
方法将数据从表单填充回已加载的记录,请参阅:Ext.form.Basic - updateRecord。
form.updateRecord();
然后使用store.sync()
或record.save()
保存,具体取决于您配置商店和模型的方式。