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‘

       }

   },

Sencha Touch app example -- oreilly app 分析