Javascript ExtJS 4.1.1:多选组合框的自定义显示文本
我有一个多选组合框,我需要按照特定的模式“Selections[x]”设置其显示值,其中x对应于所选项目的数量。不幸的是,在尝试了许多不同的方法之后,我找不到一种方法来达到预期的结果。对我来说,使用fieldSubTpl配置或覆盖valueToRaw()方法似乎是最有希望的方法。然而,我无法让他们中的任何一个工作 我找到了一个ExtJS6所需行为的工作示例。如果选择多个值,组合框将显示“x个选定值”,而不是简单地连接选定值 如何在ExtJS 4.1.1中实现相同的结果?您需要使用配置来实现 在这个中,我在extjs4.x中创建了与您在extjs6.x中提供的相同的示例。它工作得很好。希望这将指导您或帮助您实现所需的解决方案Javascript ExtJS 4.1.1:多选组合框的自定义显示文本,javascript,extjs,combobox,extjs4.1,multi-select,Javascript,Extjs,Combobox,Extjs4.1,Multi Select,我有一个多选组合框,我需要按照特定的模式“Selections[x]”设置其显示值,其中x对应于所选项目的数量。不幸的是,在尝试了许多不同的方法之后,我找不到一种方法来达到预期的结果。对我来说,使用fieldSubTpl配置或覆盖valueToRaw()方法似乎是最有希望的方法。然而,我无法让他们中的任何一个工作 我找到了一个ExtJS6所需行为的工作示例。如果选择多个值,组合框将显示“x个选定值”,而不是简单地连接选定值 如何在ExtJS 4.1.1中实现相同的结果?您需要使用配置来实现 在这
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Multiple Seletion Example in ExtJS 4.x for combo box',
items: [{
xtype: 'combo',
margin: 20,
fieldLabel: 'Character Name',
store: Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data: [{
id: 0,
name: 'John Snow'
}, {
id: 1,
name: 'Tyrion Lannister'
}, {
id: 2,
name: 'Morgan Dexter'
}, {
id: 3,
name: 'Lannister'
}, {
id: 4,
name: 'Silicon Vally'
}]
}),
displayField: 'name',
/*
If you use using this then initially you will see {0 values selected}
displayTpl: new Ext.XTemplate('{[values instanceof Array ? values.length === 1 ? values[0]["' + combo.displayField + '"] : values.length + " values selected" : values]}'),
*/
valueField: 'id',
queryMode: 'local',
multiSelect: true,
filterPickList: true,
listeners: {
render: function (combo) {
//Use propery {displayTpl}
//The template to be used to display selected records inside the text field. An array of the selected records' data will be passed to the template.
combo.displayTpl = new Ext.XTemplate('{[values instanceof Array ? values.length === 1 ? values[0]["' + combo.displayField + '"] : values.length + " values selected" : values]}');
/*
you can also use like below function
combo.displayTpl = new Ext.XTemplate('{[this.getDisplayField(values)]}', {
getDisplayField: function (values) {
if (Ext.isArray(values)) {
var len = values.length;
return len == 1 ? values[0].name : (len + ' values selected');
}
return values;
}
});*/
}
}
}]
});
您需要使用config进行配置
在这个中,我在extjs4.x中创建了与您在extjs6.x中提供的相同的示例。它工作得很好。希望这将指导您或帮助您实现所需的解决方案
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Multiple Seletion Example in ExtJS 4.x for combo box',
items: [{
xtype: 'combo',
margin: 20,
fieldLabel: 'Character Name',
store: Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data: [{
id: 0,
name: 'John Snow'
}, {
id: 1,
name: 'Tyrion Lannister'
}, {
id: 2,
name: 'Morgan Dexter'
}, {
id: 3,
name: 'Lannister'
}, {
id: 4,
name: 'Silicon Vally'
}]
}),
displayField: 'name',
/*
If you use using this then initially you will see {0 values selected}
displayTpl: new Ext.XTemplate('{[values instanceof Array ? values.length === 1 ? values[0]["' + combo.displayField + '"] : values.length + " values selected" : values]}'),
*/
valueField: 'id',
queryMode: 'local',
multiSelect: true,
filterPickList: true,
listeners: {
render: function (combo) {
//Use propery {displayTpl}
//The template to be used to display selected records inside the text field. An array of the selected records' data will be passed to the template.
combo.displayTpl = new Ext.XTemplate('{[values instanceof Array ? values.length === 1 ? values[0]["' + combo.displayField + '"] : values.length + " values selected" : values]}');
/*
you can also use like below function
combo.displayTpl = new Ext.XTemplate('{[this.getDisplayField(values)]}', {
getDisplayField: function (values) {
if (Ext.isArray(values)) {
var len = values.length;
return len == 1 ? values[0].name : (len + ' values selected');
}
return values;
}
});*/
}
}
}]
});
谢谢,现在它工作了!我过去也尝试过使用小提琴的例子,但无论出于什么原因,它在当时都不起作用。可能是你错过了什么。谢谢,现在它起作用了!我过去也尝试过使用小提琴的例子,但无论出于什么原因,它在当时都不起作用。可能是你错过了什么。