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。如果它错误而不是文本输入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

Answer 2

我认为最好的方法是为您的应用程序部件定义自定义组件，并在其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

ExtJS有条件地渲染输入字段

2 个答案: