I have gone through dev.sencha 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 ?

I have gone through dev.sencha. 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 ?

• javascript
• jquery
• html
• extjs
• sencha-touch

• give us an example of the syntax you do not understand. SenchaTouch apps ARE webapps. They run in the browser – hvgotcodes Commented Jun 16, 2011 at 17:58
• Question is very vague... Which part are you having difficulties with? Which tutorials have you looked at? – Ruan Mendes Commented Jun 16, 2011 at 17:59
• I am a beginner for Sencha Touch and have gone through their official pages. But while they provide the output for any code with examples, they do not actually explain the individual parts of the code..Something which I feel should be required when editing any code..So i wanted to get a general idea about the coding style in Sencha Touch..e.g. Jquery is mainly based on CSS for coding..similarly jow does it work in Sencha Touch? – copenndthagen Commented Jun 16, 2011 at 18:03
• Sencha touch and jQuery are worlds apart. Here's an example of extending a panel to load views inside of itself and provide a back button for navigation. dev.sencha./deploy/touch/examples/kitchensink/src/index.js Maybe you can ask a more detailed question referring to this file – Ruan Mendes Commented Jun 16, 2011 at 18:24

1 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 remend watching their introductory videos on their vimeo channel and take a look at their examples in their downloaded source code.