帶小按鈕的ExtJs TextField

Question

如何用textfield創建帶有圖標的小按鈕，就像使用datefield一樣？在以前版本的ExtJS的有一個CompositeField但不能找到它在ExtJS的4

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

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