The culprit is this:
xtype: Ext.create('Ext.List', {
xtype
must be a string.
You can theoritically put a component instance directly in the items
:
items:[
Ext.create('Ext.List', {
fullscreen: true,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'neutral',
items: [
{
text:'Veg',
align :'center',
handler: function () {
var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
// clear all existing filters
sto.clearFilter();
sto.filter('Info2', 'False');
}
},
{
text:'Non-Veg',
align :'center',
handler: function () {
var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
// clear all existing filters
sto.clearFilter();
sto.filter('Info2', 'True');
}
},
],
store: 'RestaurantGlobal.store.ItemColumnsStore',
itemTpl: ['{Name} {Image}']
}],
}
]
But in the context of a class definition that would really be ill inspired because this same component instance would be used by every instance you create of your class. Most probably resulting in a lot of problems...
In case you really need to create the component instance yourself, because you can't simply declare its configuration, do it by overriding the initComponent
method, and create your component in there. The initComponent
method will be called for each new instance of your class, so each one will have its own instance of the child component (sorry, I know that makes a lot of repetitions of the word "instance").
Anyway, it seems that what you are really trying to do is simply to override the list class:
Ext.define('RestaurantGlobal.view.SubCategoryListView',{
extend: 'Ext.List',
xtype: 'SubCategoryListView',
requires: ['RestaurantGlobal.store.ItemColumnsStore'],
// You class is already a list, just add your custom configuration
// directly to it:
config:{
fullscreen: true,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'neutral',
items: [{
text:'Veg',
align :'center',
handler: function () {
var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
// clear all existing filters
sto.clearFilter();
sto.filter('Info2', 'False');
}
},{
text:'Non-Veg',
align :'center',
handler: function () {
var sto = Ext.create('RestaurantGlobal.store.ItemColumnsStore');
// clear all existing filters
sto.clearFilter();
sto.filter('Info2', 'True');
}
}],
store: 'RestaurantGlobal.store.ItemColumnsStore',
itemTpl: ['{Name} {Image}']
}]
}
});