了解Sencha Touch语法

Question

我已经浏览了dev.sencha.com,虽然我理解Javascript/jQuery,但我不理解Sencha Touch或ExtJS中遵循的语法.

您能否提供一个关于语法工作原理或方式的示例的一般概念.还有人在尝试将Sencha touch集成到HTML/CSS Web应用程序时应该怎么想？还有什么类比jQuery？

Answer 1

Sencha Touch是Javascript.它是用JS编写的,在库中几乎没有什么神奇之处.如果您了解JS,您应该能够理解Sencha Touch.

Sencha Touch和JQuery是解决同一问题的完全不同的方式.Sencha Touch使用面向对象的编程概念比jQuery更多.同样,有些东西非常相似.在jQuery工作了这么长时间之后,你需要在接近其他Javascript库时保持开放的心态,因为jQuery没有遵循不同的概念.

图书馆也针对不同的"利基".我会说Sencha Touch更像是一个MVC库,包含UI小部件(如jQuery UI),具有多个数据抽象(ORM-lite,同步)并且碰巧有DOM操作.jQuery主要是DOM操作.

jQuery和Sench Touch是一样的:

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')})

因此,您可以看到有两种方法可以在两个库中执行类似的任务.

但是你在jQuery中无法做到的事情.就像创建一个包含旋转木马的完整浏览器窗口一样.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();

我建议在他们的vimeo频道上观看他们的介绍视频,并在他们下载的源代码中查看他们的示例,而不是在网上看他们的演示,我同意这可能非常令人困惑.