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.

Nataraj Nataraj · Accepted Answer · 2015-07-31T04:15:01

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 Answers