Sencha Touch:定义的项目无效
Sencha Touch : invalid item defined
我在这里尝试添加一个带有嵌入式按钮的简单工具栏,然后是一些项目的列表。单击排序按钮后,我希望此列表得到排序。
以下是查看代码:
Ext.define('UtilApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
initialize: function(){
this.callParent(arguments);
var Arr = new Array("Banana", "Apple", "Orange", "Peach", "Guava", "Pine", "Dates");
var sortButton = {
xtype: 'button',
text: 'sort',
handler: this.sorter(Arr)
};
var toolbar = {
xtype: 'toolbar',
title: Ext.Date.DAY,
docked: 'top',
items : [sortButton]
};
var list = Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{title: Arr[0]},
{title: Arr[1]},
{title: Arr[2]},
{title: Arr[3]},
{title: Arr[4]},
{title: Arr[5]},
{title: Arr[6]}
]
});
console.log("List Created!");
this.add([toolbar, list]);
},
sorter: function(Arr, toolbar, list){
console.log("Starting sort");
var sortedArray = Ext.Array.sort(Arr);
console.log(sortedArray);
console.log("Sorted");
this.add([this.toolbar, this.list]);
console.log("added");
}
});
extend: 'Ext.Container',
xtype: 'main',
initialize: function(){
this.callParent(arguments);
var Arr = new Array("Banana", "Apple", "Orange", "Peach", "Guava", "Pine", "Dates");
var sortButton = {
xtype: 'button',
text: 'sort',
handler: this.sorter(Arr)
};
var toolbar = {
xtype: 'toolbar',
title: Ext.Date.DAY,
docked: 'top',
items : [sortButton]
};
var list = Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{title: Arr[0]},
{title: Arr[1]},
{title: Arr[2]},
{title: Arr[3]},
{title: Arr[4]},
{title: Arr[5]},
{title: Arr[6]}
]
});
console.log("List Created!");
this.add([toolbar, list]);
},
sorter: function(Arr, toolbar, list){
console.log("Starting sort");
var sortedArray = Ext.Array.sort(Arr);
console.log(sortedArray);
console.log("Sorted");
this.add([this.toolbar, this.list]);
console.log("added");
}
});
我收到如下错误:
未捕获的错误:[ERROR][Ext.Container#add] 给定的项目无效:未定义,必须是用于制造新项目的配置对象,或者是现有的组件实例
如果我删除此处理程序,该列表不会出现在屏幕上。
我不知道这个错误是什么意思,因为我是 sencha touch 和 Ext.js 的新手。请帮忙。
首先,我为按钮定义处理程序的方式是错误的。它实际上是在调用排序器函数。所以正确的处理程序定义应该如下:
handler: this.sorter.bind(this, Arr, true)
这样就为按钮处理程序定义了排序器函数,我们也可以将参数传递给该函数。
此代码的第二个也是主要问题是我无法像为 xtype 工具栏所做的那样在配置 属性 的值内编写 js 代码。因此,标题的值应该用字符串替换,或者可以使用 setter 函数更新。
我在这里尝试添加一个带有嵌入式按钮的简单工具栏,然后是一些项目的列表。单击排序按钮后,我希望此列表得到排序。
以下是查看代码:
Ext.define('UtilApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
initialize: function(){
this.callParent(arguments);
var Arr = new Array("Banana", "Apple", "Orange", "Peach", "Guava", "Pine", "Dates");
var sortButton = {
xtype: 'button',
text: 'sort',
handler: this.sorter(Arr)
};
var toolbar = {
xtype: 'toolbar',
title: Ext.Date.DAY,
docked: 'top',
items : [sortButton]
};
var list = Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{title: Arr[0]},
{title: Arr[1]},
{title: Arr[2]},
{title: Arr[3]},
{title: Arr[4]},
{title: Arr[5]},
{title: Arr[6]}
]
});
console.log("List Created!");
this.add([toolbar, list]);
},
sorter: function(Arr, toolbar, list){
console.log("Starting sort");
var sortedArray = Ext.Array.sort(Arr);
console.log(sortedArray);
console.log("Sorted");
this.add([this.toolbar, this.list]);
console.log("added");
}
});
extend: 'Ext.Container',
xtype: 'main',
initialize: function(){
this.callParent(arguments);
var Arr = new Array("Banana", "Apple", "Orange", "Peach", "Guava", "Pine", "Dates");
var sortButton = {
xtype: 'button',
text: 'sort',
handler: this.sorter(Arr)
};
var toolbar = {
xtype: 'toolbar',
title: Ext.Date.DAY,
docked: 'top',
items : [sortButton]
};
var list = Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{title: Arr[0]},
{title: Arr[1]},
{title: Arr[2]},
{title: Arr[3]},
{title: Arr[4]},
{title: Arr[5]},
{title: Arr[6]}
]
});
console.log("List Created!");
this.add([toolbar, list]);
},
sorter: function(Arr, toolbar, list){
console.log("Starting sort");
var sortedArray = Ext.Array.sort(Arr);
console.log(sortedArray);
console.log("Sorted");
this.add([this.toolbar, this.list]);
console.log("added");
}
});
我收到如下错误:
未捕获的错误:[ERROR][Ext.Container#add] 给定的项目无效:未定义,必须是用于制造新项目的配置对象,或者是现有的组件实例
如果我删除此处理程序,该列表不会出现在屏幕上。 我不知道这个错误是什么意思,因为我是 sencha touch 和 Ext.js 的新手。请帮忙。
首先,我为按钮定义处理程序的方式是错误的。它实际上是在调用排序器函数。所以正确的处理程序定义应该如下:
handler: this.sorter.bind(this, Arr, true)
这样就为按钮处理程序定义了排序器函数,我们也可以将参数传递给该函数。
此代码的第二个也是主要问题是我无法像为 xtype 工具栏所做的那样在配置 属性 的值内编写 js 代码。因此,标题的值应该用字符串替换,或者可以使用 setter 函数更新。