我尝试使用 formBind: true 添加验证到我的表单
但验证并未发生(保存按钮未灰显)。正在验证文本字段不为空，但将其绑定(bind)到“保存”按钮似乎没有执行任何操作。
如果您双击一条记录，它将显示相关表单。这可以在这里看到:
http://jsfiddle.net/byronaltice/7yz9oxf6/32/
下面的代码以防任何人都无法访问 jsfiddle:
Ext.application({
name: 'MyApp',
launch: function () {
//Popup form for items in grid panel
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
padding: 5,
width: 600,
title: 'Edit Sessions',
model: 'true',
items: [{
xtype: 'form',
bodyPadding: 10,
title: '',
items: [{
xtype: 'textfield',
name: 'title',
fieldLabel: 'Title',
labelWidth: 90,
defaults: {
labelWidth: 90,
margin: '0 0 10 0',
anchor: '90%'
},
allowBlank: false
}, {
xtype: 'checkboxfield',
name: 'approved',
fieldLabel: 'Approved'
}]
}, {
xtype: 'container',
padding: '10 10 10 10',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Save',
formBind: 'true',
margin: '5 5 5 5',
handler: function (button) {
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
margin: '5 5 5 5',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
//The grid panel area
Ext.define("SessionGridPanel", {
extend: 'Ext.grid.Panel',
alias: 'widget.sessionGridPanel',
listeners: {
itemdblclick: function (gridpanel, record, item, e) {
var formWindow = Ext.create('SessionForm');
formWindow.show();
var form = formWindow.down('form');
form.loadRecord(record);
}
},
store: {
fields: [
'id', {
name: 'title',
sortType: 'asUCText'
},
'approved', {
dateFormat: 'c',
name: 'sessionTimeDateTime',
sortType: 'asDate',
type: 'date'
}, {
convert: function (v, rec) {
var convertIt = Ext.util.Format.dateRenderer('m/d/Y g:i a'),
pretty = convertIt(rec.get("sessionTimeDateTime"));
return pretty;
},
name: 'sessionTimePretty',
type: 'string'
}],
autoLoad: true,
autoSync: true,
data: [{
id: 101,
sessionTimeDateTime: '2014-08-27T21:00:00.000+0000',
title: 'JS for D',
approved: true
}, {
id: 102,
sessionTimeDateTime: '2014-10-27T22:30:00.000+0000',
title: 'CS for S',
approved: false
}, {
id: 105,
sessionTimeDateTime: '2014-09-27T20:30:00.000+0000',
title: 'XxtJS for E',
approved: false
}, {
id: 104,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ZXxtJS for E',
approved: true
}, {
id: 103,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ExtJS for E',
approved: true
}],
sorters: [{
property: 'title'
}],
groupField: 'sessionTimeDateTime'
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
}, {
xtype: 'gridcolumn',
dataIndex: 'title',
text: 'Title',
flex: 1,
minWidth: 100,
width: 75
}, {
xtype: 'gridcolumn',
dataIndex: 'approved',
text: 'Approved'
}, {
dataIndex: 'sessionTimePretty',
text: 'Session Start Time',
width: 180
}],
features: [{
ftype: 'grouping',
groupHeaderTpl: [
'{[values.rows[0].get(\'sessionTimePretty\')]} (Session Count: {rows.length})']
}]
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'border'
//align: 'stretch'
},
items: [{
region: 'west',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
split: true,
items: [{
xtype: 'sessionGridPanel',
flex: 1
}, {
xtype: 'splitter',
width: 1
}, {
html: '<b>Speakers Panel</b>',
flex: 1,
xtype: 'panel'
}]
}, {
region: 'center',
html: '<b>Details Panel</b>',
flex: 1,
xtype: 'panel',
title: 'Details Panel',
collapsible: true,
collapsed: true,
collapseDirection: 'right'
}]
});
}
});
最佳答案
来自 Sencha API 文档:
Any component within the FormPanel can be configured with formBind: true.
问题是您在表单组件外部使用属性 formBind
您可以通过以下方式更正代码:
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
// ...
items: [{
xtype: 'form',
items: [{
// your form items
}],
buttons: [{
xtype: 'button',
text: 'Save',
formBind: true,
handler: function (button) {
// also you should rewrite the following line
// to make it independant from the components structure
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
您的 fiddle 已更改:http://jsfiddle.net/7yz9oxf6/34/
关于javascript - 表单验证在 ExtJS 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30244223/