[Common] ComboBox: use itemsTemplate for custom dropdown menu.

This commit is contained in:
Julia Radzhabova 2017-01-12 17:09:15 +03:00
parent 1dc090deb3
commit 54c8d379ac

View file

@ -112,6 +112,7 @@ define([
this.menuCls = me.options.menuCls; this.menuCls = me.options.menuCls;
this.menuStyle = me.options.menuStyle; this.menuStyle = me.options.menuStyle;
this.template = me.options.template || me.template; this.template = me.options.template || me.template;
this.itemsTemplate = me.options.itemsTemplate;
this.hint = me.options.hint; this.hint = me.options.hint;
this.editable = me.options.editable; this.editable = me.options.editable;
this.disabled = me.options.disabled; this.disabled = me.options.disabled;
@ -134,15 +135,22 @@ define([
var me = this; var me = this;
if (!me.rendered) { if (!me.rendered) {
var items = this.store.toJSON();
this.cmpEl = $(this.template({ this.cmpEl = $(this.template({
id : this.id, id : this.id,
cls : this.cls, cls : this.cls,
style : this.style, style : this.style,
menuCls : this.menuCls, menuCls : this.menuCls,
menuStyle : this.menuStyle, menuStyle : this.menuStyle,
items : this.store.toJSON(), items : items,
scope : me scope : me
})); }));
if (this.itemsTemplate)
this.cmpEl.find('ul').append(
$(this.itemsTemplate({
items : items,
scope : me
})));
if (parentEl) { if (parentEl) {
this.setElement(parentEl, false); this.setElement(parentEl, false);
@ -441,7 +449,7 @@ define([
return this.rendered ? this._input.val() : null; return this.rendered ? this._input.val() : null;
}, },
setValue: function(value) { setValue: function(value, defValue) {
if (!this.rendered) if (!this.rendered)
return; return;
@ -454,7 +462,7 @@ define([
this.setRawValue(this._selectedItem.get(this.displayField)); this.setRawValue(this._selectedItem.get(this.displayField));
$('#' + this._selectedItem.get('id'), $(this.el)).addClass('selected'); $('#' + this._selectedItem.get('id'), $(this.el)).addClass('selected');
} else { } else {
this.setRawValue(value); this.setRawValue((defValue!==undefined) ? defValue : value);
} }
}, },
@ -529,14 +537,21 @@ define([
}, },
onResetItems: function() { onResetItems: function() {
$(this.el).find('ul').html(_.template([ if (this.itemsTemplate) {
'<% _.each(items, function(item) { %>', $(this.el).find('ul').html( $(this.itemsTemplate({
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>', items: this.store.toJSON(),
'<% }); %>' scope: this
].join(''), { })));
items: this.store.toJSON(), } else {
scope: this $(this.el).find('ul').html(_.template([
})); '<% _.each(items, function(item) { %>',
'<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
'<% }); %>'
].join(''), {
items: this.store.toJSON(),
scope: this
}));
}
if (!_.isUndefined(this.scroller)) { if (!_.isUndefined(this.scroller)) {
this.scroller.destroy(); this.scroller.destroy();