第一步:在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
即可查看界面效果: