我正在尝试对从商店获得的结果进行分组,以显示在ComboBox内。
我有一个看起来像这样的组合框:
我需要它看起来像这样:
这意味着按类别(订单/发票)分组。
我的组合框定义如下:
Ext.define('NG.view.searchcombo.Combo', {
requires: ['Ext.form.field.ComboBox'],
extend: 'Ext.form.ComboBox',
alias: 'widget.searchcombo',
minChars:3,
fieldLabel: 'Choose Search',
store: 'Search',
displayField: 'name',
valueField: 'id',
typeAhead: false,
hideLabel: true,
hideTrigger:false,
anchor: '100%',
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
// Custom rendering template for each item
getInnerTpl: function() {
return '<h3>{name} / {category}</h3>' +'{excerpt}' ;
}
},
pageSize: 10,
initComponent: function () {
this.callParent(arguments);
}
});
和我的数据是这样的:
[{
"id": 1,
"name": "one",
"category": "invoice"
}, {
"id": 2,
"name": "two",
"category": "invoice"
}, {
"id": 3,
"name": "one",
"category": "order"
}, {
"id": 4,
"name": "two",
"category": "order"
}, {
"id": 5,
"name": "three",
"category": "invoice"
}, {
"id": 6,
"name": "four",
"category": "invoice"
}, {
"id": 7,
"name": "three",
"category": "order"
}, {
"id": 8,
"name": "four",
"category": "order"
}, {
"id": 9,
"name": "five",
"category": "invoice"
}, {
"id": 10,
"name": "six",
"category": "invoice"
}, {
"id": 11,
"name": "five",
"category": "order"
}, {
"id": 12,
"name": "six",
"category": "order"
}, {
"id": 13,
"name": "seven",
"category": "invoice"
}, {
"id": 14,
"name": "eight",
"category": "invoice"
}, {
"id": 15,
"name": "seven",
"category": "order"
}, {
"id": 16,
"name": "eight",
"category": "order"
}]
我认为可以通过使用
Ext.XTemplate
来完成,但是我对Ext.XTemplate
并不熟悉。 最佳答案
请,您可以使用网格来渲染组合框内容来完成此操作。请参阅此帖子:http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList
在这篇文章之后,我能够创建它: