Sencha touch 2 how to add a list into a container?

Question

Hi i'm new to Sencha touch and i have a problem. I looked up every answer i could find about my problem and tried all of them but i'm missing something.

I want to add a panel with some textfields and a list to my view. But my list is always in the background and i cant click it anymore.

Image:

Image of the problem

Here is the code:

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

The Controller:

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

    });

And the list:

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

Its hard to tell you how to fix the problem without the controller being present because i could not simulate the above problem. But here is my hunch based on the provided code that i tested, the problem might stem from the misuse of panels. As panels are the base for everything that is floating and modal, which is not what you want in this case(this is what Sencha touch in action states pg76). Also the noteslist has the layout fit but you aren't stating a height. The fit takes the height of its parent but we dont know what is the parent height as you are using the add. Lastly i suggest you take out everything from the initialize function and put it in the configs items like i did below(now remember that the last one is a suggestion) Good luck :)

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

FYI i just removed everything from the initialize and just left this.callParent(arguments); but i dont think that you need that either because this will call on its parent constructor