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‘

       }

   },

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。