Question

我需要在日期选择器扩展时显示一些额外的文本，而不是我的应用程序中的每个日期选择器。

我重写Ext.picker.Date组件并修改renderTpl属性以添加额外的html。之后，我试图将新的html包装在if条件中，这样只有在创建组件时设置了布尔属性时才可见

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

showExtra: false,

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

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

});

因此，默认情况下showExtra为false，然后我的想法是在页面上使用日期选择器时将其指定为true。

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

即使我在renderTpl属性上方的值中指定showExtra为true，也永远不会满足条件。如何传递值以满足条件？

Answer 1

使用renderData为您的tpl设置自定义属性

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

或者更简洁的方法是在您的重写代码中执行此操作。看看Ext.picker.Date中的原始beforeRender（）。像“showToday”这样的属性会移动到renderData那里：

...

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

....

在您的覆盖文件中，您可以执行以下操作：

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

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

在这种情况下，您无需在renderData中设置属性。只需写下：

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

renderTpl中的自定义属性

1 个答案: