创建第一个sencha touch例子

古城微笑少年丶 2022-08-06 20:28 179阅读 0赞

第一步：在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中写入以下代码：

第五步：

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

即可查看界面效果：

![Center 1][]

[Center]: /images/20220805/7205804646844ff2a3620b7033c81404.png
[Center 1]: /images/20220805/f832bfca4b434ae6885bccaf66987b15.png