像您正在做的那样在类原型上放置一个字段对象（或任何类型的非原始值）是一个非常糟糕的主意。您从类中实例化的每个HistoryProperty人都将共享相同的字段，这几乎肯定不是您想要的。
HistoryProperty为您的字段添加访问器方法并在第一次请求时创建它允许您调用在您的类中定义的昨天方法，并确保您将避免共享相同日期字段的两个实例可能发生的任何意外。
Ext.define('FM.view.HistoryProperty',{
extend: 'Ext.grid.property.Grid',
alias: 'widget.historyProperty',
getStartDateField: function() {
if (!this.startDate) {
this.startDate = Ext.create('Ext.form.DateField',{
format: 'y-m-d G:i',
value : this.yesterday(),
listeners: {
expand: {
fn: function(field) {
field.setMaxValue(this.endDate.getValue());
},
scope: this
}
}
});
}
return this.startDate;
},
yesterday: function(){
var yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1);
yesterday.setHours(0,0,0);
return yesterday;
}
});
使用您当前的代码，HistoryProperty.yesterday当您调用它时该方法不可用，因为尚未定义该类并且您已经尝试访问其原型上的方法。假设 endDate 字段是像 StartDate 一样创建的，您的扩展侦听器处理程序可能也不起作用。这些字段位于类的原型上，需要像这样访问。
function() {
this.setMaxValue(FM.view.HistoryProperty.prototype.endDate.getValue());
}
如果您坚持将字段直接放在原型上（不要这样做），则必须在定义类之前定义昨天的函数。例如。
(function() {
var yesterday = function() {
var date = new Date();
date.setDate(date.getDate() - 1);
date.setHours(0, 0, 0);
return date;
};
Ext.define('FM.view.HistoryProperty',{
extend: 'Ext.grid.property.Grid',
alias: 'widget.historyProperty',
StartDate: Ext.create('Ext.form.DateField',{
format: 'y-m-d G:i',
value : yesterday()
})
});
} ());
编辑
当您使用 定义类时Ext.define，this除非您实际上在类方法中，否则不会引用您的类原型。
Ext.define('Test', {
doSomething: function() {
// 'this' refers to the object this method was called on. An instantiation
// of the Test class.
this.x = 1;
}
property1: 'a',
// 'this' is the whatever scope Ext.define was called in (probably window), not Test.prototype.
property2: this.property1, // property2 will not be 'a'
objectProperty: {
// 'this' is still window, not Test.prototype.
property3: this.property1 // property3 will not be 'a'
}
});
在您的代码中，源对象文字指的是this.yesterdayand this.today。在定义类的过程中，您无法访问yesterday或today此时，因为this仍然是window.
一个主要问题是您正在使用用于类实例化但在类定义时指定它们的配置。如果您查看 Ext 的 customEditors 文档（已弃用）、source、sourceConfig 等。您会看到它们正在将这些属性添加到传递给构造函数的配置对象中。
您真的不想在类原型上添加这些属性，因为它们是特定于实例的，并且跨多个网格共享您的编辑器字段会导致很多意外行为。
例如，如果开始和结束日期字段是全局的，则更改一个网格中的开始日期将影响共享这些字段的所有其他网格中的最小结束日期。
相反，重写 initComponent 方法并在那里添加配置属性。像这样的东西应该适合你：
Ext.define('FM.view.HistoryProperty', {
extend: 'Ext.grid.property.Grid',
alias: 'widget.historyProperty',
title: 'History',
closable: false,
header: true,
layout: {
type: 'vbox',
align: 'left'
},
sortableColumns: false,
getStartDateField: function() {
if (!this.startField) {
this.startField = Ext.create('Ext.form.DateField',{
format: 'y-m-d G:i',
listeners: {
expand: {
fn: function(field) {
// get this instance of the grid's end date field
field.setMaxValue(this.getEndDateField().getValue());
},
// the scope is the grid component.
scope: this
}
}
});
}
return this.startField;
},
getEndDateField: function() {
if (!this.endField) {
this.endField = Ext.create('Ext.form.DateField',{
format: 'y-m-d G:i',
listeners: {
expand: {
fn: function(field) {
// get this instance of the grid's start date field
field.setMinValue(this.getStartDateField().getValue());
},
// the scope is the grid component.
scope: this
}
}
});
}
return this.endField;
},
getVehicleField: function() {
return Ext.create('Ext.form.ComboBox',{
store: Ext.create('FM.store.Vehicles',{}),
editable : false,
queryMode: 'local',
displayField: 'vehiclename',
valueField: 'vehicleid',
id: 'vehicle'
});
},
// Setup the source and sourceConfig properties in initComponent not on the
// class prototype so that each instance of the grid has its own unique
// setup.
initComponent: function() {
// 'this' is the grid component.
Ext.apply(this, {
source: {
Vehicle: "select vehicle",
startDate: this.yesterday(),
endDate: this.today()
},
sourceConfig: {
startDate: {
displayName: 'Start',
// we are in a method so 'this' is the instance of the grid
// and the getStartDateField is available to us here.
editor: this.getStartDateField()
},
endDate: {
displayName: 'End',
editor: this.getEndDateField()
},
Vehicle: {
displayName: 'Vehicle',
editor: this.getVehicleField()
}
}
});
this.callParent(arguments);
},
yesterday: function() {
var yesterday = new Date();
yesterday.setDate(yesterday.getDate()-1);
yesterday.setHours(0,0,0);
return yesterday;
},
today: function() {
var today = new Date();
today.setHours(23,59,59);
return today;
}
});