sencha表单入门例子
来自于《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表单入门例子的更多相关文章
- HTML表单入门基础
网页镶嵌: <iframe src="http://www.cnblogs.com/tfl-511/" width="200" height=" ...
- django最简单表单入门
两个html页面,存放于某个应用下的templates文件夹下. index.html 提交 点击“提交”按钮后,会调入第二个页面hello.html显示文本框的内容 原理是通过form的action ...
- spring mvc 提交表单的例子
1. 构建MAVEN项目,然后转换成web格式,结构图如下: 2. 通过@RequestMapping来进行配置,当输入URL时,会以此找到对应方法执行,首先调用setupForm方法,该方法主要是生 ...
- php提交表单校验例子
<!DOCTYPE HTML> <meta http-equiv="Content-Type" content="text/html; charset= ...
- AngularJS快速入门指南13:表单
一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...
- 从浅入深剖析angular表单验证
最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
随机推荐
- 好用的python第三方库
参考连接:http://python.jobbole.com/84464/ https://www.zhihu.com/question/20501628 python每日技术更新:https://g ...
- webpack新版本4.12应用九(配置文件之多种配置类型)
除了导出单个配置对象,还有一些方式满足其他需求. 导出为一个函数 最终,你会发现需要在开发和生产构建之间,消除 webpack.config.js 的差异.(至少)有两种选项: 作为导出一个配置对象的 ...
- python SQLAlchemy自动生成models文件
1.安装SQLAcodegen pip install sqlacodegen 2.执行 sqlacodegen mysql://root:123456@127.0.0.1:3306/test > ...
- C#合成解析XML与JSON
http://www.xuanyusong.com/archives/1901 XML与JSON在开发中非常重要, 其实核心就是处理字符串.一个是XML的字符串一个是JSON的字符串,尤其是在处 ...
- Java各种集合容器的总结
Java容器指的是List,Set,Map这些类.由于翻译的问题,问到集合,Collection这些指的都是它们几个. List ArrayList 随机访问快 LinkedList 插入删除快 这个 ...
- HTTP/HTTPS原理详解
简介 HTTP(Hypertext Transfer Protocal,超文本传输协议)是WWW(World Wide Web,万维网)数据传输的基础,规定如何传输超文本.HTTP协议存在多个版本:H ...
- OpenLiveWriter 这篇文章使用博客客户端撰写
OpenLiveWriter是非常方便的博客客户端,起码相比在浏览器写博客多了一种选择.而且借助于MetaWeblog接口,可以很方便地同步博客文章到多个博客地址.本站cms.xlongwei.com ...
- Maven入门----MyEclipse创建maven项目(二)
新建项目: Next next next 新建项目后,MyEclipse会自动从远程仓库中下载支持包,需要几分钟左右时间. 项目结构图: HelloWorld.java public class He ...
- 1122 Hamiltonian Cycle
题意:包含图中所有结点的简单环称为汉密尔顿环.给出无向图,然后给出k个查询,问每个查询是否是汉密尔顿环. 思路:根据题目可知,我们需要判断一下几个条件:(1).首先保证给定的环相邻两结点是连通的:(2 ...
- Docker构建ssh镜像
FROM ubuntu MAINTAINER ggzone xxx@live.com ENV REFRESHED_AT 2015-10-21 RUN apt-get -qqy update & ...