Sencha Touch app example -- oreilly app 分析
from: 2013/8/30的笔记
-
使用development.js 读取 app.json 配置文件
-
app.json 配置了app.js文件
-
app.js lauch function ,首先用util.Proxy.js 读取 feed.js 的数据， (保存在local 变量？怎么传出？) viewport.add main
-
初始界面： view.Card.js extend：NavigationView （）
-
items 的类别 session --- in Detail.js
-
Detail extend Container
-
xtype : ’component’
contorller:
config:
control:
itemtap: ’onSpeakerTap’:
onSpeakerTap:function(list, idx, el, record) {
this.speakerInfo.config.title = record.getFullName();//这个getFullName() 定义在model/Speaker.js
this.getSessionContainer().push(this.speakerInfo);
}
config: {
refs: {
speakerContainer: 'speakerContainer',
speakers: 'speakerContainer speakers', //
speaker: 'speakerContainer speaker',
speakerInfo: 'speakerContainer speakerInfo',
sessions: 'speakerContainer speaker list'
},
control: {
speakers: {
itemtap: 'onSpeakerTap',
activate: 'onSpeakersActivate'
},
sessions: {
itemtap: 'onSessionTap'
}
}
},
Ext.app.Controller
A collection of named ComponentQuery selectors that makes it easy to get references to key Components on your page. Example usage:
refs: {
main: '#mainTabPanel',
loginButton: '#loginWindow button[action=login]',
infoPanel: {
selector: 'infopanel',
xtype: 'infopanel',
autoCreate: true
}
}
The first two are simple ComponentQuery selectors, the third (infoPanel) also passes in the autoCreate and xtype options, which will first run the ComponentQuery to see if a Component matching that selector exists on the page. If not, it will automatically create one using the xtype provided:
someControllerFunction: function() {
//if the info panel didn't exist before, calling its getter will instantiate
//it automatically and return the new instance
this.getInfoPanel().show();
}
Defaults to: {}
Ext.ComponentQuery
Provides searching of Components within Ext.ComponentManager (globally) or a specific Ext.Container on the document with a similar syntax to a CSS selector.
Components can be retrieved by using their xtype with an optional '.' prefix
-
component or .component
-
gridpanel or .gridpanel
An itemId or id must be prefixed with a #
-
#myContainer
Attributes must be wrapped in brackets
-
component[autoScroll]
-
panel[title="Test"]
Member expressions from candidate Components may be tested. If the expression returns a truthy value, the candidate Component will be included in the query:
var disabledFields = myFormPanel.query("{isDisabled()}");
Ext.navigation.View
左右滑动的效果，push / back
TouchStyle: 无限的carousel
'Ext.carousel.Infinite'
Ext.define('TouchStyle.view.ProductsList', {
extend: 'Ext.carousel.Infinite',
xtype: 'productslist',
requires: ['TouchStyle.view.Products'],
config: {
direction: 'horizontal',
innerItemConfig: {
xclass: 'TouchStyle.view.Products'
},
count: 'auto',
offsetLimit: 50,
store: null,
animation: {
duration: 650
},
listeners: {
activeitemchange: 'onActiveItemChange',
itemindexchange: 'onItemIndexChange'
}
},