Sencha touch 2如何将列表添加到容器中？

Question

嗨，我是Sencha touch的新手，我有问题。 我查了一下所有可以找到的有关我问题的答案，并尝试了所有答案，但是我错过了一些东西。

我想在面板上添加带有一些文本字段和列表的面板。 但是我的列表始终在后台，我无法再单击它。

图片：

问题的形象

这是代码：

Ext.define("NotesApp.view.TestPanel", {
extend: "Ext.Panel",
alias: "widget.testpanel",



config: {
    listeners: [{
        delegate: '#logOutButton',
        event: 'tap',
        fn: 'onLogOutButtonTap'
    }],
    layout: {
        type: 'fit',
    fullscreen: true
    }
},

initialize: function () {

    this.callParent(arguments);

    var logOutButton = {
            xtype: "button",
            text: 'Log Out',
            ui: 'action',
    }

    var form = Ext.create
    (
        'Ext.form.Panel', 
        {
            config:
            {
                layout: 'fit',
                height: '300px',
            },
            items: 
            [
                {
                    xtype: 'textfield',
                    name: 'name',
                    label: 'Name'
                },
                {
                    xtype: 'emailfield',
                    name: 'email',
                    label: 'Email'
                },
                {
                    xtype: 'passwordfield',
                    name: 'password',
                    label: 'Password'
                },
            ]
        }
    );


    var newButton = {
        xtype: "button",
        text: 'New',
        ui: 'action',
        handler: this.onNewButtonTap,
        scope: this
    };

    var notesList = {
            xtype: "noteslist",
        layout: 'fit',
            store: Ext.getStore("Notes"),
            listeners: {
                disclose: { fn: this.onNotesListDisclose, scope: this }
            }
        };

    var topToolbar = {
        xtype: "toolbar",
        title: 'My Notes',
        docked: "top",
        items: [logOutButton, {xtype: 'spacer'}, newButton]
        };

    var bottomToolbar =
    {
        xtype: "toolbar",
        docked: "bottom",
        layout:
        {
            type: 'hbox',
            pack: 'center'
        },
        items:
        [
            {
                xtype: "button",
                text: "testButton",
                width: "100"
            }
        ]
    }
        this.add([topToolbar,notesList, form, bottomToolbar]);
},
onNewButtonTap: function() {
    this.fireEvent("newNoteCommand", this);
},

onNotesListDisclose: function (list, record, target, index, evt, options) {
        console.log("editNoteCommand");
        this.fireEvent('editNoteCommand', this, record);
    },

onLogOutButtonTap: function () {
    this.fireEvent('signOutCommand')
}
});

控制器：

Ext.define("NotesApp.controller.Notes", {

extend: "Ext.app.Controller",
config: {
    refs: {

        notesListContainer: "noteslistcontainer",
        noteEditor: {
            selector: 'noteeditor',
            xtype: 'noteeditor',
            autoCreate: true
            },

    },
    control: {
        notesListContainer: {

            newNoteCommand: "onNewNoteCommand",
            editNoteCommand: "onEditNoteCommand"
                },

        noteEditor: {
        saveNoteCommand: "onSaveNoteCommand",
        deleteNoteCommand: "onDeleteNoteCommand",
        backToHomeCommand: "onBackToHomeCommand"
                    }
            }
        },

    slideLeftTransition: { type: 'slide', direction: 'left' },
    slideRightTransition: { type: 'slide', direction: 'right' },

    getRandomInt: function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
},
activateNoteEditor: function (record) {

    var noteEditor = this.getNoteEditor();
    noteEditor.setRecord(record); // load() is deprecated.
    Ext.Viewport.animateActiveItem(noteEditor, this.slideLeftTransition);
},
activateNotesList: function () {
    Ext.Viewport.animateActiveItem(this.getNotesListContainer(), this.slideRightTransition);
},

        onNewNoteCommand: function() {
            var now = new Date();
            var noteId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString();

            var newNote = Ext.create("NotesApp.model.Note",
        {
            id: noteId,
            dateCreated: now,
            title: "",
            narrative: ""   

        });

        this.activateNoteEditor(newNote);

        },
        onEditNoteCommand: function(list, record) {

            this.activateNoteEditor(record);


        },

        onDeleteNoteCommand: function() {
            var noteEditor = this.getNoteEditor();
            var currentNote = noteEditor.getRecord();
            var notesStore = Ext.getStore("Notes");

            notesStore.remove(currentNote);
            notesStore.sync();

            this.activateNotesList();
        },

        onBackToHomeCommand: function() {
            this.activateNotesList();
        },

        onSaveNoteCommand: function() {
            var noteEditor = this.getNoteEditor();
            var currentNote = noteEditor.getRecord();
            var newValues = noteEditor.getValues();

            currentNote.set("title", newValues.title);
            currentNote.set("narrative", newValues.narrative);

            var errors = currentNote.validate();

            if (!errors.isValid()) {
                     Ext.Msg.alert('Wait!', errors.getByField("title")[0].getMessage(), Ext.emptyFn);
                     currentNote.reject();
                     return;
                }

            var notesStore = Ext.getStore("Notes");

            if (null == notesStore.findRecord('id', currentNote.data.id)) {
                        notesStore.add(currentNote);
                    }

                    notesStore.sync();

                    notesStore.sort([{ property: 'dateCreated', direction: 'DESC'}]);
                    this.activateNotesList();
                },




        launch: function() {
            this.callParent(arguments);
                Ext.getStore("Notes").load();


        },
        init: function() {
            this.callParent(arguments);
        }

    });

和清单：

Ext.define("NotesApp.view.NotesList", {
extend: "Ext.dataview.List",
alias: "widget.noteslist",
config: 
{
    loadingText: "Loading Notes...",
    emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",
    onItemDisclosure: true,
    grouped: true,
    itemTpl: "<div class=\"list-item-title\">{title}</div><div class=\"list-item-narrative\">{narrative}</div>",        
},


});

Answer 1

很难告诉您如何在没有控制器的情况下解决问题，因为我无法模拟上述问题。 但是，根据我测试的提供的代码，这是我的直觉，问题可能出自面板滥用。 由于面板是所有浮动和模态对象的基础，在这种情况下，这不是您想要的（这是Sencha在动作状态pg76中所触摸的）。 另外，注释列表具有适合的布局，但您没有说明高度。 拟合采用其父代的高度，但是当您使用添加时，我们不知道父代的高度是多少。 最后，我建议您从initialize函数中取出所有内容，并将其放在配置项中，就像我在下面所做的那样（现在请记住，最后一个是建议）祝您好运:)

        config : {
            listeners : [ {
                delegate : '#logOutButton',
                event : 'tap',
                fn : 'onLogOutButtonTap'
            } ],
            items : [ {
                xtype : "toolbar",
                title : 'My Notes',
                docked : "top",
                items : [ {
                    xtype : "button",
                    text : 'Log Out',
                    ui : 'action',
                }, {
                    xtype : 'spacer'
                }, {
                    xtype : "button",
                    text : 'New',
                    ui : 'action',
                    handler : this.onNewButtonTap,
                    scope : this
                } ]
            }, {
                xtype : 'textfield',
                name : 'name',
                label : 'Name'
            }, {
                xtype : 'emailfield',
                name : 'email',
                label : 'Email'
            }, {
                xtype : 'passwordfield',
                name : 'password',
                label : 'Password'
            }, {
                xtype : "toolbar",
                docked : "bottom",
                layout : {
                    type : 'hbox',
                    pack : 'center'
                },
                items : [ {
                    xtype : "button",
                    text : "testButton",
                    width : "100"
                } ]
            }, {
                // xtype : "noteslist",
                layout : 'vbox',
                store : Ext.getStore("Notes"),
                listeners : {
                    disclose : {
                        fn : this.onNotesListDisclose,
                        scope : this
                    }
                }
            } ]
        }

仅供参考，我只是从初始化中删除了所有内容，然后就离开了this.callParent（arguments）; 但是我不认为您需要它，因为这将调用其父构造函数