SenchaTouch是一个很不错的移动客户端框架，最近学习它的from部分，记录下code以备后查。
一开始就被那优雅的界面迷住了，研究了一段ExtJs（Sencha），现在看客户端的代码有种似曾相识的感觉。一起开始吧！
1.第一步，当然还是引入基础的JS包，简单起见，我们引入了基本全部的资源。
2.第二步，当然是在页面引入js和css文件
<head> <link rel="stylesheet" href="SenchaTouch2.3.1-gpl/resources/css/sencha-touch.css" type="text/css"/> <script type="text/javascript" src="SenchaTouch2.3.1-gpl/sencha-touch-debug.js"></script> <script type="text/javascript" src="js/app.js"></script> <style type="text/css"> .bgColor{ background-color:prink; } </style> </head>
3.第三步，写Js代码
Ext.require(['Ext.Panel','Ext.form.FieldSet','Ext.field.Text','Ext.form.Panel']); Ext.application({ name:'MyApp', icon:'images/icon.png', // 用于指定应用程序被添加到使用ios操作系统的设备中的主屏幕时所使用的图片，可配ipad和iPhone不同图标 glossOnIcon:false, // 是否取消ios操作系统中为主屏幕中的图标自动添加的gloss特效 phoneStartupScreen:'images/phone_startup.png', // 用于指定应用程序被添加到ios主屏幕之后应用程序启动时所显示的图片 // 必须320X640 tabletStartupScreen:'images/tablet_startup.png', // 用于指定添加到ios系统主屏幕后应用程序启动时所显示的图片 // 必须769X1004 launch:function(){ // 定义表单面板------------------------------------------- var formPanel = Ext.create('Ext.form.Panel',{ id:'formPanel', scrollable:'vertical', // (horizontal横向)是否允许滚动，纵向 baseCls:'bgPink', // 设置基本样式(以背景为例) cls:'smallFont', // 设置基本样式(以字体为例) items:[{ xtype:'fieldset', title:'电影信息', // 标题 instructions:'请填写电影信息',// 描述 defaults:{ label'10%', xtype:'textfield' }, items:[{ id:'txt_title', name:'title', label:'名称', // 设置标签名 labelAlign:'left', // 设置标签位置,默认left（top,right,bottom） placeHolder:'请输入电影名称',// 未输入内容且失去焦点时显示值 required:true, // 只能起到提示作用，不提供验证功能 clearIcon:true, // 不为空时显示一个清除内容图标 listeners:{ // 增加监听器 change:function(item,newValue,oldValue){ console.log('修改之前为:'+oldValue); console.log('修改之后为:'+newValue); } } },{ id:'txt_director', name:'director', label:'导演', placeHolder:'请输入导演名称', clearIcon:true },{ id:'txt_type', name:'type', label:'类型', value:'爱情', // 值属性 readOnly:true // 只读属性 },{ id:'txt_date', name:'date', label:'年代', value:'2013年', // 值属性 disabled:true, // 禁用属性 disabledCls:'disabled' // 设置组件处于无效状态样式 }] }] }); // ————组件测试———————————————————————————————————————————————————————————————————————————————— Ext.Viewport.add(formPanel); formPanel.getScrollable().getScroller().setFps(100);// 此句有问题 formPanel.getScrollable().getScroller().scrollTo(0,200); formPanel.getScrollable().getScroller().scrollToEnd();//页面打开时表单面板自动滚动到表单底部 } });
4.查看运行出来的效果。如下图：
效果还很不错，很简约啊！~html5真强大。
上面的例子仅仅是一些简单的页面元素，下面再来几个看看。
这个示例里面多了不少form元素，下面瞅瞅代码吧~！
Ext.require(['Ext.MessageBox','Ext.Panel','Ext.form.FieldSet','Ext.field.*','Ext.form.Panel']); Ext.application({ name:'MyApp', icon:'images/icon.png', // 用于指定应用程序被添加到使用ios操作系统的设备中的主屏幕时所使用的图片，可配ipad和iPhone不同图标 glossOnIcon:false, // 是否取消ios操作系统中为主屏幕中的图标自动添加的gloss特效 phoneStartupScreen:'images/phone_startup.png', // 用于指定应用程序被添加到ios主屏幕之后应用程序启动时所显示的图片 // 必须320X640 tabletStartupScreen:'images/tablet_startup.png', // 用于指定添加到ios系统主屏幕后应用程序启动时所显示的图片 // 必须769X1004 launch:function(){ // 定义表单面板------------------------------------------- var formPanel = Ext.create('Ext.form.Panel',{ id:'formPanel', scrollable:'vertical', // (horizontal横向)是否允许滚动，纵向 baseCls:'bgPink', // 设置基本样式(以背景为例) cls:'smallFont', // 设置基本样式(以字体为例) items:[{ xtype:'fieldset', title:'用户信息', // 标题 instructions:'请填写用户信息',// 描述 defaults:{ label'10%' }, items:[{ xtype:'textfield', id:'txt_name', name:'name', label:'姓名', // 设置标签名 labelAlign:'left', // 设置标签位置,默认left（top,right,bottom） placeHolder:'请输入姓名',// 未输入内容且失去焦点时显示值 required:true, // 只能起到提示作用，不提供验证功能 clearIcon:true // 不为空时显示一个清除内容图标 },{ xtype:'passwordfield', id:'txt_password', name:'password', label:'密码', placeHolder:'请输入密码', clearIcon:true },{ xtype:'spinnerfield', id:'spn_age', name:'age', label:'年龄', minValue:0, // 最小值 maxValue:9, // 最大值 stepValue:1, // 步进值 // groupButtons:false, // 默认为true.为false+-各一边 cycle:true // 达到最大从最小循环 },{ xtype:'radiofield', id:'txt_sex1', name:'sex', label:'男性', value:'male', checked:true, // 默认选中 listeners:{ check:function(item,e){ console.log('您选择了：男性'); } } },{ xtype:'radiofield', id:'txt_sex2', name:'sex', label:'女性', value:'female', checked:false, // 默认不选中 listeners:{ check:function(item,e){ console.log('您选择了：女性'); } } },{ xtype:'checkboxfield', id:'txt_hobby1', name:'hobby', label:'篮球', value:'ball', checked:true // 默认选中状态 },{ xtype:'checkboxfield', id:'txt_hobby2', name:'hobby', label:'足球', value:'ball', checked:false // 默认选中状态 },{ xtype:'selectfield', id:'txt_select', name:'select', label:'课程', options:[{ text:'语文', value:'1' },{ text:'数学', value:'2' },{ text:'英语', value:'3' }], listeners:{ change:function(select,newValue,oldValue){ console.log(newValue); switch(newValue){ case '1': Ext.Msg.alert('你选择了语文'); break; case '2': Ext.Msg.alert('你选择了数学'); break; case '3': Ext.Msg.alert('你选择了英语'); break; } } } },{ xtype:'emailfield', id:'txt_email', name:'email', label:'Email', placeHolder:'请输入有效的Email地址', clearIcon:true },{ xtype:'urlfield', id:'txt_url', name:'url', label:'个人网址', placeHolder:'请输入有效的网址', clearIcon:true },{ xtype:'textareafield', id:'txt_textarea', name:'memo', label:'个人简介', maxLength:1000, // 最大字数 maxRows:4, // 超过此行数会有滚动条 placeHolder:'请输入1000字以内的个人简介', clearIcon:true },{ xtype:'searchfield', id:'txt_search', name:'search', label:'检索', placeHolder:'请输入检索关键字', clearIcon:true }] }] }); // ————组件测试———————————————————————————————————————————————————————————————————————————————— Ext.Viewport.add(formPanel); // formPanel.getScrollable().getScroller().setFps(100);// 此句有问题 formPanel.getScrollable().getScroller().scrollTo(0,200); formPanel.getScrollable().getScroller().scrollToEnd();//页面打开时表单面板自动滚动到表单底部 //设置值，有问题 // formPanel.getComponent('txt_sex1').setGroupValue('female'); } });
如果一些selectfield的值较多，可以来自本地Store也可以来自Proxy。
部分代码如下：
launch:function(){ // 定义genre Ext.define('genre', { extend : 'Ext.data.Model', config : { fields : [ { name : 'id', type : 'int' }, { name : 'genre', type : 'string' } ] } }); // 本地数据 var genreStore = Ext.create('Ext.data.Store',{ model:'genre', data:[ // 数据集，记录 {id:1,genre:'喜剧'}, {id:2,genre:'韩剧'}, {id:3,genre:'美剧'} ] }); // 定义表单面板------------------------------------------- var formPanel = Ext.create('Ext.form.Panel',{ id:'formPanel', scrollable:'vertical', // (horizontal横向)是否允许滚动，纵向 baseCls:'bgPink', // 设置基本样式(以背景为例) cls:'smallFont', // 设置基本样式(以字体为例) items:[{ xtype:'fieldset', title:'电影信息', // 标题 instructions:'请填写电影信息',// 描述 defaults:{ label'10%' }, items:[{ id:'txt_title', name:'title', label:'名称', // 设置标签名 labelAlign:'left', // 设置标签位置,默认left（top,right,bottom） placeHolder:'请输入电影名称',// 未输入内容且失去焦点时显示值 required:true, // 只能起到提示作用，不提供验证功能 clearIcon:true, // 不为空时显示一个清除内容图标 listeners:{ // 增加监听器 change:function(item,newValue,oldValue){ console.log('修改之前为:'+oldValue); console.log('修改之后为:'+newValue); } } },{ xtype:'textfield', id:'txt_director', name:'director', label:'导演', placeHolder:'请输入导演名称', clearIcon:true },{ id:'txt_genre', xtype:'selectfield', // 选取框 name:'genre', label:'类型', valueField:'id', // 实际信息 displayField:'genre', // 展示信息 store:genreStore // 存储store },{ xtype:'textfield', id:'txt_date', name:'date', label:'年代', value:'2013年', // 值属性 disabled:true, // 禁用属性 disabledCls:'disabled' // 设置组件处于无效状态样式 }] }] });
能实现相同的效果，有更加灵活的代码风格。