创建第一个sencha touch例子

第一步：在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

即可查看界面效果：