从定义类的嵌套创建的对象中访问定义类的函数
从定义类的嵌套创建的对象中访问定义类的函数
提问于 2013-03-03 04:00:19
我想从用Ext.create创建的嵌套对象中访问类的函数，我不能使用它，因为它引用了创建的对象。
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,
customEditors: {
Vehicle: Ext.create('Ext.form.ComboBox',{
store: Ext.create('FM.store.Vehicles',{}),
editable : false,
queryMode: 'local',
displayField: 'vehiclename',
valueField: 'vehicleid',
id: 'vehicle'
}),
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;
} ,
getEndDateField: function(){
if(!this.endDate){
this.endDate = Ext.create('Ext.form.DateField',{
format: 'y-m-d G:i',
selectOnFocus:true,
value : this.today(),
listeners: {
expand: {
fn: function(field){ field.setMinValue(this.startDate.getValue()); }
},
scope: this
}
});
}
return this.endDate;
}
},
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;
},
source: {
"Vehicle": 'Select Vehicle',
"getStartDateField": this.yesterday,
"getEndDateField": this.today
}})；
我使用已定义类的名称来访问它的函数，但它不工作，Ext.cmp('historyProperty')不工作！
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-03 22:02:48
像您这样将字段对象(或任何类型的非原始值)放在类原型上是一个非常糟糕的想法。您从该类实例化的每个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方法时，它是不可用的，因为该类尚未定义，并且您已经在尝试访问其原型上的方法。假设像StartDate一样创建endDate字段，那么您的扩展侦听器处理程序可能也不会工作。这些字段位于类的原型上，需要像这样访问。
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.yesterday和this.today。在定义类的过程中，您不能访问yesterday或today，因为this仍然是window。
一个主要问题是，您正在使用用于类实例化的配置，但却在类定义时指定它们。如果您查看Ext的customEditors (已弃用)、source、sourceConfig等文档，您将看到它们在传递给构造函数的configuration对象中添加了这些属性。
您并不是真的想在类prototype上添加这些属性，因为它们是特定于实例的，并且跨多个网格共享您的编辑器字段会导致许多意外的行为。
例如，如果“开始日期”和“结束日期”字段是全局字段，则更改一个网格中的开始日期将影响共享这些字段的所有其他网格中的最小结束日期。
相反，应覆盖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;
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15178814
复制相关文章
相似问题
腾讯云开发者
