`
shaohan126448
  • 浏览: 115828 次
  • 来自: 北京
社区版块
存档分类
最新评论

第 4 章把表单和输入控件都改成ext的样式。

阅读更多

4.1. 不用ext的form啊,不怕错过有趣的东西吗?

 

初看那些输入控件,其实就是修改了css样式表而已。你打开firebug看看dom,确实也是如此,从这点看来,似乎没有刻意去使用ext的必要,诚然,如果单单要一个输入框,不管添入什么数据,就点击发送到后台,的确是不需要ext呢。

你不想用一些默认的数据校验吗?你不想在数据校验失败的时候,有一些突出的提示效果吗?你不想要超炫的下拉列表combox吗?你不想要一些你做梦才能朦胧看到的选择控件吗?唉,要是你也像我一样禁不起诱惑,劝你还是随着欲望的节拍,试一下ext的form和输入控件。

4.2. 慢慢来,先建一个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。

4.3. 胡乱扫一下输入控件

 

兄弟们应该都有html开发的经验了,像什么input用的不在少数了,所以咱们在这里也不必浪费唾沫,大概扫两眼也知道ext的输入控件是做什么的。

  1. 像TextField,TextArea,NumberField这类当然是可以随便输入的了。

  2. ComboBox,DateField继承自TriggerField。他们长相差不多,都是一个输入框右边带一个图片,点击以后就跳出一大堆东西来让你选择,输入框里头显示的是你选中的东西。

  3. Checkbox和Radio,ext没有过多封装,基本上还是原来的方式。

  4. Button,这个东东其实就是一个好看的div,跟comboBox一样,不是对原有组件的美化,而是重新做的轮子。你可以选择用以前那种难看的type="button",还是用咱们漂亮的div,看你的爱好了。type="submit"和type="reset"也一样没有对应的组件,都使用Button好了。

  5. 文件上传框,type="file",因为浏览器的安全策略,想上传文件,必须使用type="file",而且我们不能使用js修改上传框的值,所以非常郁闷,目前的方式是把它隐藏起来,然后在点击咱们漂亮的Button时,触发上传框的点击事件,从而达到上传的目的。在这方面extjs.com论坛上有不少实现上传的扩展控件,咱们可以参考一下。

4.4. 起点高撒,从comboBox往上蹦。

 

我觉得像TextField啊,TextArea啊,都是在原来的东西上随便加了几笔css弄出来的,大家都会用,所以没什么大搞头,最后综合起来一说就ok了。而这个comboBox跟原有的select一点儿关系都没有,完全是用div重写画的。所以,嘿嘿~

耳听为虚,眼见为实,先看看所谓的comboBox究竟是个什么模样。

漂亮不?漂亮不?怎么看都比原生select强哟。啦啦啦,咱们看看代码撒。不过呢,comboBox支持两种构造方式,一一看来。

4.4.1. 凭空变出个comboBox来。

 

>

4.4.2. 把select变成comboBox。

 

4.4.3. 破例研究下comboBox的内在本质哟

 

4.4.4. 嘿嘿~本地的做完了,试试远程滴。

 

4.4.5. 给咱们的comboBox安上零配件

 

4.4.6. 每次你选择什么,我都知道

 

4.4.7. 露一小手,组合上面所知,省市县三级级联。哈哈~

 

这是一个相当典型的案例,以前经常用select做,现在用comboBox实现的效果又会如何呢?

4.4.7.1. 先做一个模拟的,所有数据都在本地

 

4.4.7.2. 再做一个有后台的,需要放在服务器上咯

 

4.5. 还要做,字段验证呀,表单提交啊,表单布局咯,文件上传哟

分享到:
评论

相关推荐

    EXT2.0 简明教程!(chm)

    把表单和输入控件都改成ext的样式。 第 5 章 雀跃吧!超脱了一切的弹出窗口。 第 6 章 奔腾吧!让不同的浏览器里显示一样的布局。 第 7 章 低鸣吧!拖拽就像呼吸一样容易。 第 8 章 哭泣吧!现在才...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    form表单日期输入控件

    在网页设计和开发中,`form` 表单是用户与服务器进行数据交互的重要组成部分,而日期输入控件则是表单中常见的一种元素,用于收集用户的日期或时间信息。在HTML5中,引入了内置的日期输入类型,使得创建和处理日期...

    基于Ext2的日历控件和IP地址输入控件.zip

    在这个场景中,我们关注的是两个特定的前端组件:基于Ext2的日历控件和IP地址输入控件。 Ext2是一个JavaScript库,主要用于创建富客户端应用。它提供了一套完整的组件和工具,使得开发者可以构建功能丰富的、用户...

    基于Ext2的日历控件和IP地址输入控件

    本主题聚焦于基于Ext2的日历控件和IP地址输入控件的实现,这是EXTJS库的一个实例,EXTJS是一个强大的JavaScript库,特别适用于创建富客户端应用。 EXTJS 2.2版本是EXTJS的早期版本,尽管现在已经有更新的版本,但...

    Ext控件大全,适合新手学习

    根据提供的文件信息,我们可以深入探讨Ext控件的相关知识点。标题提到的是“Ext控件大全”,并且描述中指出这些资料非常适合IT人士尤其是新手学习使用。接下来,我们将基于此内容详细解析Ext控件的基础知识、应用...

    ext日期时间控件2

    EXT日期时间控件2是一款基于EXT JavaScript库的高级UI组件,专为网页应用设计,用于提供用户友好的日期和时间选择功能。EXT是一个强大的前端框架,由Sencha公司开发,广泛应用于构建富互联网应用程序(RIA)。EXT的...

    ext3.0所有控件演示代码

    2. 表单(Form):EXT3.0的表单组件允许开发者创建复杂的数据输入界面,包括文本框、下拉框、复选框、单选按钮等多种控件。`Ext.form.FormPanel`是表单的基础,通过`items`属性添加字段,`fields`定义字段配置。表单...

    数据库系统及应用第9章-表单与控件.ppt

    数据库系统及应用第9章-表单与控件 本节主要讲解了数据库系统及应用中表单和控件的设计及应用,旨在帮助读者掌握Visual FoxPro中表单和控件的使用方法。下面是本节的知识点总结: 1. 表单设计的主要内容:表单设计...

    EXT 表单验证EXT 表单验证

    4. **错误提示**:EXT表单可以展示错误图标和消息,帮助用户理解为什么输入无效。错误信息可以通过`msgTarget`属性控制显示位置,如在字段旁边(side),下方(under)或者浮层提示(qtip)。 5. **表单级验证**:...

    VFP通过在表单或表单内的控件上按下鼠标左键来移动表单

    标题中的“VFP通过在表单或表单内的控件上按下鼠标左键来移动表单”指的是在Visual FoxPro(VFP)编程环境中,如何实现一个特殊功能,即允许用户通过点击表单上的任何控件,而不仅仅是标题栏,来移动整个表单的位置...

    ext表单

    EXT JS是一个强大的JavaScript库,提供了一系列组件化的UI控件,包括各种类型的表单元素,如文本框、下拉框、复选框、日期选择器等,以及数据绑定和验证功能,使得开发者可以构建出具有桌面应用般体验的Web应用。...

    ext 日期时间控件

    在EXT中,日期时间控件(DateTimeField)是一个非常实用的组件,允许用户选择日期和时间,从而提高用户体验和数据输入的准确性。EXT提供了丰富的UI组件,包括表格、面板、窗口、表单等,而日期时间控件则是表单组件...

    Ext .net控件

    通过将Ext JS的功能集成到.NET控件中,开发人员可以利用.NET的强大后端功能和Ext JS的前端用户界面组件,实现高效的开发流程。 1. **什么是Ext JS?** Ext JS是一个开源的JavaScript库,专门用于构建富互联网应用...

    EXT 时间控件

    4. **样式可定制**:EXT 提供了丰富的主题,开发者可以通过CSS来调整时间控件的外观以符合整体应用的风格。 5. **事件绑定**:可以监听用户的选中事件,获取选定的日期和时间,并进行相应的业务处理。 6. **无障碍...

    Ext简明教程

    第 1 章 闪烁吧!看看extjs那些美丽的例子。 第 2 章 震撼吧!让你知道ext表格控件的厉害。 第 3 章 歌颂吧!只为了树也要学ext。 第 4 章 祝福吧!把表单和输入控件都改成ext的样式。 。。。。

    ext4 时间控件 ext4.1时间

    4. 集成到表单:将时间控件添加到表单(FormPanel)中,与其他字段一起收集用户输入的数据。 压缩包中的"datetime"文件可能是这个时间控件的源代码或者示例文件,包含了实现这一功能的关键代码和示例。开发者可以...

    Javascript密码输入控件

    为了防止某些攻击,开发者可以限制输入的字符类型,比如禁止输入非字母数字字符,或者限制连续的相同字符。 8. **密码重置** 提供一个“忘记密码”功能,通常会引导用户通过电子邮件或手机短信接收验证码,然后用...

    Ext DateField控件 - 只选择年月

    "Ext DateField控件 - 只选择年月"这个主题聚焦于一个特定的UI组件,用于帮助用户仅选择日期中的年份和月份部分,而忽略具体的日期。这在处理诸如生日、合同有效期等只需要年月信息的场景时非常有用。 Ext JS是一个...

Global site tag (gtag.js) - Google Analytics