PDA

View Full Version : Combo Box with additional record property information displayed just below component



niemczyt
10 Dec 2014, 9:23 AM
Hi Everyone,
I'm looking for extension to the combo box which will display additional information (let's say property called 'language') from chosen record of Country type below the combobox, something like on attached image:
51252

I was trying to simply connect display field with combobox, but cannot make it very close together.

Help will be very appraciated

scottmartin
11 Dec 2014, 6:33 AM
Moved thread. Extensions and Plugins is for announcements.

niemczyt
11 Dec 2014, 9:55 AM
I have written component like below




Ext.define('APP.common.view.plugin.AdditionalPropertyDisplay', {
alias: ['plugin.additionalpropertydisplay'],
extend: 'Ext.AbstractPlugin',
displayProperties: null,
init: function (cmp) {
var me = this;
me.cmp = cmp;
cmp.on({
afterrender: {
scope: me,
single: true,
fn: me.afterCmpRender
}
});
},

afterCmpRender: function () {
var me = this, cmp = me.getCmp();

var messageWrapper = {
tag: 'div'
};

var messageEl = cmp.errorEl.insertSibling(messageWrapper, "after");
cmp.messageEl = messageEl;

Ext.Array.each(me.displayProperties, function (property) {
var propertyConfig = {
tag: 'div',
style: {
display: 'none'
}
};
var newElement = messageEl.insertSibling(propertyConfig, "after");
newElement.addCls(property.classes);

cmp.addListener('change', me.buildChangeListener(newElement, property.name));
});

},

buildChangeListener: function (element, property) {
return function (cmp, selection) {
var selected = !Ext.isEmpty(selection);
element.setDisplayed(selected);

var record = cmp.findRecordByValue(selection);
if (record) {
element.setHTML(record.get(property));
} else {
element.setHTML('');
}
};
},

destroy: function () {
var messageEl = this.getCmp().messageEl;
messageEl.removeAllListeners();
Ext.destroy(messageEl);
}
});


Usage:




{
xtype: 'combo',
fieldLabel: 'Country',
name: 'country',
store: countryStore,
displayField: 'name',
valueField: 'id',
typeAhead: true,
forceSelection: true,
plugins: [{
ptype: 'additionalpropertydisplay',
displayProperties: [
{
name: 'language',
classes: ['language-display-italic']
}
]
}]
}