Two Grids on Same Page Extjs 4 - extjs

Question

I am using this
Ext.define('Wifi.view.widget', {
extend: 'Ext.grid.Panel',
xtype: 'customerlist',
selModel: {
selType: 'cellmodel'
},
height: 380,
width: 700,
viewConfig: {
stripeRows: true
},
initComponent: function() {
Ext.apply(this, {
// Each grid will create its own store now when it is initialized.
store: Ext.create('Wifi.store.Customers'),
plugins: Ext.create('Ext.grid.plugin.CellEditing'),
columns: [{
text: 'Column Name', // Two line header! Test header height synchronization!
locked : false,
width : 200,
sortable : false,
dataIndex: 'columnName'
},{
text : 'Display Name',
width : 200,
sortable : true,
dataIndex: 'displayName',
editor: {
xtype: 'textfield'
}
},{
text : 'Column Width',
width : 150,
sortable : true,
dataIndex: 'columnWidth',
editor: {
xtype: 'numberfield'
}
},{
text : 'Column Type',
width : 100,
sortable : true,
dataIndex: 'columnType',
editor: {
xtype: 'ColumnTypeCombo'
}
}]
});
this.callParent(arguments);
}
});
grid on the same page..
Ext.define('Wifi.view.ViewPortletConfig', {
extend: 'Ext.container.Viewport',
requires: ['Wifi.view.ViewDetailCombo'],
initComponent: function() {
var me = this;
Ext.apply(me, {
items: [
{
region: 'center',
layout:'column',
items : [
{
columnWidth: 1/2,
title: 'Table 1 Column Details',
border:true,
margin:'5 5 5 5',
items:[
{
xtype : 'toolbar',
height:35,
width:700,
border:true,
frame:true,
items: [
'->',
'Select Table: ',
{
margin:'0 50 0 0',
xtype : 'ViewDetailCombo'
}
]
},
{
xtype : 'customerlist'
}
]
},{
columnWidth: 1/2,
title: 'Table 2 Column Details',
border:true,
margin:'5 5 5 5',
items:[
{
xtype : 'toolbar',
height:35,
width:700,
border:true,
frame:true,
items: [
'->',
'Select Table: ',
{
margin:'0 50 0 0',
xtype : 'ViewDetailCombo'
},
]
},
{xtype : 'customerlist'}
]
}
]
}
]
});
me.callParent(arguments);
}
});
Only first grid store is loaded on the change of combo boxes of table 1 and table 2. Can somebody guide me, where is the problem. Thanks in advance.

Answer 1

You have your widget alias wrong. It should look like this:
alias: 'widget.customerlist'
Not xtype! You use xtype: 'customerlist' like you are in both Table N Columns which is a reference to the widget alias 'widget.customerlist'. The definition for the widget needs to change.