Sencha Touch：定义的项目无效

Question

我在这里尝试添加一个带有嵌入式按钮的简单工具栏，然后是一些项目的列表。单击排序按钮后，我希望此列表得到排序。

以下是查看代码：

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 的新手。请帮忙。

Answer 1

首先，我为按钮定义处理程序的方式是错误的。它实际上是在调用排序器函数。所以正确的处理程序定义应该如下：

handler: this.sorter.bind(this, Arr, true)

这样就为按钮处理程序定义了排序器函数，我们也可以将参数传递给该函数。

此代码的第二个也是主要问题是我无法像为 xtype 工具栏所做的那样在配置属性的值内编写 js 代码。因此，标题的值应该用字符串替换，或者可以使用 setter 函数更新。

Sencha Touch：定义的项目无效

Sencha Touch : invalid item defined

javascript

extjs

sencha-touch

sencha-touch-2