Question

I’m trying to create custom property values (based on a condition of a function) for my Ext objects, instead of specifying just a value.

Example 1:

old code (working)

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

new code (not working)

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

Example 2:

old code (working)

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

new code (not working)

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

Example 3:

Ignore entire textfield object (lazy instance) completely based on a condition:

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

Answer 1

You simply can’t do it this way. It is not possible to replace a type with a function. In your case you assign a function reference to a variable which is expected to be boolean, same for the string.

Solution A.

You should consider to write yourself a field factory. Within that factory you can then execute any function before assigning configs. (Sort of same then B but can be used to reduce function calls)

Solution B.

Use a function reference itself. This one should then get executed. (spare the requirement of class extension and is over that reuseable)

 // 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);
           }
        }
    }]
});

Solution C.

And the solution I use most in such cases are simplified if else statements

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