Extjs Sencha使用按钮将详细页面视图按入项目

1.有人能帮我解决这个问题吗？ 1.单击数据详细信息后，我需要看到以下内容（NotesApp.view.noteditor）：

1.按钮1 1.html+{title}+html 1.按钮2 1.html+{叙述}+html

Ext.define（“NotesApp.view.NotesList”{
扩展：“Ext.Container”，
要求：“Ext.dataview.List”，
别名：“widget.noteslistview”，
配置：{
布局：{
类型：“适合”
},
项目：[{
xtype:“工具栏”，
标题：“列克”，
停靠：“顶部”，
}, {
xtype:“列表”，
商店：“备注”，
itemId:“notesList”，
对，是的，
itemTpl:“{标题}{叙述}”
}],
听众：[{
代表：“#备注列表”，
事件：“披露”，
fn：“OnNotesListExpose”
}]
}, 
OnNotesListExpose：函数（列表、记录、目标、索引、evt、选项）{
log（“editNoteCommand”）；
this.firevent（'editNoteCommand'，this，record）；
}
});
NotesApp.view.NoteEditor
Ext.define（“NotesApp.view.noteditor”{
扩展：“Ext.Container”，
要求：“Ext.dataview.List”，
别名：“widget.noteeditorview”，
初始化：函数（）{
this.callParent（参数）；
},
配置：{
//这是工作！！！
//第三方物流：[
//“关于：{title}
的信息”
// ],
项目：[
{
xtype:“按钮”，
文本：“按钮1”，
用户界面：“行动”，
id:“按钮1”
},
{
xtype:'列表'，
第三方物流：[
'title:{title}'//不工作！！！
]
},
{
xtype:“按钮”，
文本：“按钮2”，
用户界面：“行动”，
id:“按钮2”
},
{
xtype:'列表'，
第三方物流：[
'标题：{叙述}'//不工作！！！
]           
}
]
},
});

在控制器中，将

oneditnotecondromd

处理程序连接到

editnotecondromd

。这不是您在Sencha中看到的

Ext.dataview.List

对象的有效事件（并且从未触发）

您必须将处理程序附加到现有事件，在本例中，附加到

itemtap

one：

control: {
        notesListView: {
            itemtap: "onEditNoteCommand"
        },
        ...

---

问题

您创建了

NotesApp.view.NoteEditor

作为列表，在该列表中，您有两个单独的标题和叙述列表，但在控制器中，您仅为NoteEditor列表设置数据，而不是为NoteEditor中的两个列表设置数据，这样两个列表将不会显示任何数据，因为它们没有获取数据

可以这样做

鉴于

为这两个列表提供itemId

        {
            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 !!!
            ]           
        }

你想做什么？

首先，

NotesApp.view.NoteEditor

用于编辑注释，其中包含两个标题和叙述字段

为什么你有两个标题和叙述清单

---

编辑屏幕中该列表的用途是什么？

“+1对不起，这不是我需要的。”

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 !!!
                ]           
            }
        ]
    },

});

control: {
        notesListView: {
            itemtap: "onEditNoteCommand"
        },
        ...

        {
            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 !!!
            ]           
        }

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);
},