extjs - Sencha Touch の詳細ページをボタンでアイテムに表示

Question

1.この問題について誰か助けてくれませんか? 1.データの詳細をクリックした後、以下のようなものが必要です (NotesApp.view.NoteEditor):

1.button_1 1.html + {タイトル} + html 1.button_2 1.html + {ナラティブ} + 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 !!!
                ]           
            }
        ]
    },

});