Sencha Touch detailed page view into items with buttons - extjs

Question

1.Could please anybody help me with this issue?
1.After clicking on data detail I need see something as bellow (NotesApp.view.NoteEditor):
1.button_1
1.html + {title} + html
1.button_2
1.html + {narrative} + html
app.js
Ext.application({
name: "NotesApp",
models: ["Note"],
stores: ["Notes"],
controllers: ["Notes"],
views: ["NotesList", "NoteEditor"],
launch: function () {
var notesListView = {
xtype: "noteslistview"
};
var noteEditorView = {
xtype: "noteeditorview"
};
Ext.Viewport.add([notesListView, noteEditorView]);
}
});
NotesApp.model.Note
Ext.define("NotesApp.model.Note", {
extend: "Ext.data.Model",
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'title', type: 'string' },
{ name: 'narrative', type: 'string' }
]
}
});
NotesApp.store.Notes
Ext.define("NotesApp.store.Notes", {
extend: "Ext.data.Store",
config: {
model: "NotesApp.model.Note",
data: [
{ title: "Ibuprofen STDATA 200", narrative: "LIEK"},
{ title: "Ibuprofen STDATA 450", narrative: "LIEK"},
{ title: "IbuprofANIN", narrative: "LATKA"}
]
}
});
NotesApp.controller.Notes
Ext.define("NotesApp.controller.Notes", {
extend: "Ext.app.Controller",
config: {
refs: {
notesListView: "noteslistview",
noteEditorView: "noteeditorview",
notesList: "#notesList"
},
control: {
notesListView: {
editNoteCommand: "onEditNoteCommand"
},
noteEditorView: {
backToHomeCommand: "onBackToHomeCommand"
}
}
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
activateNoteEditor: function (record) {
var noteEditorView = this.getNoteEditorView();
noteEditorView.setRecord(record);
Ext.Viewport.animateActiveItem(noteEditorView, this.slideLeftTransition);
},
activateNotesList: function () {
Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
},
onEditNoteCommand: function (list, record) {
this.activateNoteEditor(record);
},
launch: function () {
this.callParent(arguments);
var notesStore = Ext.getStore("Notes");
notesStore.load();
},
init: function () {
this.callParent(arguments);
}
});
NotesApp.view.NotesList
Ext.define("NotesApp.view.NotesList", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.noteslistview",
config: {
layout: {
type: 'fit'
},
items: [{
xtype: "toolbar",
title: "Liek",
docked: "top",
}, {
xtype: "list",
store: "Notes",
itemId:"notesList",
onItemDisclosure: true,
itemTpl: "<div>{title}</div><div>{narrative}</div>"
}],
listeners: [ {
delegate: "#notesList",
event: "disclose",
fn: "onNotesListDisclose"
}]
},
onNotesListDisclose: function (list, record, target, index, evt, options) {
console.log("editNoteCommand");
this.fireEvent('editNoteCommand', this, record);
}
});
NotesApp.view.NoteEditor
Ext.define("NotesApp.view.NoteEditor", {
extend: "Ext.Container",
requires:"Ext.dataview.List",
alias: "widget.noteeditorview",
initialize: function () {
this.callParent(arguments);
},
config: {
// this is working !!!
// tpl: [
// '<div><p>Info about: {title} </p></div>'
// ],
items: [
{
xtype: "button",
text: '<div style="text-align:left;">button 1<div>',
ui: "action",
id:"button_1"
},
{
xtype: 'list',
itemTpl: [
'<div>title: {title} </div>' // working not !!!
]
},
{
xtype: "button",
text: '<div style="text-align:left;">button 2<div>',
ui: "action",
id:"button_2"
},
{
xtype: 'list',
itemTpl: [
'<div>title: {narrative} </div>' // working not !!!
]
}
]
},
});

Answer 1

in your controller, you attach the onEditNoteCommand handler to the editNoteCommand. This is not a valid event (and is never triggered) of the Ext.dataview.List object as you can see in the Sencha documentation.
You have to attach the handler to an existing event, in this case to the itemtap one:
control: {
notesListView: {
itemtap: "onEditNoteCommand"
},
...

Answer 2

Problem
You created NotesApp.view.NoteEditor as list, within that list you have two separate list for title and narrative and But in controller you setting data only for NoteEditor list, not for two list within NoteEditor, so that two list will not show any data because they didn't get data.
Can do like this
In view
Give itemId for that two list.
{
xtype: 'list',
itemId : 'title',
itemTpl: [
'<div>title: {title} </div>' // working not !!!
]
},
{
xtype: "button",
text: '<div style="text-align:left;">button 2<div>',
ui: "action",
id:"button_2"
},
{
xtype: 'list',
itemId : 'narrative',
itemTpl: [
'<div>title: {narrative} </div>' // working not !!!
]
}
In controller
activateNoteEditor: function (record) {
var noteEditorView = this.getNoteEditorView();
noteEditorView.getComponent('title').setData(record.getData().title);
noteEditorView.getComponent('narrative').setData(record.getData().narrative);
Ext.Viewport.animateActiveItem(noteEditorView, this.slideLeftTransition);
},
What you trying to do ?
First of all NotesApp.view.NoteEditor is to edit note with two fields for title and narrative.
Why you have two list for title and narrative ?
What is the purpose of that list in edit screen ?