Understand Sencha Touch syntax

Question

I have gone through dev.sencha.com and while I do understand Javascript/jQuery, I do not understand the syntax followed in Sencha Touch or ExtJS.

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

Answer 1

Sencha Touch is Javascript. It is written in JS there is very little magic in the library. If you understand JS you should be able to understand Sencha Touch.

Sencha Touch and JQuery are very different ways of approaching the same problem. Sencha Touch uses Object Oriented programming concepts much more than jQuery does. As well, there are things that are very similar. After working in jQuery for such a long time you need to have a open mind when approaching other Javascript libraries as there are different concepts that jQuery does not follow.

Also the libraries are targeting different 'niches'. I would say that Sencha Touch is more of a MVC library, containing UI widgets (like jQuery UI), with multiple data abstractions (ORM-lite, syncronizing) and happens to have DOM manipulation. jQuery is mostly 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 of performing similar tasks in both of the libraries.

However things you can't do in jQuery. Like create a full browser window that has a carousel in it. 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 their demos, which I agree can be pretty confusing, I would recommend watching their introductory videos on their vimeo channel and take a look at their examples in their downloaded source code.