renderTpl 中的自定义属性

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 为真。我怎样才能传递值以满足条件？

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 中的自定义属性

Custom property in renderTpl

extjs

extjs5

renderTpl 中的自定义 属性

Custom property in renderTpl

extjs

extjs5

renderTpl 中的自定义属性