PDA

View Full Version : [CLOSED] Ext.List does not work in a Ext.tab.Panel?



knifegun
26 Oct 2011, 1:45 PM
I have a tab panel that includes another Ext.Panel with an Ext.List. If I include the JavaScript file with the Ext.Panel class definition, the tab bar does not respond to events (i.e. tabs won't change). If I don't include the JavaScript file, the tab bar works as expected.

Here is the Ext.Panel class definition with the Ext.List:


Ext.require([
'Ext.data.Store',
'Ext.List',
'Ext.data.Model',
'Ext.Panel'
]);


function createListComponent() {

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var store = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',

getGroupString: function(record) {
return record.get('lastName')[0];
},

data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Jacky', lastName: 'Nguyen'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Nigel', lastName: 'White'},
{firstName: 'Don', lastName: 'Griffin'},
{firstName: 'Nico', lastName: 'Ferrero'},
{firstName: 'Nicolas', lastName: 'Belmonte'},
{firstName: 'Jason', lastName: 'Johnston'}
]
});

var list = new Ext.List({
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: store
});

return list;


}

Ext.define('app.view.MyDataView', {
extend: 'Ext.Panel',
xtype: 'mydataview',
title: 'DataView',
layout: 'fit',
items: [
createListComponent()
]
});

Here is the main setup JavaScript:


Ext.setup({
tabletStartupScreen: 'app/resources/images/tablet_startup.png',
phoneStartupScreen: 'app/resources/images/phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {


Ext.create('Ext.tab.Panel', {
fullscreen: true,
type: 'dark',
sortable: true,
items: [
{
title: 'Tab 1',
html: '1',
cls: 'card1',
iconCls: 'bookmarks'
},{
title: 'Tab 2',
html: '2',
cls: 'card2',
iconCls: 'bookmarks'
},{
title: 'Data',
xtype: 'mydataview'
}
]
});
}
});

And here is the index.html:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>App</title>
<link rel="stylesheet" href="lib/touch/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="lib/touch/sencha-touch-all-debug-w-comments.js"></script>


<script type="text/javascript" src="app/view/MyDataView.js"></script>

<script type="text/javascript" src="app/view/GoogleMapView.js"></script>

<script type="text/javascript" src="app/app.js"></script>
<style>
.card1,
.card2,
.card3 {
background-color: #376daa;
text-align: center;
color: #204167;
text-shadow: #3F80CA 0 1px 0;
font-size: 72px;
padding-top: 100px;
}
</style>
</head>
<body></body>
</html>


Any ideas?

knifegun
27 Oct 2011, 10:30 AM
It appears that all interaction events (tap, click, etc) are being consumed by something and not forwarded to the tab panel control. How can I check if this is the case?

Jamie Avins
31 Oct 2011, 12:13 PM
This event issue has been reported, we'll make sure this gets addresses in an upcoming release.

knifegun
31 Oct 2011, 12:16 PM
Thank you for the response. I assume there is not a work around?

Jamie Avins
31 Oct 2011, 12:22 PM
From what I've seen the order on instantiation is a problem right now. But in your example, you are using a define without specifying a config. The properties title, layout, and items you are specifying are all configs.