Sencha Touch 2.0 Dataview in Panel - sencha-touch

Question

I have a problem I have been struggling with for quite a while now so hopefully someone can help me out here.
Say you have this DataView object:
Ext.define('Score.view.GameInfoPanel', {
extend: 'Ext.DataView',
config: {
store: {
fields: ['Name', 'Score'],
data: [
{Name: 'test', Score: '1'},
{Name: 'test2', Score: '100'}
]
},
itemTpl: '{Name} - {Score}',
fullscreen: false
}
});
I thought I could use an instance of this DataView on different Panels like this:
var gameInfo = Ext.create('Score.view.GameInfoPanel', {
xtype: 'gameInfo',
scrollable: false,
fullscreen: false,
height: 100,
flex: 2,
});
Ext.define('Score.view.PlayerView', {
extend: 'Ext.Panel',
xtype: 'playerview',
requires: [
'Score.view.GameInfoPanel'
],
config: {
title: 'Player Info',
iconCls: 'user',
layout: 'vbox',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
id: 'toolbarId',
title: 'Player Info',
},
{
xtype: 'panel',
html: 'before',
flex: 1
},
gameInfo,
{
xtype: 'panel',
html: 'after',
flex: 3
}
]
}
});
When would show this panel in Safari I see that the DataView is in the page/panel but it is hidden. The problem is probably that x-item-hidden is set for this DataView instance. After struggling with this for hours I have no clue why this is and how to solve this. The only suggestions I could find is that I should set the height of the DataView and make it not scrollable. All of that does not seem to work. So any feedback would be very much appreciated!

Answer 1

http://www.senchafiddle.com/#2Ig9U
That sample code works just fine.
"I thought I could use an instance of this DataView on different Panels like this:"
This might be a clue. Last time I tried creating and referencing the -same- object in an extjs project I ran into something similar. What you should rather do is use an alias, and instantiate it via a widget.
more or less:
Ext.define('Score.view.GameInfoPanel', {
extend: 'Ext.DataView',
alias:'widget.scoreViewGameInfoPanel', //widgets use lazy loading
config: {
store: {
fields: ['Name', 'Score'],
data: [
{Name: 'test', Score: '1'},
{Name: 'test2', Score: '100'}
]
},
itemTpl: '{Name} - {Score}',
fullscreen: false
}
});
Ext.define('Score.view.PlayerView', {
extend: 'Ext.Panel',
xtype: 'playerview',
requires: [
'Score.view.GameInfoPanel'
],
config: {
title: 'Player Info',
iconCls: 'user',
layout: 'vbox',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
id: 'toolbarId',
title: 'Player Info',
},
{
xtype: 'panel',
html: 'before',
flex: 1
},
Ext.widget('scoreViewGameInfoPanel',{
//coz sencha hated the
//same object in 2 places last i looked
scrollable: false,
fullscreen: false,
height: 100,
flex: 2
}),
{
xtype: 'panel',
html: 'after',
flex: 3
}
]
}
});
If you actually need the -same- panel in 2 places for selecting and stuff, then I'm not too sure.

Answer 2

It took a while but I finally solved it. There were a few problems with the initial code.
In the definition of the GameInfoPanel the configuration attribute 'fullscreen' should not be used. I am not exactly sure why. But from what I understood is that the view(s) in which this view is used already set this attribute. By setting it again, even when it is set to false, it will hide the view.
Furthermore the 'xtype' attribute should be set. In this case I set it to 'gameinfo'. This is because you then can configure this view in the PlayerView. Also by setting the 'id' you can refer to this instance of the GameInfoPanel in your controller. So the PlayerView looks like this in the end:
Ext.define('Score.view.PlayerView', {
extend: 'Ext.Panel',
xtype: 'playerview',
requires: [
'Score.view.PlayerInfoPanel',
'Score.view.GameInfoPanel'
],
config: {
title: 'Player Info',
iconCls: 'user',
layout: 'vbox',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
id: 'toolbarId',
title: 'Player Info'
},
{
xtype: 'playerinfo',
id: 'currentPlayerInfoId',
flex: 1,
scrollable: false
},
{
xtype: 'gameinfo',
id: 'currentGameInfoId',
flex: 2,
scrollable: false
}
]
}
});