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 中没有 hidden/disabled 文本输入 Business。

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

是否有任何其他解决方案可以限制渲染输入元素？

提前致谢。

Answer 1

我认为最好的方法是为您的应用程序部分定义自定义组件并在其 constructor 中添加所需的组件，如下所示：

constructor: function () {
    var myComponentItems = [
    {
        xtype: 'button',
        text: 'My allowed button'
        }
    ];

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

    Ext.apply(this, {
        items: myComponentItems
    });

    this.callParent(arguments);
}

Working fiddle

Answer 2

使用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

ExtJS 有条件地呈现输入字段

ExtJS conditionally render input fields

javascript

filtering

extjs