ExtJSの条件付きでレンダリングした入力フィールド

Question

I私はSUPPORTEDフィールド例えばIS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE = falseのフラグを設定することができる場所の特性を持っています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 
      }] 
    }] 
}] 
}); 

私はアプリケーションを作成するに次のコードは、ファイルを持っています。テキスト入力よりも偽ならば、fieldLabel: 'Business'はレンダリングされません。隠された/無効なテキスト入力はありません。Business in html。

私は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