Sencha Touch 2.0 MVC in 5 minutes or less
来源:互联网 发布:淘宝海景房是什么意思 编辑:程序博客网 时间:2024/05/17 02:03
Sencha Touch 2.0 MVC in 5 minutes or less
I’ve shied away from JS frameworks on the mobile platform primarily due to performance. I had not been able to find one that came close to native performance on Android. This changed last weekend when I tried out the Sencha Touch 2.0 dev preview. Performance is vastly improved over Touch 1.0. Animations and transitions are smooth, even on my Android 2.2 device and I was able to get up and running very fast.
Grab the Sencha Touch 2.0 Dev Preview here: http://www.sencha.com/blog/sencha-touch-2-developer-preview/
While I was able to get a basic app up and running quickly, unfortunately I spent a lot of time re-factoring into a proper MVC structure. The documentation on how to do this in Touch 2.0 is not there yet and there are some albeit small but killer differences between Touch1.0 and 2.0. To a novice like me they cost me a few hours.
Everything here was based off the Sencha ExtJS 4.0 walkthrough available here:
- http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/
- http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/
- http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3/
The sample code is available on Github and you can go here and download the entire project in a single ZIP/TAR:https://github.com/FrancisShanahan/SenchaTouch2MVCHelloworld
Or you can fork the repo using git: http://help.github.com/fork-a-repo/
Here are a few key points:
a) Let the app instantiate your controllers and any global stores your app needs. Notice how the initial layout is created using xtypes? These are created as aliases in the views.
// Main application entry pointExt.application({phoneStartupScreen: 'images/sencha_logo.png',name: 'HelloWorld', // the controller will take care of creating the viewcontrollers: ['Home'],launch: function() {console.log('app launch');var carousel = Ext.create('Ext.Carousel', {fullscreen: true,// clean instantiation using the widget.alias's defined // in each viewitems: [{ xtype: 'home' },{ xtype: 'simplelist' }]}); }});
b) Let your controllers instantiate your views and stores.
Ext.define('HelloWorld.controller.Home', { extend: 'Ext.app.Controller', views: ['Home', 'SimpleList'], stores: ['Stations'], ... rest of the code goes here});
c) Use Component Queries instead of Ext.getCmp(‘id goes here’). This’ll keep your code more manageable as the code base grows. Note, the “ref” name here is important as it’s used to generate getters for the view instances. E.g. a ref of “stationList” will create a getter on the controller of “getStationList”.
... this goes in your controller... // These "refs" will generate "getters" for each of the view component instances // e.g. getBottomField and getStationListrefs: [{selector: 'carousel > panel > #bottomInput',ref: 'bottomField'}, { selector: 'carousel > list', ref: 'stationList' } ], ... rest of the code goes here....});
I’ve already heard from a few folks so it looks like this project is helpful. It’s also ready for dropping into a Phonegap shell. Fork it and update or let me know if there’s anything you’d like to see added.
Attribution: Today’s photo comes from Anxo Resúa’s stream on Flickr http://www.flickr.com/photos/anxoresua/4652943076/
- Sencha Touch 2.0 MVC in 5 minutes or less
- SQLite In 5 Minutes Or Less
- Sencha Touch MVC 模式
- Apache/Tomcat with Failover and Load Balancing in 20 minutes or less…
- What's New in Sencha Touch 2.0
- sencha touch (二) mvc
- 在windows上搭建一个SSH隧道Set up a Windows SSH tunnel in 10 minutes or less)
- Scrum in 5 minutes
- Maven in 5 Minutes
- Lucene in 5 minutes.
- Sencha Touch 2.0发布
- Sencha Touch 2.0布局
- Embedding LuaJIT in 30 minutes (or so)
- Pwning a thin client in less than two minutes
- 从零开始学习Sencha Touch MVC应用之一
- Sencha Touch App (MVC)开发小结
- 从零开始学习Sencha Touch MVC应用之一
- sencha touch 2 mvc调用文件顺序
- Java解释器模式
- 风险因素加剧,非美反弹夭折
- 使用主机为PHP5.3版本后出现的问题
- SQL Server 返回最后插入记录的自动编号ID
- android 游戏开发 - 使用SurfaceView 创建你自己的View
- Sencha Touch 2.0 MVC in 5 minutes or less
- Java享元模式Flyweight
- js 弹出子窗口后,设定为最顶层焦点,关闭后传参给父窗口(兼容其它浏览器)
- delphi中的提前声明
- n个元素的数组中找出前K个最大数最有效算法O(nlg(k))
- MFC窗口启动最大化
- Linux FM stuff
- HTML A标签调用javascript方法的几种方法
- 京东今天还在用 .NET 架构的原因是什么?