0
我有一個表單和一個網格。我試圖讓用戶選擇網格中的一行，然後單擊一個按鈕，以便將行中的數據加載到表單中。Extjs：如何使用網格行選擇的值填充表單
這是到目前爲止我的觀點：
Ext.define('Project.view.main.Main', {
extend: 'Ext.panel.Panel',
autoScroll: true,
height: 600,
layout: 'border',
bodyBorder: false,
defaults: {
collapsible: true,
split: true,
bodyPadding: 10
},
initComponent: function() {
this.items = [
{
collapsible: false,
region: 'center',
margin: '5 0 0 0',
title: 'Record Event',
id: 'SaveEvent',
bodyPadding: 5,
layout: 'column',
items: [{
xtype: 'fieldset',
title: 'Event Information',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Event',
layout: 'hbox',
defaults: {
hideLabel: 'true'
},
items: [{
xtype: 'combobox',
forceSelection: true,
name: 'eventTypeId',
width: 300,
store: {
type: 'events'
},
valueField: 'eventTypeId',
tpl: Ext.create('Ext.XTemplate',
'<ul class="x-list-plain"><tpl for=".">',
'<li role="option" class="x-boundlist-item">{eventType}/{detail}</li>',
'</tpl></ul>'
),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{eventType}/{detail}',
'</tpl>'
),
allowBlank: false
}]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Event Number',
name: 'name',
allowBlank: true
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
format: 'Y-m-d',
name: 'startDate',
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
emptyText: 'Start',
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
name: 'endDate',
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
margin: '0 0 0 6',
emptyText: 'End',
allowBlank: false
},
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'tagfield',
fieldLabel: 'Environment',
name: 'environmentIds',
width: 500,
store: {
type: 'environments'
},
valueField: 'environmentId',
displayField: 'environmentName',
allowBlank: false
}]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'tagfield',
fieldLabel: 'Geographic Location',
name: 'geographicLocationIds',
width: 500,
store: {
type: 'locations'
},
valueField: 'locationId',
tpl: Ext.create('Ext.XTemplate',
'<ul class="x-list-plain"><tpl for=".">',
'<li role="option" class="x-boundlist-item">{region}/Sub region: {subRegion}</li>',
'</tpl></ul>'
),
labelTpl: '{region}/Sub region: {subRegion}',
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'textfield',
fieldLabel: 'Geographic Location (Out of Area)',
name: 'geographicLocationNotes',
width: 400,
emptyText: 'e.g. 30.2500 N, 97.7500 W',
allowBlank: true
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'combobox',
forceSelection: true,
fieldLabel: 'Organization',
name: 'organizationId',
store: {
type: 'organizations'
},
valueField: 'organizationId',
displayField: 'displayName',
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'textarea',
fieldLabel: 'Event Notes',
name: 'eventNotes',
width: 500,
height: 74
}
]
},
{
xtype: 'textarea',
fieldLabel: 'Event ID',
name: 'eventId',
hidden: true
}
]
}],
buttons: [
{
text: 'Save Event',
handler: function() {
var form = this.up('form'); // get the form panel
var formData = form.getValues();
if (form.isValid()) { // make sure the form contains valid data before submitting
Ext.Ajax.request({
url: 'api/events/create',
method:'POST',
headers: { 'Content-Type': 'application/json' },
params : Ext.JSON.encode(formData),
success: function(form, action) {
Ext.Msg.alert('Success', action.result);
},
failure: function(form, action) {
Ext.Msg.alert('Submission failed', 'There was an error.', action.result);
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Submit Failed', 'Please make sure you have made selections for each required field.')
}
}
}
]
},
{
title: 'Created Events',
region: 'east',
floatable: false,
margin: '5 0 0 0',
width: 500,
minWidth: 100,
maxWidth: 1000,
collapsed: true,
xtype: 'gridpanel',
store: {
type: 'createdEvents'
},
columns: [
{
header: 'Database ID',
dataIndex: 'eventId'
},
{
header: 'Event',
dataIndex: 'eventTypeId',
renderer: function(value, p, r) {
{return r.data['eventTypeName'] + '/' + r.data['eventDetail']}
}
},
{
header: 'Event Number',
dataIndex: 'name'
},
{
header: 'Start Date',
//this will be a problem because the form date is formatted as yyyy-mm-dd
dataIndex: 'startDateYear',
renderer: function(value, p, r) {
{return r.data['startDateYear'] + '-' + r.data['startDateMonth'] + '-' + r.data['startDateDay']}
}
},
{
header: 'End Date',
dataIndex: 'endDateYear',
renderer: function(value, p, r) {
{return r.data['endDateYear'] + '-' + r.data['endDateMonth'] + '-' + r.data['endDateDay']}
}
},
{
header: 'environments',
dataIndex: 'environmentIds',
renderer: function(value, p, r) {
{return r.data['environmentNames']}
}
},
{
header: 'Geographic Location',
dataIndex: 'geographicLocationIds',
renderer: function(value, p, r) {
{ return r.data['geographicLocationRegion'] + '/' + r.data['geographicLocationSubregion'] }
}
},
{
header: 'Geographic Location Notes',
dataIndex: 'geographicLocationNotes'
},
{
header: 'Organization',
dataIndex: 'organizationID',
renderer: function(value, p, r) {
{return r.data['organizationDisplayName']}
}
},
{
header: 'Event Notes',
dataIndex: 'eventNotes'
}
],
tbar: [{
text: 'Add new record to event',
scope: this,
handler: this.onAddClick
}]
},
];
this.callParent();
},
onAddClick: function(sm, row, rec){
//how to populate the form with the grid row data?
}
});
我試過這個解決方案，但它並沒有爲我工作： http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#form-grid
伊莫它的更好不從「形式」延伸，但f rom' Ext.container.Viewport'。從那裏你可以在「東部地區」放置一個表格，在「中心區域」放置一個表格。然後，您可以在「西部地區」放置一棵樹，稍後可能會添加「南部和北部地區」。沒有理由把網格放在表單面板內。 – Tarabass
你是對的Pawel！我沒有定義Ext.form.Panel。 – kimli