Sencha Touch : invalid item defined

Question

Here I am trying to add a simple toolbar with an embedded button and following these is a list of some items. I want this list to get sorted once i click on sort button.

The following is the view code :

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

});

I am getting an error as follows :

Uncaught Error: [ERROR][Ext.Container#add] Invalid item given: undefined, must be either the config object to factory a new item, or an existing component instance

The list is not appearing in the screen if i remove this handler. I could not figure out what the error means as I am new to sencha touch and also Ext.js . Please help.

score 0 · Accepted Answer · answered Jul 31 '15 at 04:15

First of all the way that i am defining a handler for the button is wrong. It is actually making a call to the sorter function. So the proper handler definition should be as follows :

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

This way the sorter function is defined for the button handler and also we can pass parameters to the function.

The second and major problem with this code is that i cannot write js code inside the value for a config property as i've done for the xtype toolbar. So the value for the title should be either replaced by a string or it can be updated using a setter function.

Sencha Touch : invalid item defined

1 Answers1