app.js
Code:
Ext.application({
name: 'TestCase',
requires: [
'Ext.MessageBox', 'Ext.tab.Panel', 'Ext.dataview.List', 'Ext.data.Store'
],
views: ['Main', 'Top', 'Sub', 'SubSub' ],
controllers: [ 'MainController' ],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Initialize the main view
Ext.Viewport.add(Ext.create('TestCase.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
Main.js
Code:
Ext.define("TestCase.view.Main", {
extend: 'Ext.navigation.View',
requires: [ 'Ext.tab.Panel' ],
config:
{
items:
[
{
xtype: 'tabpanel',
title: 'TestCase',
tabBarPosition: 'bottom',
items:
[
{
title: 'Welcome',
iconCls: 'home',
xtype: 'topview'
}
]
}
]
}
});
MainController.js
Code:
Ext.define( 'TestCase.controller.MainController',
{
extend: 'Ext.app.Controller',
config:
{
refs:
{
topList: '#topList',
subList: '#subList'
},
control:
{
topList:
{
itemtap: 'onTap'
},
subList:
{
itemtap: 'onSubTap'
}
}
},
onTap: function( list, index, node, record )
{
list.up( 'navigationview' ).push(
{
xtype: record.get( 'subXtype' ),
record: record,
title: record.get( 'name' )
} );
},
onSubTap: function( list, index, node, record )
{
list.up( 'navigationview' ).push(
{
xtype: record.get( 'subsubXtype' ),
record: record,
title: record.get( 'name' )
} );
}
});
Top.js
Code:
Ext.define( 'TestCase.view.Top',
{
extend: 'Ext.Container',
xtype: 'topview',
config:
{
layout: 'vbox',
items:
[
{
xtype: 'list',
itemTpl: '{name}',
id: 'topList',
flex: 1,
data:
[
{
name: 'hey',
subXtype: 'subview'
}
]
}
]
}
} );
Sub.js
Code:
Ext.define( 'TestCase.view.Sub',
{
extend: 'Ext.Container',
xtype: 'subview',
config:
{
layout: 'vbox',
items:
[
{
xtype: 'list',
itemTpl: '{name}',
id: 'subList',
flex: 1,
data:
[
{
name: "hey",
subsubXtype: 'subsubview'
}
]
}
]
}
} );
SubSub.js
Code:
Ext.define( 'TestCase.view.SubSub',
{
extend: 'Ext.Container',
xtype: 'subsubview',
config:
{
html: 'Hey'
}
} );
index.html
Code:
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>TestCase</title>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
</head>
<body>
</body>
</html>
This accurately reproduces my problem.