Lately im trying to learn ST2 myself, and then bug things happend. I create a Ext.Component view, and then i put it to a parent view which extends Ext.Container. Unfortunately, there is nothing but air rendered in my page. Some guys help me ? Much thanx. Here is my CODES below.
app.js
Ext.application({
name: 'myAPP',
requires: [
'Ext.MessageBox'
],
models: [
'Goods'
],
views: [
'Viewport',
'GoodsList',
'GoodsListItem'
],
controllers: [],
stores: [
'GoodsList'
],
// some basic codes...
});
Viewport.js - view
Ext.define('myAPP.view.Viewport', {
extend: 'Ext.tab.Panel',
xtype: 'viewport',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Series',
iconCls: 'list',
xtype: 'goodslist'
}
]
}
});
GoodsList.js - view
Ext.define('myAPP.view.GoodsList', {
extend: 'Ext.Container',
requires: [
'Ext.TitleBar',
'myAPP.view.GoodsListItem'
],
xtype: 'goodslist',
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: 'titlebar',
title: 'GoodsList',
docked: 'top',
items: [
{
iconCls: 'more',
align: 'right'
}
]
},
{
xtype: 'goodslistitem'
}
]
}
});
GoodsListItem.js - view
Ext.define('myAPP.view.GoodsListItem', {
extend: 'Ext.Component',
xtype: 'goodslistitem',
config: {
store: 'goodsliststore',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="s-row">',
'<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
'<img src="{thumb}" />',
'<h1>{#}. {pname}</h1>',
'{price}',
'</div>',
'</div>',
'</tpl>'
)
}
});
GoodsList.js - store
Ext.define('myAPP.store.GoodsList', {
extend: 'Ext.data.Store',
config: {
model: 'myAPP.model.Goods',
storeId: 'goodsliststore',
data: [
{
pname: 'Goods',
price: '5RMB',
thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
},
{
pname: 'Goods',
price: '15RMB',
thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
},
{
pname: 'Goods',
price: '25RMB',
thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
},
{
pname: 'Goods',
price: '35RMB',
thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
}
]
}
});
Goods.js - model
Ext.define('myAPP.model.Goods', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'pname', type: 'string' },
{ name: 'price', type: 'int' },
{ name: 'thumb', type: 'string' }
]
}
});
ST Version - Touch 2.1.1