Geek Answers Handbook

Understand Sencha Touch Syntax

I went through dev.sencha.com, and although I really understand Javascript / jQuery, I don't understand the syntax that follows in Sencha Touch or ExtJS.

Could you give a general idea with an example of how and how the syntax works. Also, what should you think of when trying to integrate Sencha touch into an HTML / CSS web application? Also any analogy with jQuery?

+4
source share
1 answer

Sencha Touch is Javascript. JS says that the library has very little magic. If you understand JS, you must understand Sencha Touch.

Sencha Touch and jQuery are very different ways to solve the same problem. Sencha Touch uses the concepts of object-oriented programming much more than jQuery. In addition, there are things that are very similar. After working in jQuery for such a long time, you need to have an open mind when approaching other Javascript libraries, since there are different concepts that jQuery does not fulfill.

Libraries also target different "niches." I would say that Sencha Touch is more like an MVC library containing user interface widgets (e.g. jQuery user interface), with several data abstractions (ORM-lite, syncronizing) and, sometimes, with DOM manipulation. jQuery is basically a DOM manipulation.

Where jQuery and Sench Touch are the same:

JQuery

$('#mydiv').addClass('highlighted').css({'background-color': red'});

Sencha Touch:

 Ext.select('#mydiv').addCls('highlighted').applyStyles({'background-color': red'});

JQuery

 $.get('someurl', 'get', function(){ console.log("Success")})

Sencha touch

 Ext.Ajax.request({'url': 'someurl', method: 'get', success: function(){ console.log('success')})

So, you can see that there are ways to perform similar tasks in both libraries.

Everything you cannot do in jQuery. How to create a full browser window in which there is a carousel. Sencha Touch:

 var panel = Ext.Panel({ dockedItems: [ {xtype: 'toolbar', title: 'Sample Toolbar', dock: 'top' } ] items: [ {xtype: 'carousel', items: [ {html: 'card 1'}, {html: 'card 2'}] ], fullscreen: true }); panel.show();

Instead of looking online at my demos, which I agree can be quite confusing, I would recommend watching their introductory videos on their vimeo and take a look at their examples in the downloaded source code.

+15
source

More articles:


All Articles