Benutzerdefinierte Eigenschaft in renderTpl

Question

Ich muss einige zusätzliche Text unter einer Datumsauswahl zeigen, wenn es erweitert wird, aber nicht für jede Datumsauswahl in meiner Anwendung.

Ich überschreibe die Ext.picker.Date-Komponente und die RenderTpl -Eigenschaft zu ändern, um in den zusätzlichen HTML hinzuzufügen. Danach versuche ich, den neuen HTML-Code in einer if Bedingung zu wickeln, so dass es nur sichtbar ist, wenn eine boolean-Eigenschaft festgelegt wird, wenn die Komponente

Ext.define('overrides.picker.Date', { 
override: 'Ext.picker.Date', 

showExtra: false, 

renderTpl: [ 
    '....existing html for picker here...', 

    '<tpl if="showExtra">', 
     'extra picker text', 
    '</tpl>', 
] 

}); 

So Erstellen von Standard-showExtra falsch ist und dann war meine Idee, dies zu spezifizieren um wahr zu sein, wenn Sie die Datumsauswahl auf einer Seite verwenden.

items: [{ 
     xtype: 'datefield', 
     value: this.effectiveDate, 
     showToday: false, 
     showExtra: true 
     }, 

Die Bedingung ist nie eingehalten werden, auch wenn ich showExtra geben Sie true über dem renderTpl Eigenschaft im Wert. Wie kann ich den Wert übergeben, damit die Bedingung erfüllt wird?

Answer 1

Verwenden renderData benutzerdefinierte Eigenschaften für Ihre tpl

items: [{ 
    xtype: 'datefield', 
    value: this.effectiveDate, 
    showToday: false, 
    renderData: { 
     showExtra: true 
    } 
}, 

Oder eine sauberere Möglichkeit zu setzen wäre, dass in Ihrem überschriebenen Code zu tun. Sehen Sie sich das Original beforeRender() in Ext.picker.Date an. Einige Eigenschaften wie „showtoday“ sind render dort bewegt:

... 

Ext.apply(me.renderData, { 
    dayNames: me.dayNames, 
    showToday: me.showToday, 
    prevText: me.prevText, 
    nextText: me.nextText, 
    days: days 
}); 

.... 

In der Überschreibung Datei, die Sie etwas tun könnte, wie:

beforeRender: function() { 
    this.callParent(arguments); 

    Ext.apply(me.renderData, { 
     showExtra: this.showExtra 
    }); 
} 

In diesem Fall, dass Sie nicht Ihre porperty innerhalb der festlegen müssen renderDaten. Schreiben Sie einfach:

items: [{ 
    xtype: 'datefield', 
    value: this.effectiveDate, 
    showToday: false, 
    showExtra: true 
},