Hola a todos. Debo agregar Ext.form.field.Picker a mi componente personalizado, pero no sé si es posible.
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); } }, } } ] }); }})
Citando la documentación disponible aquí para el campo de selección : " Una clase abstracta para campos que tienen un solo activador que abre una ventana emergente de "selector" debajo del campo, por ejemplo, una lista de menú de cuadro combinado o un selector de fecha ".
Entonces, tal vez lo que está buscando es un cuadro combinado , un campo que amplíe/implemente el campo de selección. Puede personalizar en gran medida la plantilla de cada fila individual disponible para la selección con la configuración tpl para mostrar elementos html complejos sin reinventar la rueda.
Para darle un ejemplo de lo que puede hacer con la configuración de tpl, como mostrar una tabla html para cada registro disponible para la selección:
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>'),