`
liss
  • 浏览: 842704 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Ext.form.*使用技巧

阅读更多

设置表单控件为只读:
  1. setFieldReadOnly = function(f, bReadOnly) {
  2.     if (f instanceof Ext.form.ComboBox) {
  3.         f.setEditable(!bReadOnly);
  4.         if (bReadOnly) {
  5.             f.expandOrg = f.expand;
  6.             f.expand = function() {
  7.             };
  8.         } else {
  9.             f.expand = f.expandOrg;
  10.         }
  11.     } else {
  12.         f.getEl().dom.readOnly = bReadOnly;
  13.         if (bReadOnly)
  14.             f.getEl().addClass('x-form-readonly');
  15.         else
  16.             f.getEl().removeClass('x-form-readonly');
  17.     }
  18. };
复制代码
抑制表单提交:
  1. disableEnter = function() {
  2.     Ext.select('input').on('keypress', onEnterkey);
  3.     Ext.select('select').on('keypress', onEnterkey);
  4. }
  5. onEnterkey = function(e) {
  6.     if (e.getKey() == e.ENTER && e.target.type != null) {
  7.         if (e.target.type != 'submit' && e.target.type != 'button'
  8.             && e.target.type != 'textarea') {
  9.             e.stopEvent();
  10.         }
  11.     }
  12. }
复制代码
追加表单验证的规则:
  1. Ext.apply(Ext.form.VTypes, {
  2.     hankaku : function(v) {
  3.         var R = /^[ -~。-゚]*$/;
  4.         return R.test(v)
  5.     },
  6.     hankakuText : '只允许半角。',
  7.     hankakuMask : /[ -~。-゚]/i
  8. });
复制代码
使用Ext.Element的mask方法,把fieldset的一部分做控件为不可输入。
  1. var fieldset = Ext.get('fieldset');
  2. fieldset.on('keydown', function(e) {
  3.     e.stopEvent();
  4. });
  5. fieldset.mask();
  6. // 解除
  7. fieldset.unmask();
  8. fieldset.un('keydown', function(e) {
  9.     e.stopEvent();
  10. });
复制代码

分享到:
评论

相关推荐

    EXT dojochina文本框示例Ext.form.TextField.rar

    通过查看这些示例,可以更深入地理解EXT框架中文本框组件的功能和使用技巧。 总的来说,`Ext.form.TextField`是EXT框架中不可或缺的一部分,它提供了一种简单且灵活的方式来创建和管理用户输入,是构建Web表单和...

    Ext.js教程和Ext.js API

    通过结合中文API文档和教程,开发者可以全面掌握Ext.js 3.0的使用,从而构建出高效、用户体验良好的Web应用程序。虽然现在有更新的版本(如Ext JS 7.x),但学习旧版本有助于理解框架的发展历程,同时许多核心概念在...

    ExtJs学习笔记,共30讲

    3. **Ext.form概述**:介绍了ExtJs的表单组件,包括文本框、下拉框、复选框、按钮等,以及如何创建、验证和处理表单数据。 4. **Ext.TabPanel篇**:讲解了如何使用TabPanel组件创建多标签界面,包括添加、删除和...

    Ext 学习总结 pdf版

    - **ExtJs2.0学习笔记(Ajax篇)**:详细介绍了Ext JS 2.0版本中对AJAX的支持及其使用技巧。 - **ExtJs2.0学习笔记(Ext.data序论篇)**:这部分内容是对Ext JS 2.0中`Ext.data`模块的概述,讲解了如何管理和操作数据。...

    ExtJs中文教程

    1. **GridPanel扩展技巧** - 探讨如何通过继承和扩展现有GridPanel组件来实现更复杂的功能。 2. **带摘要的GridPanel** - 介绍如何在表格底部添加汇总信息。 3. **RowExpander** - RowExpander允许用户展开表格中...

    extJs+2.1学习笔记.pdf

    3. **Ext.form概述** ExtJS的表单组件强大而灵活,支持多种输入类型、验证、布局和提交机制。学习如何创建和操作表单是ExtJS开发的重要部分。 4. **Ext.TabPanel篇** TabPanel是用于展示多个视图的组件,每个Tab...

    Packtpub.Ext.JS.3.0.Cookbook.Oct.2009

    书中涵盖了从基础组件使用到高级功能实现的各种主题,帮助读者提升Ext JS开发技能。 在标签"Extjs"中,我们可以看出本书的核心内容。Ext JS是一个开源的JavaScript库,以其组件化开发、强大的数据绑定和丰富的UI...

    Ext combobox 下拉多选框带搜索功能

    在IT行业中,Ext JS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。...通过深入研究源码和示例,开发者可以掌握更多关于Ext JS组件自定义和优化的技巧,这对于提升Web应用的用户体验具有重要意义。

    PacktPub.Mastering.Ext.JS.Jul.2013

    1. **组件化开发**:理解Ext JS的组件模型,如何创建和使用组件,如面板(Panel)、表单(Form)、网格(Grid)等,以及如何通过布局(Layouts)管理组件的排列。 2. **数据绑定**:学习Ext JS的数据模型(Model)...

    Ext2.0 form使用实例的例程

    在这个“Ext2.0 form使用实例的例程”中,我们将深入探讨Ext 2.0的表单(form)组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色,用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...

    Ext Js权威指南(.zip.001

    7.2.10 使用浏览器存储的代理:ext.data.webstorageproxy、ext.data. sessionstorageproxy和ext.data.proxy.localstorage / 314 7.3 读取和格式化数据 / 315 7.3.1 概述 / 315 7.3.2 数据的转换过程:ext.data....

    Ext JS 3.0 Cookbook[PDF英文版]

    **Ext JS 3.0 Cookbook** 是一本专为Web开发者设计的专业指南,专注于使用Ext JS 3.0框架进行富互联网应用(RIA)的开发。这本书以英文编写,旨在帮助开发者充分利用该框架的强大功能,提升JavaScript编程技能,尤其...

    Ext JS 6 by Example翻译

    书中会分享最佳实践,如如何构建可扩展的应用架构,以及使用Ext.app.Application进行应用程序的初始化。 **9. 扩展和自定义** 学习如何创建自定义组件、扩展内置组件或创建新的布局,可以帮助开发者满足特定项目...

    用ext来登录的程序代码

    ### 使用Ext进行登录功能开发详解 #### 一、前言 在现代Web应用开发中,登录功能是非常基础且重要的组成部分。对于初学者来说,如何利用Ext框架实现一个完整的登录功能可能会遇到不少挑战。本文将通过一份示例代码...

    [深入浅出Ext.JS.徐会生&何启伟&康爱媛)附录.pdf

    - **性能优化技巧**:分享在实际项目中遇到的性能问题及相应的解决方案。 - **最佳实践**:总结了开发过程中的经验和教训,为读者提供实用的指导建议。 综上所述,《深入浅出Ext.JS》这本书不仅覆盖了Ext JS的基础...

Global site tag (gtag.js) - Google Analytics