i have a .js file where i show a list of pools. And when i select a row i store the poolid of the selected row in a variable(this works fine).
And after you have selected a row an other view opens where you can see the guests which belongs to the pool. BUT to show this i need to use the poolid variable from the other view in this view. But how?
//The view where i select a pool
Dashboard = new Ext.Application({
name:'Dashboard',
launch: function(){
var poolId;
var thePanel = "allPool"
//------------------------------------List with Pool info
var detailPanel = new Ext.Panel({
id:'detailPanel',
layout:'fit',
items: [{
fullscreen:true,
xtype: 'list',
store: new Ext.data.Store({
model: 'team',
getGroupString : function(record) {
return record.get('name')[0];
},
proxy: new Ext.data.AjaxProxy({
url: 'a.php/pool/listPools',
method:'post',
reader: {
type: 'json',
root: 'data',
totalCount: 'count'
}
})
,autoLoad:true
}),
sorters: [{
property: 'name',
direction: 'asc'
}],
itemTpl:'<font size="4" face="Helvetica, Arial" color="black">{name}</font>',
grouped: true,
onItemDisclosure : true,
listeners : {
itemtap : function(record,index,item,e){
if (e.getTarget('.x-list-disclosure')) {
thePanel = 'guestsofPool';
poolId = this.store.data.items[index];
Ext.Ajax.request({
url : 'a.php/guest/listGuests' ,
params : {
poolId: poolId
},
method: 'POST',
success: function (result, request) {
var redirect = "showpool.php";
window.location = redirect;
},
failure: function ( result, request) {
alert(result.responseText);
}
});
//TopPanel.dockedItems.items[0].setTitle('Guests');
//outer.setActiveItem(1, { type: 'slide', cover: false, direction: 'right'});
}
// else { Ext.Msg.alert("Item clicked!");}
}
}
}]
})
//The view where you should see all the guests of the selected POOLID
ListDemo = new Ext.Application({
name: "ListDemo",
launch: function() {
ListDemo.detailPanel = new Ext.Panel({
id: 'detailpanel',
dock: "top",
items: [{
fullscreen:true,
xtype: 'list',
store: new Ext.data.Store({
model: 'team',
getGroupString : function(record) {
return record.get('name')[0];
},
proxy: new Ext.data.AjaxProxy({
url: 'a.php/guest/listGuests',
extraParams: {
poolId: thepoolid which was selected in the other view
},
method:'post',
reader: {
type: 'json',
root: 'data',
totalCount: 'count'
}
}),autoLoad:true
}),
sorters: [{
property: 'name',
direction: 'asc'
}],
itemTpl:'<font size="4" face="Helvetica, Arial" color="black">{name}</font>',
grouped: true,
onItemDisclosure : true,
listeners : {
itemtap : function(record,index,item,e){
if (e.getTarget('.x-list-disclosure')) {
//Ext.Msg.alert(index);
var redirect = 'showpool.php';
window.location = redirect;
}
// else { Ext.Msg.alert("Item clicked!");}
}
}
}]
});
I din't had patience to go through the complete code you posted. But what I'd suggest is have a variable in index.js file say var selectedPool_id; and in the itemTap set this id. and fetch the value wherever you need it.
NOTE: mak sure that the file index.js is added to your html file prior to the files that are selecting and usent he selectedPool_id.
This was a workaround. I welcome suggestions and improvements.
Related
I need to reassign extra param when load more even fire. But I dont have any idea
Here is my code
List.js
Ext.define('bluebutton.view.BlueButton.TestingList', {
extend: 'Ext.List',
xtype: 'testinglistcard',
requires: [
'Ext.field.Select',
'Ext.field.Search',
// 'bluebutton.view.BlueButton.MemberDetail',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
'Ext.dataview.Override'
],
config: {
styleHtmlContent: true,
scrollable: 'vertical',
indexBar: true,
singleSelect: true,
onItemDisclosure: true,
grouped: true,
variableHeights : false,
store : { xclass : 'bluebutton.store.BlueButton.Testing'},
itemHeight :100,
loadingText : 'loading',
id :'testinglist',
plugins: [
{ xclass: 'Ext.plugin.PullRefresh',
refreshFn: function() {
var transaction = Ext.ModelMgr.getModel('bluebutton.model.BlueButton.Testing');
var proxy = transaction.getProxy();
proxy.setExtraParam('refresh', 'true' );
Ext.getStore('testingstore').load();
},
},
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
loadNextPage: function() {
var transaction = Ext.ModelMgr.getModel('bluebutton.model.BlueButton.Testing');
var proxy = transaction.getProxy();
proxy.setExtraParam('refresh', );
Ext.getStore('testingstore').load();
}
},
],
masked: {
xtype: 'loadmask',
message: 'loading...'
}, // masked
emptyText: '<p class="no-search-results">No member record found matching that search</p>',
itemTpl: Ext.create(
'Ext.XTemplate',
'<div class="tweet-wrapper">',
'<table>',
'<tr>',
'<td>',
' <div class="tweet">',
' <h3>{invoiceId}</h3>',
' <h3>Name: {billNumber}</h3>',
' <h3>Point Avalaible : {invoiceDate} , Last Visited : {invoiceAmount}</h3>',
' </div>',
'</td>',
'</tr>',
'</table>',
'</div>'
),
},
});
Store.js
Ext.define('bluebutton.store.BlueButton.Testing', {
extend: "Ext.data.Store",
requires: ['bluebutton.model.BlueButton.Testing'],
config: {
grouper: {
groupFn: function (record) {
return record.get('invoiceId')[0];
}
},
model :'bluebutton.model.BlueButton.Testing',
storeId :'testingstore',
autoLoad: true,
pageSize: 5,
clearOnPageLoad: false,
}
});
Model.js
Ext.define('bluebutton.model.BlueButton.Testing', {
extend: 'Ext.data.Model',
config: {
idProperty: 'testingModel',
fields: [
{ name :'invoiceId'},
{ name: 'billNumber' },
{ name: 'invoiceDate' },
{ name: 'invoiceAmount' },
{ name :'downloadLink'},
{ name: 'refresh' },
],
proxy: {
type: 'rest',
url: 'http://192.168.251.108:8080/RESTFulExample/rest/json/metallica/invoicejsonPost',
reader: 'json',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
noCache: false, // get rid of the '_dc' url parameter
// extraParams: {
// userid: "test",
// // add as many as you need
// },
reader: {
type: 'json',
rootProperty: 'invoice'
},
writer: {
type: 'json',
},
}
}
});
I need to assign extra param "refresh" to true when i refresh the list. On the other hand, if the load more event fire i need to assign param refresh to false. Please give me solution. Thanks
I dont think you can do it the way you ask. But you can listen to the load event and change your refresh parameter there.
{
xtype: 'store',
//Your Code
listeners: {
load: function(store){
store.getProxy.setExtraParam('refresh', false);
}
}
}
Hope it helps
I am very new to sencha-touch & started to build simple Login form.
My UI is ready but now I am stuck on how to write code for login request response.
As important, how can I point to specific url to make POST/GET request?
Also how to get & parse the json data.?
I read the sench-touch documentation but I didnt understood, how to use that model, store, proxy.
Suggestions upon how to create model, store, proxy to make simple login are very helpful.
Thanks in advance.
Edited to insert image:
var loginForm = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Username'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
loginForm.add({
xtype: 'button',
text: 'Login',
ui: 'confirm',
badgeText: '1',
// handler: function(){
// // alert("handler invoked");
// },
listeners : {
tap : function() {
var form = Ext.getCmp('form-id');
var values = form.getValues();
Ext.Ajax.request({
url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
params: values,
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
}
}
});
loginForm.add({
xtype: 'toolbar',
// id:'loginPressed',
docked: 'bottom',
// layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
// action: 'login',
handler: function() {
loginForm.setValues({
name: 'vs',
password: 'vs'
})
}
},
{
xtype: 'button',
text: 'Clear',
ui:'decline',
handler: function() {
loginForm.reset();
}
},
{
xtype: 'button',
centered: true,
text: 'Sign Up',
handler: function() {
alert('New User?');
}
},
{
xtype: 'container',
html: 'New User? ',
style: {
color: 'yellow',
}
},
]
});
Exemplo usando ajax request:
Example using ajax request:
Ext.Ajax.request({
url: domain.com/auth/signIn/',
method: 'post',
scope: this,
params: {
email: username,
password: password
},
success: function (response) {
var result = Ext.JSON.decode(response.responseText);
if (result.meta.code==200)
{
/**
* Salvando dados do usuário em localStorage
* Save user data on localStorage
*/
window.localStorage.setItem('myID', result.response.id);
window.localStorage.setItem('email', result.response.email);
window.localStorage.setItem('token', result.response.token);
window.localStorage.setItem('fName', result.response.fName);
window.localStorage.setItem('lName', result.response.lName);
window.localStorage.setItem('photo', result.response.photo);
window.localStorage.setItem('gender', result.response.gender);
window.localStorage.setItem('relationship', result.response.relationship);
window.localStorage.setItem('interest', result.response.interest);
this.signInSuccess();
this.verifyDeviceToken(result.response.id, 'signin');
}
else
{
this.signInFailure('Error', 'The data reported are invalid');
}
},
failure: function (response) {
}
});
You are almost there!
add your code to the success callback.
Note, success() callback if fired if ajax returns ok, otherwise failure(). Callback callback() fire in both cases.
Ext.Ajax.request({
url: 'https://102.XXX.X.XX:XXXX/QuizMasterServer/rest/login',
params: values,
success: function(response){
var text = response.responseText;
// for example
var result = Ext.decode(text); // json parsing
if (result.ok) {
//create new widget
var homeView = Ext.widget('homePage', {...});
Ext.Viewport.remove(formLogin);
Ext.Viewport.add(homeView);
///... etc
homeView.show()
}
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
Disclaimer. Of course the code is not tested...
cheers, Oleg
I'm just learning sencha touch 2, MVC. I would to make a simple form that get a value, pass to a PHP file (for an API call to a web-service), move to a Nested List and show results.
But, my app doesn't show nothing after submit... Value is captured correctly (I see it in console log).
Please someone could me help?
Consider for testing that for now I don't pass value, and my API call calls directly with a hard-coded value. In future I'll work to pass form value...
Thank you in advance!
This is "app.js"
Ext.application({
name: 'Appre',
icon: 'resources/icons/icon.png',
phoneStartupScreen: 'resources/images/phone_startup.png',
//tabletStartupScreen: 'tablet_startup.png',
glossOnIcon: false,
//profiles: ['Phone', 'Tablet'],
views : ['Viewport','SearchCap','ElencoRistoranti'],
models: ['ElencoRistoranti'],
stores: ['RistorantiCap'],
controllers: ['SearchCap'],
viewport: {
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left',
duration: 300
}
}
},
launch: function() {
Ext.create('Appre.view.Viewport')
} // launch: function() {
}) // Ext.application
This is form "search cap"
Ext.define('Appre.view.SearchCap', {
extend: 'Ext.form.Panel',
xtype: 'appre-searchCap',
config: {
items: [{
xtype: 'fieldset',
layout: 'vbox',
items: [{
xtype: 'textfield',
name: 'cap',
placeHolder: 'Cap'
},
{
xtype: 'button',
text: 'Cerca',
action :'searchCap',
id:'btnSubmitLogin'
}] // items
}] // items
}, // config
initialize: function() {
this.callParent(arguments);
console.log('loginform:initialize');
}
});
This is controller
Ext.define('Appre.controller.SearchCap', {
extend : "Ext.app.Controller",
config : {
refs : {
btnSubmitLogin: 'button[action=searchCap]',
form : 'appre-searchCap'
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function() {
console.log("onSubmitLogin");
var values = this.getForm().getValues();
console.log(values);
var $this=this;
Ext.Ajax.request({
url: 'cerca-ristoranti-cap.php',
method: 'POST',
params: {
values: Ext.encode({form_fields: values})
},
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
//Ext.Msg.alert('Contact Complete!', obj.responseText);
$this.resetForm();
Ext.Viewport.add(Ext.create('Appre.view.ElencoRistoranti'));
Ext.Viewport.setActiveItem(Ext.create('Appre.view.ElencoRistoranti'));
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
},
resetForm: function() {
this.getForm().reset();
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
And this is Nested List
Ext.define('Appre.view.ElencoRistoranti', {
extend: 'Ext.Panel',
xtype: 'appre-elencoristoranti',
config: {
xtype: 'nestedlist',
title: 'Cap',
displayField: 'name',
store: {
type: 'tree',
fields: [
'id_restaurant', 'name',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'ajax',
url: 'cerca-ristoranti-cap.php',
reader: {
type: 'json',
rootProperty: 'restaurants'
} //reader
} // proxy
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(post.get('name'));
}
}
} // config
});
cerca-ristoranti-cap.php it's a simple function that returns an array like this:
{
"restaurants":[{
"id_restaurant":"40",
"name":"La Saliera",
"zip":"00128",
"lat":"41.7900229",
"lgt":"12.4513128"
}, {
"id_restaurant":"64",
"name":"Osteria del Borgo",
"zip":"00128",
"lat":"41.7887363",
"lgt":"12.5149867"
}]
}
Hi #sineverba sorry for response a little late, but here something this how you want show,
Viewport.js
Ext.define('myapp.view.Viewport' , {
extend : 'Ext.viewport.Default',
xtype : "viewport",
config: {
fullscreen: true,
styleHtmlContent: true,
style: 'background:#ffffff;',
layout : 'card',
autoDestroy : false,
cardSwitchAnimation : 'slide',
items: [
{
xtype: 'appre-searchCap'
},
],
}
})
app.js
Ext.Loader.setConfig({
enabled: true
})
Ext.application({
name: 'myapp',
requires: [
'myapp.view.SearchCap',
'myapp.view.ElencoRistoranti',
'myapp.view.SearchElenco',
],
controllers: ['SearchCap'],
models: ['myapp.model.SearchCapModel'],
launch: function() {
Ext.create('myapp.view.Viewport')
}
});
SearchCapModel.js
Ext.define('myapp.model.SearchCapModel', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id_restaurant',
fields: [
{ name: 'id_restaurant', type: 'string' },
{ name: 'name', type: 'string'},
{ name: 'zip', type: 'string' },
{ name: 'lat', type: 'string'},
{ name: 'lgt', type: 'string'}
],
}
})
SearchCapStore.js
Ext.define('myapp.store.SearchCapStore', {
extend: 'Ext.data.Store',
config: {
model: 'myapp.model.SearchCapModel',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'cerca-ristoranti-cap.json',
reader: {
type: 'json',
rootProperty: 'restaurants'
} //reader
},
}
});
SearchCap.js
Ext.define('myapp.controller.SearchCap', {
extend : "Ext.app.Controller",
views: ['SearchElenco'],
config : {
refs : {
elencoListContainer: 'elencolistcontainer',
btnSubmitLogin: 'button[action=searchCap]',
form : 'appre-searchCap',
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function() {
console.log("onSubmitLogin");
var values = this.getForm().getValues();
console.log(values);
Ext.Ajax.request({
url: 'cerca-ristoranti-cap.json',
method: 'POST',
params: {
values: Ext.encode({form_fields: values})
},
success: function(response, opts) {
var obj = response.responseText;
Ext.Msg.alert('Contact Complete!', obj);
Ext.Viewport.add(Ext.create('myapp.view.SearchElenco'));
Ext.Viewport.setActiveItem(1);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
},
resetForm: function() {
this.getForm().reset();
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
SearchElenco.js
Ext.define('myapp.view.SearchElenco', {
extend: 'Ext.Container',
xtype: 'elencolistcontainer',
requires: ['myapp.store.SearchCapStore'],
initialize: function() {
this.callParent(arguments);
var s = Ext.create('myapp.store.SearchCapStore')
var notesList = {
xtype: 'appre-elencoristoranti',
store: Ext.getStore(s).setAutoLoad(true),
listeners: {
disclose: {
fn: this.onNotesListDisclose,
scope: this
}
}
};
this.add([notesList])
},
onNotesListDisclose: function(list, record, target, index, event, options) {
console.log('editNoteCommand');
this.fireEvent('editNoteCommand', this, record);
},
config: {
layout: {
type: 'fit'
}
}
});
ElencoRistoranti.js
Ext.define('myapp.view.ElencoRistoranti', {
extend: 'Ext.dataview.List',
xtype: 'appre-elencoristoranti',
id: 'appreElenco',
config: {
emptyText: '<pre><div class="notes-list-empty-text">No list found.</div></pre>',
onItemDisclosure: false,
itemTpl: '<pre><div class="list-item-title">{id_restaurant}</div><div class="list-item-narrative">{name}</div></pre>',
}
});
SearchCap.js - View
Ext.define('myapp.view.SearchCap', {
extend: 'Ext.form.Panel',
xtype: 'appre-searchCap',
id: 'appreSearchCap',
config: {
layout: {
type: 'vbox',
},
items: [
{
xtype: 'fieldset',
title: 'Cap',
instructions: 'Enter Cap',
items: [
{
xtype: 'textfield',
name: 'cap',
placeHolder: 'Cap'
},
{
xtype: 'button',
text: 'Cerca',
ui: 'confirm',
action :'searchCap',
id:'btnSubmitLogin'
}
] // items
}
] // items
}, // config
initialize: function() {
this.callParent(arguments);
console.log('loginform:initialize');
}
});
I hope help you and if you have a dude please let me know. :)
My problem is... I have a list who is completed by a store and this store comes from a proxy (json). When i clik in a item of the list i need a detail information, and this detail information comes from anothe json.
For example:
ArtistList and ArtistDetail
When i click in an item of artistList i need a call to
http://localhost/json-detail/45
if i click in another item...
http://localhost/json-detail/50 etc...
My problem is that i can't send the parameter to the other view... or maybe the error is in my concept of lists... :S
This is my list view:
var listaArtistas = {
xtype: 'list',
title: 'Artistas',
height: 240,
store: {
autoLoad: true,
fields: ['node'],
proxy: {
type: 'ajax',
url: 'http://localhost/json-artistas',
reader: {
type: 'json',
rootProperty: 'nodes'
}
}
},
listeners: {
itemtap: function(lista,index,target,record,e,eOpts)
{
var artistDetail = new Ext.create('app.view.ArtistDetail');
artistDetail.setArtistID('45');
panelHomeNav.push(artistDetail);
}
},
itemTpl: tpl
};
This is my detail:
Ext.define('app.view.ArtistDetail',{
extend: 'Ext.Panel',
xtype: 'artistdetail',
style: "background-image:url('/resources/images/fondoartista.png');",
config:{
title: 'Artistas',
iconCls: 'star',
ArtistID: '',
items:
{
title: 'Artistas',
items: [artistDetailPanelContenedor]
}
}});
And need something like this
var listaEspectaculo = {
xtype: 'list',
title: 'Artistas',
store:
{
autoLoad: true,
fields: ['node'],
proxy: {
type: 'ajax',
url: 'http://localhost/json-artistasdetail/'+getArtistID, <<<<<<<<<<------ PROBLEM
reader: {
type: 'json',
rootProperty: 'nodes'
}
}
},
listeners: {
itemtap: function(lista,index,target,record,e,eOpts)
{
var eventDetail = new Ext.create('app.view.EventDetail');
panelHomeNav.push(eventDetail);
}
},
itemTpl: tplEspectaculo
};
THx for help !!!
Maybe this could help:
How to pass value from controller to data store in sencha touch
handler: function () {
Ext.dispatch({
controller: MyApp.controllers.controller,
action: 'myActionOnController',
id: e.get{'id'}
});
}
You can call ext.dispatch from your "itemtap", then in the controller you can call a new view with you parameters, remember use something like this:
myActionOnController: function (options) {
var city = options.id; //if you want to use your parameters
var newView = Ext.create('MyApp.view.viewOfSomething');
this.getMain().push(newView);
},
I've been trying for two days to add a list or NestedList to one of my tabs in Sencha Touch and I can't do it :( My tab code is:
Darsnameh.views.Coursecard = Ext.extend(Ext.Panel,{
title: "Courses",
iconCls: "bookmarks",
style:"background:red",
dockedItems:[{
xtype:'toolbar',
title:'Courses'
}]
})
Ext.reg('coursecard',Darsnameh.views.Coursecard);
and my list code is
Ext.regModel('Contact',{
fields:['firstName','lastName']
});
Darsnameh.CoursesStore = new Ext.data.Store({
model: 'Contact',
data:[
{firstName:'Domino', lastName:'Derval' },
{firstName:'Domino2', lastName:'Derval2' },
{firstName:'Domino3', lastName:'Derval3' },
{firstName:'Domino4', lastName:'Derval4' },
{firstName:'Domino5', lastName:'Derval5' },
{firstName:'Domino6', lastName:'Derval6' }
]
});
Darsnameh.coursesList = new Ext.List({
id:'courseslist',
store: Darsnameh.CoursesStore,
itemTpl:'<div class="contact">{firstName}</div>'
});
When I add anything like
items:[Darsnameh.coursesList]
the application page is blank and nothing is shown, what should I add to have the list, or nested list in a tab?
In accordance to my previous answer i've added how to create list panel... just have a look at this
NotesApp.views.noteEditor = new Ext.form.FormPanel({
id:'noteEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
} ,
],
dockedItems: [
NotesApp.views.noteEditorTopToolbar,
]
});
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
title: 'Edit Note',
items: [
{
text: 'Save',
ui: 'action',
handler: function () {
var noteEditor = NotesApp.views.noteEditor;
var currentNote = noteEditor.getRecord();
noteEditor.updateRecord(currentNote);
var errors = currentNote.validate();
if (!errors.isValid()) {
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore(); // where i've declared my store
if (notesStore.findRecord('id', currentNote.data.id) === null) {
notesStore.add(currentNote);
} else {
currentNote.setDirty();
}
notesStore.sync();
}
}
]
});
var NotesStore=new Ext.data.Store({
model: 'Note',
storeId:'noteid',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'notes-app-localstore'
},
});
NotesApp.views.notesList = new Ext.List({
id: 'notesList',
store: NotesStore,
itemTpl: '<div class="list-item-title">{title}</div>'+
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure:function(listrecord){
var selectedNote = listrecord;
NotesApp.views.noteEditor.load(selectedNote);
NotesApp.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
},
listeners: {
'render': function (thisComponent) {
thisComponent.getStore().load();
}
}
});