Store not loaded in sencha touch - extjs

Question

I am usning below code to store the data from the ajax request but it is not lading data on the store so Please let me know what I am doing wrong.
Here is my store class:
Ext.define("Por.store.Notes", {
extend: "Ext.data.Store",
config: {
storeId: 'Notes',
model: "Por.model.Note",
}
});
This is my model class:
Ext.define("Por.model.Note", {
extend: "Ext.data.Model",
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'string' },
{ name: 'content_name', type: 'string' },
{ name: 'kind', type: 'string' },
{ name: 'company_name', type: 'string' },
{ name: 'note', type: 'string' },
{ name: 'attext', type: 'string' },
{ name: 'cid', type: 'string' },
{ name: 'category', type: 'string' },
{ name: 'file_extension', type: 'string' },
{ name: 'mime_image', type: 'string' },
{ name: 'ciid', type: 'string' },
{ name: 'citem_name', type: 'string' },
{ name: 'attach', type: 'string' },
{ name: 'cryptic', type: 'string' },
{ name: 'url', type: 'string' },
{ name: 'is_socialsites_share_ok', type: 'string' },
{ name: 'skey', type: 'string' },
{ name: 'lookup_id', type: 'string' },
{ name: 'lookup_kind_name', type: 'string' },
{ name: 'rid', type: 'string' },
{ name: 'content', type: 'string' },
{ name: 'clip_wm', type: 'string' },
{ name: 'vid_wm', type: 'string' },
{ name: 'flash_clip', type: 'string' },
{ name: 'module_num', type: 'string' },
{ name: 'itemtype', type: 'string' }
],
}
});
This is ajax request which I am firing :
Ext.Ajax.request({
url: url,
scope: this,
callback: callbackFn
success: function(response) {
var responseData = Ext.JSON.decode(response.responseText);
var store = Ext.getStore('Notes');
store.setData(responseData);
store.sync();
},
failure:function(response){
alert(response.status);
}
});
This is my view:
Ext.define("Por.view.NotesListContainer", {
extend: "Ext.Container",
alias: "widget.noteslistcontainer",
initialize: function () {
this.callParent(arguments);
var notesTitle = {
xtype: 'panel',
html:'<div style = " text-align:center; padding-top:10px;" >First Data</div>'
};
var notesData = {
xtype: 'panel',
html:'<div style = " padding-left:15px;">Personalized Content for ARP</div>'
};
This is my list view:
var notesList = {
xtype: "noteslist",
store: Ext.getStore("Notes"),
listeners: {
itemtap: { fn: this.onNotesListDisclose, scope: this }
}
};
this.add([notesTitle,notesData, notesList]);
},
onNewButtonTap: function () {
console.log("newNoteCommand");
this.fireEvent("newNoteCommand", this);
},
onNotesListDisclose: function(dv, index, item, record) {
console.log("editNoteCommand");
this.fireEvent('editNoteCommand', this, record);
},
config: {
layout: {
type: 'vbox'
}
}
});
Ext.define("Por.view.NotesList", {
extend: "Ext.dataview.List",
alias: "widget.noteslist",
config: {
loadingText: "Loading Notes...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
onItemTap: true,
itemTpl:'<div ><div style="font-size:14px;color: #5090D0;font-weight:bold;">{content_name}</div><div style =
"clear:both;"></div></div><div><p style="font-size:12px;"> <span style="font-weight:bold;font-size:14px;"><b>Type: </b></span> {company_name}
</p></div><div><p style="font-size:12px;"><span style="font-weight:bold;font-size:14px;border:1px solid red;">Account: </span>
{lookup_kind_name} </p></div></div>'
}
});
Here is the json data:
{
"data": [{
"id": "56636",
"content_name": "Ray Zor interview",
"kind": "0",
"company_name": "The Gillette Company",
"note": "<b>Business Problem<\/b> d\r\n* Inadequate collaboration infrastructure\r\n* 100% year over year growth\r\n* Lost sales due to service issues \r\n\r\n<b>Solution<\/b>\r\n* Apollo suite v7 with Oracle add-in\r\n* AppAccelerator for SQL\r\n* Solution Consulting engagement\r\n\r\n<b>Results<\/b>\r\n* 30% in time to market process\r\n* 25% improvement in customer sat scores\r\n* Better utilization of existing IT staff",
"attext": null,
"cid": null,
"category": "Listen",
"file_extension": "rref",
"mime_image": null,
"ciid": null,
"citem_name": null,
"attach": null,
"cryptic": "48737f98c5172",
"url": null,
"is_socialsites_share_ok": null,
"skey": null,
"lookup_id": "-1",
"lookup_kind_name": "Recorded Audio Reference",
"rid": "56636",
"content": "a wma is loaded to this topic",
"clip_wm": "48738147342c1.wma",
"vid_wm": "",
"flash_clip": "",
"module_num": 0,
"itemtype": "listen"
}]
}

Answer 1

Either put autoLoad: true in the store
OR
store.load({
callback: function(records, operation, success) {
// the operation object contains all of the details of the load operation
console.log(records);
},
scope: this
});

Answer 2

You have not defined proxy and reader for Por.store.Notes. Define these configurations like -
Ext.define("Por.store.Notes", {
extend: "Ext.data.Store",
config: {
storeId: 'Notes',
model: "Por.model.Note",
proxy: {
type: "ajax",
url : url,
reader: {
type: "json",
rootProperty: "data"
}
}
}
});