我在这里粘贴了更新的代码。请看看，让我知道我在这里做的错误。在表单中我也显示grid。
因此，当我点击要编辑的记录时，我需要填写表格，我可以在其中编辑相应的记录详细信息并更新到数据库中。
var grid = new Ext.grid.GridPanel({
frame: true,
store: store,
selModel: sm,
enableHdMenu: false,
stripeRows: true,
autoScroll: true,
trackMouseOver: true,
disableSelection: false,
loadMask: true,
enableColumnMove: false,
height: 350,
width: 960,
title: 'Edit Contractor Details',
columns: [{
header: "Requestor Name",
width: 75,
sortable: true,
dataIndex: 'requestorname'
}, {
header: "Start Date",
width: 85,
sortable: true,
xtype: 'datecolumn',
dataIndex: 'startdate',
dateFormat: 'n/j/Y'
}, {
header: "Supervisor",
width: 75,
sortable: true,
dataIndex: 'supervisor'
}, {
header: "Company",
width: 100,
sortable: true,
dataIndex: 'company'
}, {
header: "Last Name",
width: 75,
sortable: true,
dataIndex: 'lastname'
}, {
header: "First Name",
width: 75,
sortable: true,
dataIndex: 'firstname'
},
sm
],
tbar: [{
iconCls: 'contractor-add',
text: 'Edit Employee',
handler: function(grid, rowIndex, colIndex) {
alert("test");
var editWindow = new Ext.Window({
id: 'id_editWindow',
title: 'Edit',
closable: true,
width: 750,
height: 380,
plain: true,
layout: 'fit',
items: simple,
listeners: {
show: function EditUser(rec) {
var formpanel = Ext.getCmp('formPanel');
formpanel.getForm().loadRecord(rec);
}
}
});
editWindow.show();
}
}],
// customize view config
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true,
getRowClass: function(record, Index) {}
},
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
store: store,
displayInfo: true,
displayMsg: 'Displaying Records {0} - {1} of {2}',
emptyMsg: "No cases to display"
})
});
//Form Creation
var simple = new Ext.form.FormPanel({
standardSubmit: true,
frame: true,
xtype: 'form',
// id: 'tabForm',
id: 'formPanel',
bodyPadding: 5,
width: 1000,
border: false,
bodyBorder: false,
fieldDefaults: {
labelWidth: 75,
msgTarget: 'side'
},
items: {
xtype: 'tabpanel',
id: 'tabpanel',
activeTab: 0,
defaults: {
bodyPadding: 10,
layout: 'anchor'
},
items: [{
title: 'New Contractor Details',
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
//Requestor Info
xtype: 'fieldset',
title: 'Requestor Details',
defaults: {
width: 150
},
fieldDefaults: {
msgTarget: 'side',
labelWidth: 300
},
defaultType: 'textfield',
layout: 'column',
labelWidth: 150,
defaults: {
anchor: '100%'
},
items: [{ // column #1
xtype: 'container',
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Requestor Name',
afterLabelTextTpl: required,
labelStyle: 'color:#000000',
name: 'requestorname',
id: 'requestorname',
//hasfocus:true,
anchor: '80%',
allowBlank: false,
listeners: {
afterrender: function(field) {
field.focus(false, 1000);
}
}
}, {
title: 'Manage Contractor Details',
// renderTo: bd,
// activeTab: 0, // first tab initially active
defaults: {
bodyPadding: 10
},
items: [grid]
}]
}],
buttons: [{
text: 'Submit',
formBind: true,
handler: function() {
var requestorname = Ext.getCmp('requestorname').getValue();
var form = Ext.getCmp('formPanel').getForm();
if (form.isValid()) {
//alert('Tests');
Ext.Ajax.request({
url: 'NewHireDetailsInsertion?firstname=' + firstname + '&' + 'middlename=' + middlename + '&' + 'lastname=' + lastname +
'&' + 'suffix=' + suffix + '&' + 'company=' + company + '&' + 'requestorname=' + requestorname + '&'...so on...
method: 'POST',
submitEmptyText: false
});
simple.getForm().getEl().dom.action = 'NewHireDetailsInsertion';
//Ext.Msg.maxWidth =2000;
Ext.Msg.alert('Message', "New Hire information Submitted");
simple.getForm().reset();
} else {
Ext.Msg.alert('Message', "Please enter all required fields");
}
}
}, {
text: 'Reset',
handler: function() {
simple.getForm().reset();
}
}]
}]
}]
});
});
simple.render('mydiv');
答案 0 :(得分：1)
您可以提供更多示例代码，并确保您提供的代码格式正确...因此，我提供的示例应该指导您正确的方向，如果我明白你是什么试图实现。
将逻辑放入您的视图非常混乱，这是我在您提供的代码中所看到的。 ExtJS MVC中控制器的作用是观察视图（或其他控制器！）触发的事件并做出相应的反应。
通过在Controller上为常用组件建立引用（refs），您可以节省大量时间和头痛。在您的场景中，Grid和Window都会成为很好的参考候选者。
请查看Controller文档，以获得有关ref功能的更全面说明，以及Controller的control功能：http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.app.Controller
Ext.define('My.controller.Grid', {
extend: 'Ext.app.Controller',
/** List required views, models, stores here */
refs: [
{
name: 'grid',
selector: '',
xtype: 'my-grid' // Defined in the Grid's config i.e., alias: 'widget.my-grid'
},{
name: 'editWindow',
selector: '',
xtype: 'my-edit-window',
autoCreate: true // Automatically create this if it isn't already created
}
],
init:function(app){
/** Observe your Views by their itemId or any valid ComponentQuery selector */
'#my-grid-panel': {
itemdblclick: { fn: this.onGridRecordDoubleClick, scope: this }
},
'#my-edit-window': {
afterrender: { fn: this.editWindowDidRender, scope: this },
close: { fn: this.onWindowClose, scope: this }
}
},
onGridRecordDoubleClick: function(grid, record, element, index, event){
/** save a reference to the selected record on the controller instance */
this.selectedRecord = record;
/** Show the 'Edit' Window if possible */
if(!this.activeWindow)
this.getEditWindow(); // Magic method created by Controller Reference
},
editWindowDidRender: function(view){
/** Get the Form by its itemId */
var myForm = view.down('#my-form');
/** Load the selected record into the form */
myForm.loadRecord(this.selectedRecord);
/** Save a reference to the window, why not? */
this.activeWindow = view;
},
onWindowClose: function(){
/** remove the reference to the window and selected record */
this.activeWindow = undefined;
this.selectedRecord = undefined;
/** Clear selection on the grid */
this.getGrid().getSelectionModel().clearSelections();
this.getGrid().reconfigure();
}
});