ExtJs TextField с небольшой кнопкой

Как создать маленькую кнопку со значком внутри текстового поля, например, с полем даты? В предыдущей версии 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. Если нет, вы можете попробовать переопределить функцию getSubTplMarkup() текстового поля для предоставления некоторого пользовательского dom.

Например:

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

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