I am trying to build an application that has the following structure:
MyTabPanel (TabPanel)
--Players (Panel 1st Tab)
-----playerList (List with itemtap event to display playerPreview)
-----playerDetail (Panel)
--LocationTab (TabPanel)
--AboutTab(TabPanel)
I want to put a list inside a tabpanel that can display a detail panel, is this possible?
I have enclosed my .xda file of what I have so far. If I move the playerList to out of the tabpanel and make it initial it works.
Any help would be appreciated. I am stuck until I get this figured out.
app.js
Code:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
models: [
'PlayerModel'
],
stores: [
'PlayerStore'
],
views: [
'MyTabPanel'
],
name: 'team',
launch: function() {
Ext.create('team.view.MyTabPanel', {fullscreen: true});
}
});
MyTabPanel.js
Code:
/*
* File: app/view/MyTabPanel.js
*
* This file was generated by Sencha Architect version 2.0.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Sencha Touch 2.0.x library, under independent license.
* License of Sencha Architect does not include license for Sencha Touch 2.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.define('team.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
items: [
{
xtype: 'panel',
layout: {
type: 'card'
},
title: 'Players',
iconCls: 'team',
items: [
{
xtype: 'list',
itemId: 'playerList',
itemTpl: [
'<div>{lName}, {fName}</div>'
],
store: 'PlayerStore',
grouped: true,
indexBar: true
},
{
xtype: 'toolbar',
docked: 'top',
title: 'Players',
items: [
{
xtype: 'button',
hidden: true,
itemId: 'Back',
ui: 'back',
text: 'Back'
}
]
},
{
xtype: 'panel',
id: 'playerPreview',
itemId: 'playerPreview',
padding: '10px',
tpl: [
'<div><b>Personal Details</b></div>',
'<div>{lName}, {fName}</div>',
'<div>{addr1}</div>',
'<div>{addr2}</div>',
'<div>{city} {state}, {zip}</div>',
'</br>',
'<div><b>Positions</b></div>',
'<div>Primary: {mainPosition}</div>',
'<div>Secondary: {secPosition}</div>'
],
scrollable: true
}
]
},
{
xtype: 'container',
itemId: 'LocationTab',
layout: {
type: 'fit'
},
title: 'Locations',
iconCls: 'maps',
items: [
{
xtype: 'map',
style: '',
useCurrentLocation: true
}
]
},
{
xtype: 'container',
itemId: 'AboutTab',
title: 'About',
iconCls: 'info'
}
],
tabBar: {
docked: 'bottom'
},
listeners: [
{
fn: 'onPlayerListItemTap',
event: 'itemtap',
delegate: '#playerList'
},
{
fn: 'onBackTap',
event: 'tap',
delegate: '#Back'
}
]
},
onPlayerListItemTap: function(dataview, index, target, record, e, options) {
this.setActiveItem(1);
this.down("#Back").show();
this.down("#playerPreview").setData(record.data);
},
onBackTap: function(button, e, options) {
button.hide();
this.setActiveItem(0);
this.down("#playerList").deselectAll();
}
});
PlayerStore.js
Code:
/*
* File: app/store/PlayerStore.js
*
* This file was generated by Sencha Architect version 2.0.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Sencha Touch 2.0.x library, under independent license.
* License of Sencha Architect does not include license for Sencha Touch 2.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.define('team.store.PlayerStore', {
extend: 'Ext.data.Store',
requires: [
'team.model.PlayerModel'
],
config: {
autoLoad: true,
model: 'team.model.PlayerModel',
storeId: 'PlayerStore',
proxy: {
type: 'jsonp',
url: 'http://localhost:8888/listdetail/users.json',
reader: {
type: 'json'
}
},
grouper: {
groupFn: function(record) {
return record.get('lName')[0];
}
}
}
});
PlayerModel.js
Code:
/*
* File: app/model/PlayerModel.js
*
* This file was generated by Sencha Architect version 2.0.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Sencha Touch 2.0.x library, under independent license.
* License of Sencha Architect does not include license for Sencha Touch 2.0.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.define('team.model.PlayerModel', {
extend: 'Ext.data.Model',
config: {
idProperty: 'playermodel',
fields: [
{
name: 'lName'
},
{
name: 'fName'
},
{
name: 'addr1'
},
{
name: 'addr2'
},
{
name: 'city'
},
{
name: 'state'
},
{
name: 'zip'
},
{
name: 'playerid'
},
{
name: 'mainPosition'
},
{
name: 'secPosition'
}
]
}
});
List with detail panel inside a tabpanel, is it possible?
Reply With Quote