छोटे बटन के साथ ExtJs TextField

Question

टेक्स्टफील्ड के अंदर आइकन के साथ छोटे बटन को कैसे बनाएं, जैसे डेटफील्ड के साथ? ExtJS के पिछले संस्करण में एक CompositeField वहाँ था, लेकिन नहीं कर सकते ExtJS में मिल 4.

Answer 1

बस का विस्तार http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger आप सीएसएस के साथ ट्रिगर क्षेत्र के आइकन बदल सकते हैं और 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() फ़ंक्शन को ओवरराइड करने का प्रयास कर सकते हैं।

उदाहरण के लिए:

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

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