来自于《sencha touch 权威指南》

-------------------------------

一、网站结构

二、index.html代码

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>sencha touch</title>
  6. <link rel="stylesheet" type="text/css" href="css/sencha-touch.css" />
  7. <script type="text/javascript" src="sencha-touch-debug.js"></script>
  8. <script type="text/javascript" src="app.js"></script>
  9. <style type="text/css">
  10. .bgpink{background-color: #ccc;}
  11. .smallfont{font-size: small;}
  12. .dis {color: red;background-color: yellow;}
  13. </style>
  14. </head>
  15. <body>
  16.  
  17. </body>
  18. </html>

三、app.js代码

  1. Ext.require(['Ext.form.Panel','Ext.form.FieldSet','Ext.field.Text']);
  2. Ext.application({
  3.     name: 'MyApp',
  4.     icon: 'images/icon.png',
  5.     glossOnIcon: false,
  6.     phoneStartupScreen: 'images/phone_startup.png',
  7.     tabletStartupScreen: 'images/tablet_startup.png',
  8.     launch: function(){
  9.         var formPanel = Ext.create('Ext.form.Panel',{
  10.             id: 'formPanel',
  11.             scrollable: 'vertical',
  12.             baseCls: 'bgpink',
  13.  
  14.             items:[{
  15.                 xtype: 'fieldset',
  16.                 title: '电影信息',
  17.                 instructions: '请填写电影信息',
  18.                 defaults:{
  19.                     labelwidth: '20%',
  20.                 },
  21.                 items: [{
  22.                     xtype: 'textfield',
  23.                     id: 'txt_title',
  24.                     name: 'title',
  25.                     label: '标题',
  26.                     placeHolder: '请输入电影标题',
  27.                     required: true,
  28.                     clearIcon: true,
  29.                     listeners:{
  30.                         change:function(item,newValue,oldValue){
  31.                             console.log("修改前的值为" + oldValue);
  32.                             console.log("修改后的值为" + newValue);
  33.                         }
  34.                     }
  35.                 },{
  36.                     xtype: 'textfield',
  37.                     id: 'txt_director',
  38.                     name: 'director',
  39.                     label: '导演',
  40.                     placeHolder: '请输入导演名称',
  41.                     clearIcon: true
  42.                 }]
  43.             }]
  44.         });
  45.         Ext.Viewport.add(formPanel);
  46.  
  47.         formPanel.getScrollable().getScroller().getFps(100);
  48.         formPanel.getScrollable().getScroller().scrollTo(0,200);
  49.         formPanel.getScrollable().getScroller().scrollToEnd();
  50.     }
  51. });

四、页面访问显示如下

-----------------------------

遇到的问题：

（1）、labelwidth 配置选项：值改变时，前台显示没有什么。不明白控制什么

（2）、disabledCls 配置选项：不起作用

（3）、Cls 配置选项：不起作用

sencha表单入门例子的更多相关文章

  1. HTML表单入门基础

    网页镶嵌: <iframe src="http://www.cnblogs.com/tfl-511/" width="200" height=" ...

  2. django最简单表单入门

    两个html页面,存放于某个应用下的templates文件夹下. index.html 提交 点击“提交”按钮后,会调入第二个页面hello.html显示文本框的内容 原理是通过form的action ...

  3. spring mvc 提交表单的例子

    1. 构建MAVEN项目,然后转换成web格式,结构图如下: 2. 通过@RequestMapping来进行配置,当输入URL时,会以此找到对应方法执行,首先调用setupForm方法,该方法主要是生 ...

  4. php提交表单校验例子

    <!DOCTYPE HTML> <meta http-equiv="Content-Type" content="text/html; charset= ...

  5. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  6. 从浅入深剖析angular表单验证

    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...

  7. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. Bootstrap表单验证插件bootstrapValidator使用方法整理

    插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...

  9. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

随机推荐

  1. L3-008 喊山 （30 分）

    喊山,是人双手围在嘴边成喇叭状,对着远方高山发出“喂—喂喂—喂喂喂……”的呼唤.呼唤声通过空气的传递,回荡于深谷之间,传送到人们耳中,发出约定俗成的“讯号”,达到声讯传递交流的目的.原来它是彝族先民用 ...

  2. springmvc中拦截器与springmvc全局异常处理器的问题

    最近在做一个练手的小项目, 系统架构中用了springmvc的全局异常处理器, 做了系统的统一异常处理. 后来加入了springmvc的拦截器, 为了一些需求, 在拦截器中的 preHandle 方法 ...

  3. excel oracle字段命名（大写下划线分词）转 驼峰命名

    干货: (帕斯卡) =LEFT(C251,1)&MID(SUBSTITUTE(PROPER(C251),"_",""),2,100) (驼峰) =LOW ...

  4. ASP.NET 2.0缓存

    MSDN上缓存概述: http://msdn2.microsoft.com/zh-cn/library/726btaeh(VS.80).aspx 一.页输出缓存 1.设置 ASP.NET 页缓存的两种 ...

  5. 浪潮各机型管理芯片BMC IP（智能平台管理接口）设置

    NF5240m3/NF5140m3/NF5280m3/SA5212H2/NP5540M3NF5270M3/NF5170M3/NF8420m3 IPMI主板集成管理芯片BMC IP 设置开机按DEL键进 ...

  6. ajax同步异步

    test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js f ...

  7. Ubuntu15.10下Hadoop2.6.0伪分布式环境安装配置及Hadoop Streaming的体验

    Ubuntu用的是Ubuntu15.10Beta2版本,正式的版本好像要到这个月的22号才发布.参考的资料主要是http://www.powerxing.com/install-hadoop-clus ...

  8. rmmod: can't change directory to '/lib/modules': No such file or directory

    [root@iTOP-4412]# mount /dev/sda1 /mnt/udisk/ [root@iTOP-4412]# insmod /mnt/udisk/linux/hello.ko  [ ...

  9. 微信H5支付 EasyWechat

    其中如果想在一个laravel中使用多个不同主题的支付账户,可以在方法实例对象时,将对应的参数进行修改配置. 其中小程序支付,已得到验证. 1.公众号支付等资格申请 2.公众号对应的支付商户主体申请 ...

  10. C#将字符串数组转换为以逗号分隔的字符串

    , tyt, gff }; string str=string.Join(",",array);