4.1. 不用ext的form啊,不怕错过有趣的东西吗?
初看那些输入控件,其实就是修改了css样式表而已。你打开firebug看看dom,确实也是如此,从这点看来,似乎没有刻意去使用ext的必要,诚然,如果单单要一个输入框,不管添入什么数据,就点击发送到后台,的确是不需要ext呢。
你不想用一些默认的数据校验吗?你不想在数据校验失败的时候,有一些突出的提示效果吗?你不想要超炫的下拉列表combox吗?你不想要一些你做梦才能朦胧看到的选择控件吗?唉,要是你也像我一样禁不起诱惑,劝你还是随着欲望的节拍,试一下ext的form和输入控件。
var form = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 50
});
form.add(new Ext.form.TextField({
fieldLabel: '文本框'
}));
form.addButton("按钮");
form.render("form");
简单来说,就是构造了一个form,然后在里边放一个TextField,再放一个按钮,最后执行渲染命令,在id="form"的地方画出form和里边包含的所有输入框和按钮来。刷拉一下就都出来了。
不过即使这样,圆角边框可不是form自带的,稍稍做一下处理,参见html里的写法。
<div style="width:220px;margin-left:0px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">form</h3>
<div id="form"></div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
<div class="x-form-clear"></div>
开头结尾那些div就是建立圆角的,有了这些我们都可以在任何地方使用这种圆角形式了,不限于form哟。
html例子,1.x在lingo-sample/1.1.1/04-01.html
2.0里的FormPanel跟1.x里已经基本完全不一样了,咱们先看个简单例子:
代码如下:
var form = new Ext.form.FormPanel({
defaultType: 'textfield',
labelAlign: 'right',
title: 'form',
labelWidth: 50,
frame: true,
width: 220,
items: [{
fieldLabel: '文本框'
}],
buttons: [{
text: '按钮'
}]
});
form.render("form");
html里不需要那么多东西了,只需要定义一个div id="form"就可以实现这一切。明显可以感觉到初始配置更紧凑,利用items和buttons指定包含的控件和按钮。
现在先感觉一下,我们后面再仔细研究,例子见lingo-sample/2.0/04-01.html。
兄弟们应该都有html开发的经验了,像什么input用的不在少数了,所以咱们在这里也不必浪费唾沫,大概扫两眼也知道ext的输入控件是做什么的。
-
像TextField,TextArea,NumberField这类当然是可以随便输入的了。
-
ComboBox,DateField继承自TriggerField。他们长相差不多,都是一个输入框右边带一个图片,点击以后就跳出一大堆东西来让你选择,输入框里头显示的是你选中的东西。
-
Checkbox和Radio,ext没有过多封装,基本上还是原来的方式。
-
Button,这个东东其实就是一个好看的div,跟comboBox一样,不是对原有组件的美化,而是重新做的轮子。你可以选择用以前那种难看的type="button",还是用咱们漂亮的div,看你的爱好了。type="submit"和type="reset"也一样没有对应的组件,都使用Button好了。
-
文件上传框,type="file",因为浏览器的安全策略,想上传文件,必须使用type="file",而且我们不能使用js修改上传框的值,所以非常郁闷,目前的方式是把它隐藏起来,然后在点击咱们漂亮的Button时,触发上传框的点击事件,从而达到上传的目的。在这方面extjs.com论坛上有不少实现上传的扩展控件,咱们可以参考一下。
我觉得像TextField啊,TextArea啊,都是在原来的东西上随便加了几笔css弄出来的,大家都会用,所以没什么大搞头,最后综合起来一说就ok了。而这个comboBox跟原有的select一点儿关系都没有,完全是用div重写画的。所以,嘿嘿~
耳听为虚,眼见为实,先看看所谓的comboBox究竟是个什么模样。
漂亮不?漂亮不?怎么看都比原生select强哟。啦啦啦,咱们看看代码撒。不过呢,comboBox支持两种构造方式,一一看来。
4.4.2. 把select变成comboBox。
4.4.3. 破例研究下comboBox的内在本质哟
4.4.7. 露一小手,组合上面所知,省市县三级级联。哈哈~
这是一个相当典型的案例,以前经常用select做,现在用comboBox实现的效果又会如何呢?
4.4.7.1. 先做一个模拟的,所有数据都在本地
4.4.7.2. 再做一个有后台的,需要放在服务器上咯
4.5. 还要做,字段验证呀,表单提交啊,表单布局咯,文件上传哟
分享到:
相关推荐
把表单和输入控件都改成ext的样式。 第 5 章 雀跃吧!超脱了一切的弹出窗口。 第 6 章 奔腾吧!让不同的浏览器里显示一样的布局。 第 7 章 低鸣吧!拖拽就像呼吸一样容易。 第 8 章 哭泣吧!现在才...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
form表单日期输入控件,用于输入form表单中的日期时间。
EXT 表单验证EXT 表单验证EXT 表单验证EXT 表单验证EXT 表单验证
第 1 章 闪烁吧!看看extjs那些美丽的例子。 第 2 章 震撼吧!让你知道ext表格控件的厉害。 第 3 章 歌颂吧!只为了树也要学ext。 第 4 章 祝福吧!把表单和输入控件都改成ext的样式。 。。。。
form表单日期输入控件,用于输入form表单中的日期时间。
action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者servlet或者CGI(Common Gateway Interface),在asp.net里面一般都是都aspx页面来处理。 method属性指明form表单的提交方式。...
ext 相关控件用法form表单ext 相关控件用法form表单ext 相关控件用法form表单
数据库系统及应用第9章-表单与控件.ppt
紧接着对ExtJS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后一个完整的EXT应用结束全书。每个知识点都配有相应的示例,可操作性...
ext3.0中的99%的控件的用法。包括表格。表单。分页工具栏。图标等。非常的详细。可以直接运行!
使用简单,功能强大的表单验证插件。 1、验证插件支持正则表达式验证,函数验证,ajax异步验证,支持对比验证,并支持对表单的自定义属性或指定属性进行验证,应该...4、插件支持焦点进入验证,输入验证、焦点丢失验证
一个可更换表单皮肤的控件(附源码)也许可以帮助一些朋友
解决Ext遇到的基础问题,如组件的应用,Ext的布局,表单,Grid控件的讲解,还要一些综合应用
EXT异步提交FORM表单的使用和,以及EXT配合struts2,sprint2.5进行前台和后台的交互解释和运用.....
Visual FoxPro数据库课件:第7-8章 表单及控件的使用2.ppt
此资源包包含了操作Excel中的表单控件(包括添加表单控件,如文本框、单选按钮、复选框、组合框、微调按钮等;删除Excel中的指定表单控件等)的Java代码方法、测试文档、所需的类库工具以及测试的结果文档等。
表单控件-Input控件 表单控件 学习表单的核心就是学习表单控件,HTML语言提供了一系列的表单控件,用于定义不同的表单功能,如密码输入框、文本域、下拉列表、复选框等。 表单控件 表单控件常用在登录和注册模块 ...
通过在表单或表单内的控件上按下鼠标左键来移动表单 而不是通过在标题栏上按下鼠标左键来移动窗口