Code:
// Creates an EntityReference data type.
function entityReference(id, logicalName, name, imageUrl) {
this.id = id;
this.logicalName = logicalName;
this.name = name;
this.imageUrl = imageUrl;
}
// A Numeric field.
Ext.define('XS.EntityReferenceField', {
extend: 'Ext.form.field.Base',
alias: 'xs.entityreffield',
isFormField: true,
submitValue: true,
readOnly: false,
fieldSubTpl: [
'<div id="{id}" class="{fieldCls}"></div>',
{
compiled: true,
disableFormats: true
},
],
initComponent: function () {
this.callParent(arguments);
this.addEvents('lookupButtonClick');
},
afterRender: function () {
this.callParent();
var that = this;
Ext.create('Ext.panel.Panel', { // Just a wrapping panel.
border: 0,
layout: {
type: 'hbox',
columns: 2
},
items: [
that.inputText = Ext.create('Ext.form.field.Display', {
flex: '1',
//style: 'margin:-3 0 0 0;',
//fieldStyle: true ? 'background-color: #eee; background-image: none;' : null,
value: this.renderLookups(this.value)
}), {
xtype: 'button',
width: 16,
height: 22,
disabled: false,
iconCls: 'icon-lookup', // Defined in HTML Page: .icon-lookup { background-image: url(../Resources/lookup.png) !important; background-position: -3 0; }
margin: '3 0 2 -1',
hidden: this.readOnly,
listeners: {
click: function () {
var lookupResult = { data: [], clear: false };
that.fireEvent('lookupButtonClick', that, lookupResult);
if (lookupResult.data != null) {
var oldValue = that.value;
that.setValue(lookupResult.clear == true || lookupResult.data == null ? [] : lookupResult.data)
that.fireEvent('change', that, that.value, oldValue);
}
}
}
}/*, {
xtype: 'button',
width: 16,
height: 22,
disabled: false,
iconCls: 'icon-lookup-delete', // Defined in HTML Page: .icon-lookup-delete { background-image: url(../Resources/lookup-delete.png) !important; background-position: -3 0; }
margin: '0 0 2 1',
hidden: this.readOnly
}*/
]
}).render(this.inputEl);
},
// Overwriting setValue method.
setValue: function (value) {
if (this.inputText != null) {
this.inputText.setValue(this.renderLookups(value));
}
this.value = value;
},
renderLookups: function (entityRefs) {
var value = '';
for (var i = 0; i < entityRefs.length; i++) {
var image = '<img src="' + entityRefs[i].imageUrl + '" style="vertical-align:middle; margin:1 2 0 0" />';
var onClickEvent = 'onclick="globalDataManager.openEntityDetails(\'' + entityRefs[i].id + '\', \'' + entityRefs[i].logicalName + '\')"';
var text = '<span style="text-decoration: underline; color: #0000AA; cursor: pointer" ' + onClickEvent + '>' + entityRefs[i].name + '</span>';
value = value + image + text;
if (i < entityRefs.length - 1) {
value = value + ' ';
}
}
var borderHeight = 6;
var itemHeight = 16;
var height = this.linesCount * itemHeight + borderHeight;
return '<div class="x-form-field x-form-text " aria-invalid="false" style="overflow:auto; height: ' + height.toString() + ';width: 100%;' + (this.readOnly ? '; background-color: #eee; background-image: none;' : '') + '" type="text" size="1" readOnly="" autocomplete="off" unselectable="off" data-errorqtip="">' + value + '</div>';
}
});
But it has resizing issues when put into re sizable docking panel.