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

refs : Object4

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'

}

},