嗨，我是 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>",
},
});