带有小按钮的 ExtJs TextField答案

【问题标题】：ExtJs TextField with small button带有小按钮的 ExtJs TextField
【发布时间】：2012-07-16 21:05:36
【问题描述】：

如何在文本字段中创建带有图标的小按钮，例如日期字段？在 ExtJS 的早期版本中，有一个 CompositeField，但在 ExtJS 4 中找不到。

【问题讨论】：

【解决方案1】：

只要扩展http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger就可以用CSS改变触发字段的图标，在onTriggerClick模板方法中实现点击图标的行为

Ext.define('Ext.ux.CustomTrigger', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customtrigger',

    // override onTriggerClick
    onTriggerClick: function() {
        Ext.Msg.alert('Status', 'You clicked my trigger!');
    }
});

Ext.create('Ext.form.FormPanel', {
    title: 'Form with TriggerField',
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'customtrigger',
        fieldLabel: 'Sample Trigger',
        emptyText: 'click the trigger'
    }]
});

【讨论】：

谢谢！这正是我所需要的。

【解决方案2】：

图标可以点击吗？如果是这样，您正在寻找Ext.form.field.Trigger。如果没有，您可以尝试覆盖 Text 字段的 getSubTplMarkup() 函数以提供一些自定义 dom。

例如：

Ext.define('MyField', {
    extend: 'Ext.form.field.Text',

    getSubTplMarkup: function() {
        return this.callParent(arguments) + '<span class="my-icon"></span>';
    }
});

【讨论】：

是的，图标应该是可点击的。也谢谢你的回答。