创建第一个sencha touch例子-蒲公英云

创建第一个sencha touch例子

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

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

Center

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>