javascript - 在 extjs View 中使用动态 getter 进行数学计算

Question

我有一个窗口，我想按屏幕高度的百分比而不是静态数字来设置其高度和宽度。

我查了一下，发现我可以使用Ext.getBody().getViewSize().height和Ext.getBody().getViewSize().width获取屏幕高度。我在那里很好。

然后，我使用这些路径设置高度和宽度属性并乘以任意小数:

Ext.define("Registration.view.events.details.EventDetails",{
    extend: "Ext.window.Window",
    xtype: 'eventdetails',


    layout: 'fit',
    autoShow: true,

    height: Ext.getBody().getViewSize().height * .8,
    width: Ext.getBody().getViewSize().width * .8,

...

有效。

然后，我尝试将这些小数抽象为默认配置值，然后使用动态生成的 getter 代替它们。这就是它的突破点:

Ext.define("Registration.view.events.details.EventDetails",{
    extend: "Ext.window.Window",
    xtype: 'eventdetails',


    // Creates my getter methods
    config:{
        defaultHeightPercentage: 0.8,
        defaultWidthPercentage: 0.8
    },


    layout: 'fit',
    autoShow: true,

    // This doesn't work
    height: Ext.getBody().getViewSize().height * this.getDefaultHeightPercentage(),
    width: Ext.getBody().getViewSize().width * this.getDefaultWidthPercentage(),

...

有什么原因我不能用这种方法进行数学计算吗？我尝试将整个方程放在括号中，认为可以解决问题(例如 height: ( Ext.getBody().getViewSize().height * this.getDefaultHeightPercentage() ),)，但它没有。

我该如何实现这个目标。

Here's a fiddle of what I'm running into如果有帮助的话。

谢谢!

Answer 1

似乎问题不在于数学，而在于范围。 在类定义中，您不能使用 this (在函数外部)来引用您的实例。我在你的 fiddle 中尝试了以下代码，它工作得很好:

initComponent : function() {
    var me = this;

    me.height = Ext.getBody().getViewSize().height * me.getDefaultHeightPercentage();
    me.width = Ext.getBody().getViewSize().width * me.getDefaultWidthPercentage();

    me.callParent(arguments);
},