javascript - ExtJS 有条件地呈现输入字段

Question

我在 ExtJS 中有以下代码

var formPanel = Ext.create('Ext.form.Panel', {
title: 'Panel title',
renderTo: Ext.getBody(),
items: [{
    xtype: 'container',
    layout: 'hbox',
    items: [{
        xtype: 'textfield',
        fieldLabel: 'First Name', 
        name: 'FirstName',
    }, {
        xtype: 'textfield',
        fieldLabel: 'Last Name',  
        name: 'LastName',
    },{
        xtype:'fieldset',
        title: 'Phone Number',
        defaultType: 'textfield',
        items :[{
                fieldLabel: 'Home',
                name: 'home',
                value: '(888) 555-1212'
            },{
                fieldLabel: 'Business',
                name: 'business',
                toBeRendered: IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE // custom property that must restrict rendering
                rendered: IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE //doesn't work
            }]
    }]
}]
});

我想创建一个应用程序，它将具有属性文件，我可以在其中为 SUPPORTED 字段设置标志，例如 IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE = false。如果它是 false 而不是文本输入 fieldLabel: 'Business' 根本不会呈现 - html 中没有隐藏/禁用的文本输入 Business。

我试过 rendered 属性 - 但它不起作用，目前唯一的解决方案是使用 items = Ext.Array.filter(items,filterFunction) 在 onRender 中；

还有其他解决方案可以限制渲染输入元素吗？

提前致谢。

Answer 1

使用 initItems 方法代替构造函数:

Ext.define('MyComponent', {
    extend: 'Ext.panel.Panel',
    xtype: 'mycomponent',

    bodyPadding: 10,
    border: true,
    title: 'My component',

    items : [
        {
            xtype: 'button',
            text: 'My allowed button'
        }
    ],

    initItems : function() {
        var items = this.items;

        // Your conditions
        if (false) {
            items.push({
                xtype: 'button',
                text: 'My denied button'
            });
        }

        this.callParent();
    }
});

https://fiddle.sencha.com/#fiddle/17qi