Question

1.请问有人帮我解决这个问题吗？ 1.点击数据详细信息后，我需要看到下面的内容（NotesApp.view.NoteEditor）：

1.button_1 1.html + {title} + 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 !!!
                ]           
            }
        ]
    },

});

Answer 1

在控制器中，您将onEditNoteCommand处理程序附加到editNoteCommand。这不是Ext.dataview.List对象的有效事件（永远不会被触发），正如您在Sencha documentation中看到的那样。

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

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

Answer 2

<强>问题

您创建了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 !!!
            ]           
        }

在控制器中

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

你想做什么？

首先NotesApp.view.NoteEditor是编辑带有标题和叙述两个字段的笔记。

为什么你有两个标题和叙述列表？

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

Sencha Touch将详细页面视图转换为带按钮的项目

2 个答案: