来自于《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. Robot Framework接口测试（2）--http请求之get

    本来打算把http发送请求的get和post方法都介绍一下的,结果发现篇幅有点长,文本编辑也变得混乱,所以这里先介绍一下get方法,下一次再post.其实这些方法大家可以看一下源码里面的介绍只需要在代 ...

  2. 对Servlet规范的蜻蜓点水

    现在我们大家基本都用struts或springmvc进行java web的开发,但我们都知道java web的核心技术是jsp servlet javabean的组合.因此很有必要知道servlet规 ...

  3. 一线互联网公司必备——最为详细的Docker入门吐血总结

    在计算机技术日新月异的今天, Docker 在国内发展的如火如荼.     特别是在一线互联网公司 Docker 的使用是十分普遍的,甚至成为了一些企业面试的加分项,不信的话看看下面这张图.     ...

  4. 使用微软的MSBuild.exe编译VS .sln .csproj 文件

    最近在看一些算法和测试一些程序,以及帮团队测试程序,团队使用了vs开发环境创建的sln项目文件,我使用的是公司的机器,没有任何权限安装程序等操作,但是又需要编译一些程序,所以我想到了,使用MSBuil ...

  5. Redis、Memcache和MongoDB

    一.Memcached Memcached的优点:Memcached可以利用多核优势,单实例吞吐量极高,可以达到几十万QPS(取决于key.value的字节大小以及服务器硬件性能,日常环境中QPS高峰 ...

  6. 初识C++ 中的STL

    首先,STL是指standard template library,即C++标准模板库,也叫泛型库. STL提供了三种类型的组件:容器,迭代器和算法,他们都支持泛型程序设计标准. (一)容器: 分为: ...

  7. mysql事务隔离级别测试

    隔离性mysql提供了4种不同的隔离级别以支持多版本并发控制(MVCC)较低级别的隔离通常可以执行更高的并发,系统的开销也更低read uncommited(未提交读)read commited(提交 ...

  8. (转)Oracle中动态SQL详解

    本文转载自:http://www.cnblogs.com/gaolonglong/archive/2011/05/31/2064790.html 1．静态SQLSQL与动态SQL Oracle编译PL ...

  9. 利用ffmpeg一步一步编程实现摄像头采集编码推流直播系统

    了解过ffmpeg的人都知道,利用ffmpeg命令即可实现将电脑中摄像头的画面发布出去,例如发布为UDP,RTP,RTMP等,甚至可以发布为HLS,将m3u8文件和视频ts片段保存至Web服务器,普通 ...

  10. java代码-----------java中的windowAdapter的实例

    总结:我知道他是一专多能型.很优秀~~~~~~~~~~~.好幸福啊 package com.a.b; import java.awt.Color; import java.awt.event.Wind ...