ExtJS bedingt machen Eingabefelder

Question

Ich habe den folgenden Code in 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 
      }] 
    }] 
}] 
}); 

Ich möchte eine Anwendung erstellen, die Eigenschaften haben Datei, wo ich Flaggen für einrichten können SUPPORTED Felder z IS_BUSINESS_FIELD_SUPPORTED_IN_CURRENT_RELEASE = false. Wenn es falsch ist als Texteingabe fieldLabel: 'Business' wird überhaupt nicht gerendert werden - keine versteckte/deaktivierte Texteingabe Business in HTML.

Ich habe versucht rendered Eigenschaft - aber es funktioniert nicht, die einzige Lösung ist bisher items = Ext.Array.filter(items,filterFunction) in onRender zu verwenden;

Gibt es noch andere Lösungen, wie kann ich Rendering-Eingabeelemente einschränken?

Vielen Dank im Voraus.

Answer 1

Statt Konstruktor verwenden, um die initItems Methode :

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

Ich denke, dass beste Ansatz ist, kundenspezifische Komponenten für Ihre Anwendung Teile zu definieren und erforderlichen Komponenten innerhalb seiner constructor, wie folgt hinzu:

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