Extjs DataView not refreshing - always getting emptyText value - extjs

Question

I have a backend, which returns a JSON, I load that into a store, it loads fine, then call a refresh on the view from the controller, and I always get the emptyText value of the view, template is not refeshing.
EDIT: It is working now! The below setup if functioning, the problem was how I used to lookup the view.
Controller:
showNotes: function(activityId) {
var me = this;
Ext.Ajax.request({
url: MyApp.Config.BASE_URL + '/someURL',
method: 'GET',
success: me.successGetNotes.bind(me),
failure: me.failureGetNotes
});
},
successGetNotes: function(result) {
var notesStore = this.getNotesStore(), //This gets me the store ok
publishersStore = this.getPublishersStore(),
data = Ext.JSON.decode(result.responseText);
notesStore.loadRawData(data.result.notes);
publishersStore.loadRawData(data.result.publishers);
this.getNotesPanel().refresh(); //this calls the refresh on the DataView ok
//TODO
},
Model:
Ext.define('MyApp.model.Note', {
extend: 'Ext.data.Model',
fields: [
'publisherId',
'text' ,
{
name: 'created',
type: 'date',
dateFormat: 'c'
}
]
});
Store:
Ext.define('MyApp.store.Notes', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Note',
alias: 'store.Notes',
storeId: 'Notes'
});
main view:
...
items: [
{
xtype: 'notes-panel',
//store: Ext.data.StoreManager.lookup('Notes'), NO!!!
store: 'Notes', //YES!
flex: 1
}
]
...
notes-panel:
Ext.define('MyApp.view.sections.notes.NotesPanel' ,{
extend: 'Ext.DataView',
alias: 'widget.notes-panel',
//deferInitialRefresh: false,
itemSelector: 'div.something',
tpl: new Ext.XTemplate(
// '<tpl for=".">',
// '<div class="something">',
// '<p>ID:{publisherId}</p>',
// '<p>{text}</p>',
// '<p>{created}</p>',
// '</div>'
// '</tpl>',
'<table width="100%" border="0">',
'<tpl for=".">',
'<div class = "something">',
'<tr><td width="85">ID:</td><td width="315">{publisherId}</td></tr>',
'<tr><td>Note:</td><td>{text}</td></tr>',
'</div>',
'</tpl>',
'<table>'
),
emptyText: 'No data available'
})
;
Example response:
{
"success": true,
"result": {
"publishers": [
{
"id": "009999",
"type": "xy",
"isReceipient": false,
"description": "xy"
},
{
"id": 45,
"type": "xy",
"isReceipient": true,
"description": "xy"
},
{
"id": 45,
"type": "xy",
"isReceipient": false,
"description": ""
}
],
"notes": [
{
"publisherId": "009999",
"text": "xy",
"created": "2014-02-23T18:24:06.074Z"
},
{
"publisherId": "45",
"text": "xy",
"created": "2014-02-23T18:24:06.074Z"
},
{
"publisherId": 45,
"text": "xy",
"created": "2014-02-23T18:24:06.074Z"
}
]
}
}
And another thing: I would also like to use publisherId in notes to print the publisher name and type, so I will need two store's data. I was thinking of loading the other store by lookup in the DataView, and getting the publisher that way. Is that feasible?

Answer 1

from Ext.DataView.itemSelector:
A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes this DataView will be working with. The itemSelector is used to map DOM nodes to records. As such, there should only be one root level element that matches the selector for each record.
and like you can the in the example from DataView:
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
the class is under the tpl element, so I think in your example you need to create a div under the tpl node.