创建第一个sencha touch例子

来源：互联网发布：云计算概念股龙头股编辑：程序博客网时间：2024/05/24 22:45

第一步：在myeclipse 上 new 一个 web project，Project Name 命名为 touch；

第二步：在WebRoot 目录下新建一个文件夹senchaTouch，用来存放sencha touch下载包的相关文件。文件目录如下所示：

css文件夹下存放sencha-touch.css【在原下载包的根目录/resources/css目录下】

src文件夹是sencha touch的源代码【在原下载包的根目录下的src文件夹】

sencha-touch-debug.js可以精确定位调试脚本文件中存在错误的地方【在原下载包的根目录下】

第三步：

新建index.js 文件，代码如下：

Ext.Loader.setPath({'Ext.from' : 'js/src/form'});Ext.require('Ext.form.Panel');Ext.application({launch:function(){Ext.create('Ext.Container',{id:'loginContainer',fullscreen:true,items:[{xtype:'textfield',label:'User Name'},{xtype:'textfield',label:'password',inputType:'password'}]});var container = Ext.ComponentQuery.query('#loginContainer')[0];container.add({xtype:'checkboxfield',label:'Remember PWD'});//添加控件container.insert(0,{xtype:'textfield',label:'UserName2'});//插入控件}});

第四步：

在index.jsp中写入以下代码：

<link rel="stylesheet" type="text/css" href="senchaTouch/css/sencha-touch.css"><script type="text/javascript" src="senchaTouch/sencha-touch-debug.js"></script><script type="text/javascript" src="index.js"></script>

第五步：

运行程序，在Chrome浏览器中输入以下网址：http://localhost:8080/touch/index.jsp

即可查看界面效果：

0 0