Code:
Ext.application({
name: 'Test',
requires: [
'Ext.data.Store',
'Ext.dataview.List'
],
launch: function () {
Ext.define('City', {
extend: 'Ext.data.Model',
config: {
fields: [{ name: 'city', type: 'string' }]
}
});
Ext.create('Ext.data.Store', {
storeId: 'CityStore',
model: 'City',
data: [
{ city: 'Topeka' },
{ city: 'Buffalo' },
{ city: 'Sacramento' },
{ city: 'Springfield' },
{ city: 'Houston' },
{ city: 'Akron' },
{ city: 'Toledo' },
{ city: 'Frankfort' },
{ city: 'Buford' }
]
});
Ext.define('State', {
extend: 'Ext.data.Model',
config: {
fields: [{ name: 'state', type: 'string' }]
}
});
Ext.create('Ext.data.Store', {
storeId: 'StateStore',
model: 'State',
data: [
{ state: 'Kansas' },
{ state: 'New York' },
{ state: 'California' },
{ state: 'Ohio' },
{ state: 'Texas' },
{ state: 'Ohio' },
{ state: 'Ohio' },
{ state: 'Kentucky' },
{ state: 'South Carolina' }
]
});
Ext.Viewport.add(Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'container',
layout: 'vbox',
scrollable: {
direction: 'vertical'
},
width: '30%',
items: [
{
xtype: 'list',
// flex: 1,
itemTpl: '{city}',
store: 'CityStore'
},
{
xtype: 'list',
// flex: 1,
itemTpl: '{state}',
store: 'StateStore'
}
]
},
{
xtype: 'component',
width: '70%',
html: 'some other stuff'
}
]
}));
}
});