ExtJs TextField với nút nhỏ

Question

Làm thế nào để tạo nút nhỏ có biểu tượng bên trong textfield, như với datefield? Trong phiên bản trước của ExtJS có một CompositeField nhưng không thể tìm thấy nó trong ExtJS 4.

Answer 1

Chỉ cần mở rộng http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger Bạn có thể thay đổi biểu tượng của trường kích hoạt với CSS và thực hiện hành vi của nhấp vào biểu tượng trong onTriggerClick mẫu phương pháp

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

Biểu tượng có thể nhấp không? Nếu vậy, bạn đang tìm kiếm Ext.form.field.Trigger. Nếu không, bạn có thể thử ghi đè hàm getSubTplMarkup() của trường Văn bản để cung cấp một số dom tùy chỉnh.

Ví dụ:

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

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