来自于《sencha touch 权威指南》

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

一、网站结构

二、index.html代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>sencha touch</title>

<link rel="stylesheet" type="text/css" href="css/sencha-touch.css" />

<script type="text/javascript" src="sencha-touch-debug.js"></script>

<script type="text/javascript" src="app.js"></script>

<style type="text/css">

.bgpink{background-color: #ccc;}

.smallfont{font-size: small;}

.dis {color: red;background-color: yellow;}

</style>

</head>

<body>

</body>

</html>

三、app.js代码

Ext.require(['Ext.form.Panel','Ext.form.FieldSet','Ext.field.Text']);

Ext.application({

    name: 'MyApp',

    icon: 'images/icon.png',

    glossOnIcon: false,

    phoneStartupScreen: 'images/phone_startup.png',

    tabletStartupScreen: 'images/tablet_startup.png',

    launch: function(){

        var formPanel = Ext.create('Ext.form.Panel',{

            id: 'formPanel',

            scrollable: 'vertical',

            baseCls: 'bgpink',

            items:[{

                xtype: 'fieldset',

                title: '电影信息',

                instructions: '请填写电影信息',

                defaults:{

                    labelwidth: '20%',

                },

                items: [{

                    xtype: 'textfield',

                    id: 'txt_title',

                    name: 'title',

                    label: '标题',

                    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

                }]

            }]

        });

        Ext.Viewport.add(formPanel);

        formPanel.getScrollable().getScroller().getFps(100);

        formPanel.getScrollable().getScroller().scrollTo(0,200);

        formPanel.getScrollable().getScroller().scrollToEnd();

    }

});

四、页面访问显示如下

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

遇到的问题：

（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. HttpWebRequest传值

    From:发送方 class Program { static void Main(string[] args) { string strId = "zhangsan"; &quo ...

  2. Oracle临时表和SQL Server临时表的不同点对比

    文章来源:http://www.codesky.net/article/201109/141401.html 1.简介 Oracle数据库除了可以保存永久表外,还可以建立临时表temporary ta ...

  3. [BZOJ5290][HNOI2018]道路

    bzoj luogu sol 考场上普及\(dp\)都做不来,果然是思想僵化了. 设\(f[u][i][j]\)表示在\(u\)点,上方有\(i\)条未修复的公路和\(j\)条未修复的铁路的最小花费. ...

  4. 关于 SMT 一个重要提示

    关于 SMT 一个重要提示 温度曲线是对应的具体的PCB的最差焊盘位置处的所用焊锡膏对应的熔化曲线.从这种角度来观察,我想你会明白我的意思的. https://www.amobbs.com/forum ...

  5. unidac连接ORACLE免装客户端驱动

      当你选择Oracle作数据库服务器时,客户端一般需要装一个肥硕的200M左右客户端,而且还要做连接配置,尤其是C/S模式,客户端多的时候非常不便.当然,网上也有一个10M左右的Oracle精简客户 ...

  6. druid抛出异常：javax.management.InstanceAlreadyExistsException: com.alibaba.druid:type=DruidDataSource,id=xxx

    第一种结论 (参考: https://www.cnblogs.com/youzhibing/p/6826767.html): 问题产生的根本原因还真是:同一实例被启动了两遍,Path为/SLBAdmi ...

  7. 安装jenkins 的时候 记录默认密码文件为空的情况

    1.把文件的权限改成 chmod 777 .jenkins/secrets/initialAdminPassword  然后再使用编辑器打开,密码就出来的 密码文件的地址 /var/root/.hud ...

  8. 1050 String Subtraction

    题意:给出两个字符串s1和s2,在s1中删去s2中含有的字符. 思路:注意,因为读入的字符串可能有空格,因此用C++的getline(cin,str).PAT系统迁移之后C语言中的gets()函数被禁 ...

  9. VMware80端口映射

    目标是外网访问80端口,然后映射到虚拟机的80端口,80映射到80. 1.首先80端口是最常用的端口,要确认主机80端口是否被占用,如果被占用,停止或者修改占用80端口程序. 2.80端口默认防火墙是 ...

  10. PHP函数(三)-递归函数

    递归函数就是函数本身在内部调用自己 <?php function DiGui($n){ echo $n."  "; if($n>0) DiGui($n-1); else ...