Я открыл проект ExtJs, в котором некоторое время не занимался, и это сбивает меня с толку.
У меня есть Ext.form.ComboBox, который использует удаленное хранилище JSON для составления списка пользователей. Я использую XTemplate для форматирования пользователей, как указано в раскрывающемся списке:
'<tpl for="."><div class="x-combo-list-item">',
'{firstname} {lastname} ({email})',
'</div></tpl>'
Когда я раскрываю раскрывающийся список, я вижу, что мои пользователи перечислены правильно:
Джон Смит (jsmith@company.com)
Джон Форд (jford@company.com)
Однако, когда я нажимаю на пользователя, содержимое поля со списком меняется на свойство valueField ('firstname'), которое вы ожидаете.
Вопросы:
Вместо того, чтобы показывать Джона, я бы хотел, чтобы в поле со списком было показано: Джон Смит (jsmith@company.com).
Когда у меня есть два Джона (Джон Смит и Джон Форд) и форма загружается, логика ExtJs совпадает с первым Джоном, которого он находит в списке, и изменяет значение поля на первого Джона, с которым он сравнивает .
Например:
Джон Смит (ID = 1)
Джон Форд (ID = 2)
Пользователь выбирает Джона Форда, и после выбора пункта меню со списком в поле со списком появляется «Джон», а в базу данных записывается user_id = 2.
Однако, когда я перезагружаю страницу, имя «Джон» сопоставляется (загружается из базы данных) с первой записью в списке, и если оператор не меняет выбор вручную в раскрывающемся диалоговом окне, выбирается Джон Смит и user_id = 1 теперь записывается в базу данных (когда пользователь сохраняет форму).
Любой вклад будет высоко ценится. Мой инстинкт говорит мне, что при загрузке и щелчке по списку сообщений должна быть пара хуков, которые позволят мне манипулировать тем, что записано в элемент innerHTML элемента.
~~~~~~~~~~~~~
Примечание. Я унаследовал от пользовательского класса, который позволяет мне вводить предварительный запрос по имени, имени, фамилии и адресу электронной почты (так как у нас могут быть сотни пользователей для поиска).
Элемент ComboBox, от которого я наследую:
CW.form.CustomComboBox = Ext.extend( Ext.form.ComboBox, {
filterKeys:[],
// Note: This overrides the standard doQuery function in Ext 3.3
doQuery: function(q, forceAll){
q = Ext.isEmpty(q) ? '' : q;
var qe = {
query: q,
forceAll: forceAll,
combo: this,
cancel:false
};
if(this.fireEvent('beforequery', qe)===false || qe.cancel){
return false;
}
q = qe.query;
forceAll = qe.forceAll;
if(forceAll === true || (q.length >= this.minChars)){
if(this.lastQuery !== q){
this.lastQuery = q;
if(this.mode == 'local'){
this.selectedIndex = -1;
if(forceAll){
this.store.clearFilter();
}else{
// this.store.filter(this.displayField, q);
this.store.filterBy( function(rec,id){
return this.filterFn(rec,id,q);
}, this );
}
this.onLoad();
}else{
this.store.baseParams[this.queryParam] = q;
this.store.load({
params: this.getParams(q)
});
this.expand();
}
}else{
this.selectedIndex = -1;
this.onLoad();
}
}
},
/**
* Custom function for filtering the store
*/
filterFn: function(rec, id, q ){
// var filterKeys = ['id', 'firstname', 'lastname', 'email'];
var parts = q.split(' ');
// If no filter applied then show no results
if(parts.length == 0){
return false;
}
// Iterate through each of the parts of the user string
// They must all match, at least in part, one of the filterKeys
// (i.e. id, email, firstname, etc.)
for(i=0; i<parts.length;i++){
var foundPart = false;
// Create a RegExp object for this search snippet (i.e. '@gmai')
var matcher = this.store.data.createValueMatcher(parts[i] , true);
// Search until this matches one of the keys for this record
for(j=0;j<this.filterKeys.length; j++){
if(matcher.test(rec.get(this.filterKeys[j]))){
foundPart = true;
break;
}
}
// If there are no fields of the record matching this part,
// the record does not match (return false)
if( foundPart == false ){
return false;
}
}
return true;
},
initComponent: function(){
Ext.applyIf(this,{
listeners:{
beforequery: function(qe){
delete qe.combo.lastQuery;
return true;
}
}
});
if(this.filterKeys.length == 0){
this.filterKeys = [this.displayField];
}
CW.form.CustomComboBox.superclass.initComponent.call(this);
}
});
Ext.reg('custom-combo', CW.form.CustomComboBox);