Tags: javascript, sencha touch, extjs
Hi guys!
Today I wanna talk about new Sencha's Inc. product - Sencha Touch 2.0 (ST2). What is new in Sencha Touch 2.0 you can check here in more detail, I just wanna share my impressions and some experience during the development. Almost all the new in ST2, from including files till definitions and declarations of classes. Some guys from our team started to study ST2 before release of developer version. At this moment still have not full release of ST2, product is moist, but worth it to give it time.
Well, for start you should download Developer Preview here (there you can find a lot of examples, which may help you to learn if faster) or here(I've created the basement MVC stucture for beginners, it's example of a simple application "Hello World").
In the previous verstion ST1, in order to include files (like controllers, views, models and so on) we had to include them to index.html file:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCKTYPE html> <html> <head> <title>Hello World</title> <script type=”text/javascript” src=”app/controllers/Main.js”></script> <script type=”text/javascript” src=”app/view/Main.js”></script> </head> <body> <!-- here the main code --> </body> </html> |
but now we include only one file "app.js" and inside just write following:
1 2 3 | controllers: ['first controller', ‘second controller’, ‘and so on...’], views: ['first view', ‘second view’, ‘and so on...’], models: ['first model', ‘second model, ‘and so on...’] |
For example if your view located in "/app/view/user/User.js", to include this view you should write (the same for models, stores, etc.):
1 | views: ['user.User'] |
The framework do it for you. Cool. isn't it?!
Also ST2 has a very useful tool 'references':
1 2 3 4 5 6 | refs: [
{
ref: 'list',
selector: 'grid'
}
], |
Thanks to this things, we can declare something like alias for selectors, and you can select elements not only by css rules, but also by xtype:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', refs: [ { ref: 'list', selector: 'grid' } ], init: function() { this.control({ 'button': { click: this.refreshGrid } }); }, refreshGrid: function() { this.getList().store.load(); } }); |
In the example above we declared a 'ref: "list"' and linked it with "grid" selector. And now in order to get element, we should write following function this.getList(). If ref was not "list" and "lister" for example then the getting function will next "this.getLiser()". Make sense? We can create as much as we need and very easy for getting. I think it is very useful, especially for big apps.
ST2 don't use operator new anymore for declare objects, that is why you should use following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | Ext.define('MyApp.controller.Users', { //MyApp.controller.Users - path to controller extend: 'Ext.app.Controller', // extends our controller from Ext.app.Controller refs: [ { ref: 'list', selector: 'grid' } ], // this method will run while initialization init: function() { //this is function for observing of elements this.control({ 'button': { click: this.refreshGrid } }); }, refreshGrid: function() { this.getList().store.load(); } }); |
More detail information about Sencha Touch 2.0 you can find here. In the next article I am going to talk about problems which you can encounter in the development of app.
See you!
Great article
An impressive share! I have just forwarded this onto a coworker who had been conducting a little research on this. And he actually ordered me dinner simply because I stumbled upon it for him... lol. So let me reword this. ... Thank YOU for the