使用小按钮ExtJs TextField

时间:2012-07-16 21:05:37

标签: extjs extjs4

如何在文本字段中创建带图标的小按钮,就像日期字段一样?在之前版本的ExtJS中有一个复合字段,但无法在ExtJS 4中找到它。

2 个答案:

答案 0 :(得分:13)

只需展开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'
    }]
});

答案 1 :(得分:6)

图标是否可点击?如果是这样,您正在寻找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>';
    }
});