Hi everyone I should add the Ext.form.field.Picker to my Custom Component but I can't figure out if it is possible.
createStructure: function () {
this.add({
xtype: 'container',
cls: 'logo-avatar-messages',
height: 50,
maxHeight: 50,
style: 'background-color: #ccc; border-radius: 50%; vertical-align: middle;',
width: 50,
layout: 'center',
flex: 1,
items: [
{
xtype: 'label',
style: 'font-size: 25px; IMPORTANT!; color: #ffffff;',
listeners: {
afterRender: function (component) {
var utente = userData.get('denominazione');
if (utente !== 'ND') {
var alias = utente.split(' ')[0][0] + utente.split(' ')[1][0];
component.setText(alias);
}
},
}
}
]
});
}
})
Quoting the documentation available here for the pickerfield: "An abstract class for fields that have a single trigger which opens a "picker" popup below the field, e.g. a combobox menu list or a date picker".
So maybe what you are looking for is a combobox, a field that extend/implement the pickerfield. You can heavy customize the template of each single row available for selection with the tpl config to show complex html elements without re-inventing the wheel.
To give you an example of what you can do with the tpl config, like showing an html table for each record available for selection:
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item" style="border-bottom:1px solid #f0f0f0;">',
'<table>',
'<tr>',
'<th width="100">ORDER ID: </th><td>{orderId}</td>',
'</tr>',
'<tr>',
'<th>ORDER TYPE: </th><td>{orderType}</td>',
'</tr>',
'<tr>',
'<th>DESCRIPTION: </th><td><i>{orderDescription}</i></td>',
'</tr>',
'<tr>',
'<th>DATE: </th><td>{orderDate:date("d/m/Y")}</td>',
'</tr>',
'</table>',
'</div>',
'</tpl>'),