在本章中,我们将列出在Ext JS中编写第一个Hello World程序的步骤.
创建一个我们选择的编辑器中的index.htm页面.在html页面的head部分包含所需的库文件,如下所示.
<!DOCTYPE html> <html> <head> <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" /> <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"> </script> <script type = "text/javascript"> Ext.application( { name: 'Sencha', launch: function() { Ext.create("Ext.tab.Panel", { fullscreen: true, items: [{ title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch' }] }); } }); </script> </head> <body> </body> </html>
Ext.application()方法是Sencha Touch应用程序的起点.它创建了一个名为'Sencha'的全局变量,使用name属性声明 - 所有Application的类(如Models,Views和Controllers)都将驻留在这个单独的命名空间下,这样可以减少全局变量和文件名冲突的可能性.
一旦页面准备好并且加载了所有JavaScript文件,就会调用launch()方法.
Ext.create()方法用于在Sencha Touch中创建对象.在这里,我们创建一个简单面板类Ext.tab.Panel的对象.
Ext.tab.Panel是Sencha Touch中用于创建的预定义类小组.
每个Sencha Touch类都有不同的属性来执行一些基本功能.
Ext.Panel类有各种属性,例如 :
全屏属性是使用完整的屏幕,因此面板将占据全屏空间.
items 属性是容器各种项目.
iconCls 是用于显示不同图标的类.
标题属性是为小组提供标题.
html property是要在面板中显示的html内容.
打开在标准浏览器中的index.htm文件,您将获得以下输出.