XTemplate for Combobox throw error when enter less than 2 characters

[earist]

Hi all,
I am using ExtJs4.1 for creating search on combobox with my custom tpl:

Follow is example data:

{
"totalitems": 10,
"result": [ // <<--- root
{
"total": 3,
"result": [
{
"id": "8646b2d3-6799-4aa8-a112-8e1ebe1855b7",
"name": "projectA",
"type": "project"
},
{
"id": "faf757e5-e30d-49dd-b393-bcaf9acbfb97",
"name": "projectB",
"type": "project"
},
{
"id": "dd4ba019-98c8-43fe-b17a-1c587c075a5e",
"name": "projectC",
"type": "project"
}
],
"type": "project"
},
{
"total": 3,
"result": [
{
"id": "user1234",
"name": "userA",
"type": "user"
},
{
"id": "user5678",
"name": "userB",
"type": "user"
},
{
"id": "user9112",
"name": "userC",
"type": "user"
}
],
"type": "user"
},
{
"total": 4,
"result": [
{
"id": "d1234",
"name": "Department1",
"type": "department"
},
{
"id": "d6789",
"name": "Department2",
"type": "department"
},
{
"id": "d1123",
"name": "Department3",
"type": "department"
},
{
"id": "d4567",
"name": "Department4",
"type": "department"
}
],
"type": "department"
}
]
}


Follow is my tpl code: (top result is root)


tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="total &gt; 0">',
'<div class="group-header">',
'{[this.renderHeader(values.type)]}',
'</div>',
'<tpl for="result">',
'<div class="x-boundlist-item">',
'{[this.renderItem(values)]}',
'</div>',
'</tpl>',
'</tpl>',
'</tpl>',
{
compiled: true,
renderHeader: function(type){
return 'header';
},
renderItem: function(values){
return values.name;
}
}
)

When I enter one character in combobox, search function will perform and then throw error:
"Uncaught TypeError: Cannot read property 'internalId' of undefined"

However, if I enter more than 2 characters, it work normally. Or if I remove x-boundlist-item from div tag, it work normally too. But I cannot select any item.

Moreover, following code work fine even if I enter only one character <but it is not my expected output>:


tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="total &gt; 0">',
'<div class="group-header">',
'{[this.renderHeader(values.type)]}',
'</div>',
'<div class="x-boundlist-item">', //<<-- move x-boundlist-item to new position
'test',
'</div>',
'<tpl for="result">',
'{[this.renderItem(values)]}',
'</tpl>',
'</tpl>',
'</tpl>',
{
compiled: true,
renderHeader: function(type){
return 'header';
},
renderItem: function(values){
return values.name;
}
}
)


How can I fix this problem?

Thanks in advance.
earist

[slemmon]

Hi,

The combo's underlying boundlist (the abstractview actually) attempts to reconcile view nodes (using the itemselector which for boundlists is x-boundlist-item) with the store records on all add/update/delete actions. With your xtemplate setup you're creating more nodes than you have store items and the underlying view's reconciliation effort is choking.

You'll need to modify your data returned and/or tpl such that each node (with x-boundlist-item) corresponds to a record read into the store.