ExtJs TextField z małym przyciskiem

Question

Jak utworzyć mały przycisk z ikoną wewnątrz pola tekstowego, np. Z datą? W poprzedniej wersji ExtJS było CompositeField ale nie mogę go znaleźć w ExtJS 4.

Answer 1

Wystarczy przedłużyć http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger Można zmienić ikonę pola wyzwalania z CSS i wdrożenie zachowanie klikając ikonę w metodzie onTriggerClick szablonu

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' 
    }] 
}); 

Answer 2

Czy ikona jest klikalna? Jeśli tak, to szukasz Ext.form.field.Trigger. Jeśli nie, możesz spróbować przesłonić funkcję getSubTplMarkup() pola tekstowego, aby zapewnić niestandardowy dom.

Na przykład:

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

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