Ext JS 4:基于条件的自定义对象属性值

时间:2012-08-31 17:27:57

标签: object extjs properties conditional-statements

我正在尝试为Ext对象创建自定义属性值(基于函数的条件),而不是只指定一个值。

示例1:

旧代码(正常工作)

        this.buttons = [
            {
                text: 'Save',

enter image description here

新代码(不工作)

        this.buttons = [
            {
                text: function() {
                    return 'Save X';
                },

enter image description here

示例2:

旧代码(正常工作)

                    }, {
                        width: 270,
                        labelAlign: 'right',
                        xtype: 'textfield',
                        name: 'user_id', 
                        fieldLabel: 'User ID',
                        hidden: true
                    }]

新代码(不工作)

                    }, {
                        width: 270,
                        labelAlign: 'right',
                        xtype: 'textfield',
                        name: 'user_id', 
                        fieldLabel: 'User ID',
                        hidden: function() { return true; }
                    }]

示例3:

完全根据条件忽略整个 textfield 对象(懒惰实例):

                    }, {
                        width: 270,
                        labelAlign: 'right',
                        xtype: 'textfield',
                        name: 'employee_number', 
                        fieldLabel: 'Employee Number'
                    }]

2 个答案:

答案 0 :(得分:4)

你根本无法这样做。无法用函数替换类型。在您的情况下,您为一个预期为布尔值的变量分配一个函数引用,对于该字符串是相同的。

解决方案A。

你应该考虑给自己写一个野外工厂。在该工厂内,您可以在分配配置之前执行任何功能。 (排序与B相同但可用于减少函数调用)

解决方案B.

使用函数引用本身。然后应该执行这个。 (不需要类扩展,并且可以重复使用)

 // The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
        //...
    ]
});
Ext.namespace('my.util.helper');
my.util.helper.decideHide = function() { return true; }

// Create the combo box, attached to the states data store
Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    items: [{
       xtype: 'combo',
       fieldLabel: 'Choose State',
       store: states,
       queryMode: 'local',
       displayField: 'name',
       valueField: 'abbr',
       test: my.util.helper.decideHide(),
       listeners: {
           afterrender: function(n) {
               alert(n.test);
           }
        }
    }]
});

解决方案C。

在这种情况下我最常用的解决方案是if else statements

// ... // more code
{
    text: myCondition ? 'Text A' : 'Text B',
    // more code
}
// ... // more code

答案 1 :(得分:0)

是的,这不起作用,一些Ext配置采用一个将被评估的功能,但大多数没有。而不是创建匿名函数而不是调用它们,我会做这样的事情:

Ext.define('UserPanel', {
    extend : 'Ext.panel.Panel',
    initComponent : function() {

        this.items = [{
            xtype : 'button',
            text : this._getSaveButtonText()
        }, {
            width : 270,
            labelAlign : 'right',
            xtype : 'textfield',
            name : 'user_id',
            fieldLabel : 'User ID',
            hidden : this._isUserIdHidden()
        }]
        this.callParent();
    },

    _getSaveButtonText : function() {
        return 'Save';
    },

    _isUserIdHidden : function() {
        return true;
    }
});