我有一个表格和一个网格。我试图让用户选择网格中的一行，然后单击一个按钮，以便将行中的数据加载到表单中。
到目前为止，我的观点是：
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
答案 0 :(得分：1)
您的示例不起作用，因为没有form xtype定义，也没有Ext.form.Panel。
请仔细查看Sencha - KitchenSink。您会看到Ext.form.Panel的定义是KitchenSink.view.form.FormGrid从Ext.define('Project.view.main.Main', {
extend: 'Ext.panel.Panel',
扩展而来。
所以你的第一步应该是：
更改此
Ext.define('Project.view.main.Main', {
extend: 'Ext.form.Panel',
到
Ext.define('Project.view.main.Main', {
extend: 'Ext.form.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'
}
],
listeners: {
scope: this,
selectionchange: this.onSelectionChange
}
}
];
this.callParent();
},
onSelectionChange: function(model, records) {
var rec = records[0];
if (rec) {
this.getForm().loadRecord(rec);
}
}
});
这是可能有效的例子：
<!DOCTYPE html>
<html>
<head>
<script src="app/app.js"></script>
<script src="bower_components/angular/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<ul ng-repeat="x in names">
<li >
{{ x }}
</li>
</ul>
</body>