`
maomaolingyu
  • 浏览: 5936 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

extjs教程之form表单

EXTjsonJavaScriptCSS游戏 
阅读更多
<script type="text/javascript"></script><script type="text/javascript"></script>

csdn-link:http://blog.csdn.net/maomaolingyu/archive/2010/12/21/6089307.aspx

一：页面（jsp）导入extjs引用文件

<link rel="stylesheet" type="text/css" href="<%=basePath %>js/ext-3.3.0/resources/css/ext-all.css">
 <script type="text/javascript" src="<%=basePath %>js/ext-3.3.0/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="<%=basePath %>js/ext-3.3.0/ext-all-debug.js"></script>

 <script type="text/javascript" src="<%=basePath %>jquery1.4.2.js"></script>
 <script type="text/javascript" src="<%=basePath %>test/jsonUtil.js"></script>
  <script type="text/javascript" src="<%=basePath %>Form.js"></script>

<!-- this can put your customer js-->

<body>

    <div id="show" class="div_1">
         
      </div>

</body>

一般来说extjs的页面很少都很多乱七八糟的代码，要是完全基于ext的话可以不放置或者少量的div就行

二：Form.js:

Ext.onReady(function(){//指定页面加载完毕就开始执行类似与juery$()

    Ext.QuickTips.init();//悬停提示
    Ext.form.Field.prototype.msgTarget='side'; //提示方式  qtip','side','title','under'
    var username = new Ext.form.TextField({
        id:'ID_username',
        emptyText:'please enter you name',
        fieldLabel:'用户名',
        //focusClass:'x-date-bottom',
        inputType:'text',
        invalidClass:'x-date-bottom',//当把表单项标记为非法时所使用的CSS类(默认为'x-form-invalid')
        invalidText:'error',
        name:'username',
        regex :/^a.*$/,//验证的正则表达式 只能以a开头
        regexText:'不合法'//错误提示信息
       
    })
    var boy = new Ext.form.Radio({
        id:'ID_boy',
        name:'user_sex',
        boxLabel:'男',
        checked:true,
        inputValue:'1'
    });
    var girl = new Ext.form.Radio({
        id:'ID_girl',
        name:'user_sex',
        boxLabel:'女',
        inputValue:'2'
    });
   
    var sexgroup = new Ext.form.RadioGroup({ //单选按钮布局
        id:'ID_sex',
        name:'usersex',
        coloum:1,
        fieldLabel:'性别',
        items:[boy,girl]
    });
   
    var game = new Ext.form.Checkbox({
        id:'ID_game',
        inputValue:'game',
        boxLabel:'游戏'
    })
    var music = new Ext.form.Checkbox({
        id:'ID_music',
        inputValue:'music',
        boxLabel:'游戏'
    })
   
    var sport = new Ext.form.Checkbox({
        id:'ID_sport',
        inputValue:'sport',
        boxLabel:'运动'
    })
   
    var hobby = new Ext.form.CheckboxGroup({//复选框布局
        id:'ID_hobby',
        name:'user_hobby',
        coloum:1,
        items:[game,music,sport]
    })
   
    var birthday = new Ext.form.DateField({//日期选择框
        id:'ID_birthday',
        name:'birthday',
        emptyText :'选择出生日期',
        fieldLabel:'出生日期',
        format:'Y-m-d',
        minValue:'1948-02-01', 
        maxValue:'2109-12-31', 
        allowBlank:false, 
        value:new Date().dateFormat('Y-m-d')
    });
    var provinceproxy = new Ext.data.HttpProxy({
        url:'user.do?md=showProvince'//return {citys:[{id:'4',city:'haidian'},{id:'5',city:'cw'},{id:'6',city:'csd'}]}
    });
    var provincereader = new Ext.data.JsonReader({
        root:'provinces',
        fields: [{name:'id'},{name:'province'}]
        }   
    );
     var provincestore = new Ext.data.Store({
              proxy:provinceproxy,
              reader:provincereader   
     });

下面解析下proxy,store,reader三个extjs对内容的处理的类：

A proxy是访问网络资源的代理，可以通过它向服务器发起请求，返回需要的数据

B reader 根据发挥的json数据格式 和reader的设置格式匹配，读取数据

C store 数据的内容存储.

简单的来说，store 利用proxy去服务器读取数据，利用reader解析返回的数据 并存储在store中.其实exts已经起我们实现了几个常用的类.JsonStore,ArrayStore,HttpProxy,JsonReader等。可以直接利用

    var cityproxy = new Ext.data.HttpProxy({
        url:'user.do?md=showCity'
    });
    var cityreader = new Ext.data.JsonReader({
        root:'citys',
        fields: [{name:'id'},{name:'city'}]
        }
       
    );
  
      var citystore = new Ext.data.Store({
              proxy:cityproxy,
              reader:cityreader   
     });
     var cities = [//这个只是本地例子的一个测试
         [1, 'USA', 'New York']
        ,[2, 'USA', 'Cleveland']
        ,[3, 'USA', 'Austin']
        ,[4, 'USA', 'Los Angeles']
        ,[5, 'D', 'Berlin']
        ,[6, 'D', 'Bonn']
        ,[7, 'F', 'Paris']
        ,[8, 'F', 'Nice']
        ,[9, 'GB', 'London']
        ,[10, 'GB', 'Glasgow']
        ,[11, 'GB', 'Liverpool']
    ];
       var citiesStore = new Ext.data.SimpleStore({//这个只是本地例子的一个测试
              fields:['cityid','vp', 'city']
             ,data:cities
        
         });
   
    function provinceSelect(combo,record,index){
            city.clearValue();//清空数据
            citystore.proxy=new Ext.data.HttpProxy({//根据选择项的id去服务器过滤数据
                url:'user.do?md=showCity&province='+combo.value
            })
            citystore.load();//加载数据到内存中
    }
    var province = new Ext.form.ComboBox({
        id:'ID_province',
        name:'province',
        xtype:'combo',
        model:'local',//指定为从本地读取，其实是先把数据加载到本地.也可以指定为remote 从服务器加载
        fieldLabel:'省',
        triggerAction: 'all',
        store:provincestore,
        valueField: 'id',//值
        hiddenName:'province',//用来存储表单项的 数据值 对于在提交表但是自动提交下拉框的值是必须的
        displayField: 'province',//显示的属性
        lastQuery:'',
        listeners:{select:provinceSelect}//添加监听器..当下拉列表选择某项时触发，实现级联
           
    })
   
    provincestore.load();
    var city = new Ext.form.ComboBox({
        id:'ID_city',
        name:'city',
        xtype:'combo',
        store:citystore,
        valueField: 'id',
        displayField: 'city',
        model:'local',
        hiddenName:'city',
        triggerAction: 'all',
        fieldLabel:'市'
    })
   
    var form = new Ext.form.FormPanel({
        id:'loginform',
        collapsible:true,
        ctCls:'x-box-layout-ct custom-class',
        defaultType:'text',
        iconCls:'x-date-bottom',//图标css
        labelAlign:'right',
        labelStyle:'border:1',
        //overCls:'x-date-middle .x-btn-mc em.x-btn-arrow',//可选的额外的CSS类，它将在鼠标移过元素时被添加到组件上，鼠标移出时 删除
        style:'color:blue',
        title:'表单god',
        layoutConfig: {
            labelSeparator: '~' // superseded by assignment below
        },
         labelSeparator: '：',
         listeners:{
                onclick:{
                    fn:function(loginform, e) {
                      alert('click');
                    }
                }
            }
        ,
        items: [
                username,
                sexgroup,
                birthday,
                hobby,
                province,
                city
               
            ],
          
         buttonAlign:'center',
         buttons: [{
                text: '注册',
                handler: function() {
                    var data ='{';
                    form.items.each(function(){//由于想简化extjs表单项的数据格式，封装了所有表单元素到json的转化
                       data = data+ tojson(this.id,this.name,this.getXType());//
                    });
                    data=data+'}';
                    form.getForm().doAction('submit',
                    {  
                         url:'user.do?md=regist',  
                         method:'POST',                        
                         waitMsg:'正在登陆...',  
                         timeout:10000,//10秒超时
                         params:"json="+form2json('myform'),//实现表单元素到json的自动转化 类似jquery的序列化
                         success:function(form, action){
                             var isSuc = action.result.success;  
                             if(isSuc) {  
                                 //提示用户登陆成功  
                                 Ext.Msg.alert('消息', '登陆成功..'+isSuc);
                                 location.href='tree.jsp';
                             }                                         
                         },  
                         failure:function(form, action){ alert('登陆失败');}  
                     });
               }
            },
            {
                text: '重置',
                handler: function() {
                    form.getForm().reset();
                }
            }
            ]
   
    })
          var windowWidth =   window.screen.availWidth;  
        var left=windowWidth/2 - form.width/2; 
        var style='margin-top:150px;margin-left:'+left+'px;'; 
        var el=Ext.get('show').applyStyles(style); 
        form.render(el); //渲染form组件到页面

}

这样一个表单的的展示和表单验证到表单json格式就提交到了后台，后台利用jsonlib可以直接转化为对象.然后继续自己的业务就行.

(

常用的表单验证用VTYPE：

1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum//只能输入字母和数字，无法输入其他
3.email//email验证，要求的格式是"langsin@gmail.com"
4.url//url格式验证，要求的格式是http://www.baidu.com

高级自定义表单验证

 Ext.apply(Ext.form.VTypes,{
    repeat:function(val,field){//val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
      if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
          var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
          return (val==pwd.getValue());
      }
      return true;
    }
});

然后在需要比较的第二次输入的密码那 加上 confirmTo:'ID_user_pass',


表单元素到json格式的组装：这个自己编写代码实现，做成一个工具 .例如上例中的form2json.

表单的提交方式和对返回的处理。见上例

这样一个extjs表单就结束了..


）

分享到：
(选择，冒泡，插入，归并，希尔，快速)排 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJs 动态添加表单

    首先，我们要理解表单（Form）在ExtJS中的基本概念。表单是数据输入和验证的核心组件，可以包含各种字段类型，如文本框、下拉菜单、复选框等。这些字段可以通过`Ext.form.field.Field`基类进行扩展，每个字段都有其...

    ExtJs获取表单元素的值

    在本篇文章中，我们将深入探讨如何在ExtJs框架中有效地获取表单元素的值，并结合提供的代码示例进行详细解析。对于前端开发者来说，掌握如何高效地操作表单元素是必不可少的一项技能，尤其是在使用像ExtJs这样的强大...

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

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

    Extjs4的FormPanel从后台load json数据的要点

    `Ext.form.Panel`是Extjs4提供的一个用于创建复杂表单的组件。它允许开发者构建包含多个输入字段、按钮以及其他交互元素的表单，并且提供了大量的功能来帮助处理表单数据，如验证、提交以及数据绑定等。 ### 二、...

    解决Extjs4中form表单提交后无法进入success函数问题

    在开发使用Extjs4框架的应用程序时，可能会遇到form表单提交后，无法正确进入success回调函数的问题。针对这个问题，首先需要进行两个方面的检查和确认，以确保form提交操作能够顺利进入success回调函数。 首先，...

    extjs-form组件配置参数详解

    `Ext.form.Action`是ExtJS中的一个类，用于处理表单提交和加载数据的动作。它提供了多种配置选项和属性来控制表单操作的过程。 **配置项** - **success**: 执行成功后的回调函数，该函数接收两个参数：`form`（当前...

    ExtJs教程_完整版

    - **表单(Form)**：用于收集用户输入的数据。 这些控件均经过精心设计，确保在各种现代浏览器中的表现一致且易于使用。 **3.2 事件处理** - **用户事件(User Events)**：包括鼠标点击、键盘输入等用户触发的事件...

    EXTJS入门教程（非常详细）

    内容目录大致分为几个部分，包括Ext核心介绍、基本组件应用、树形控件、表单控件Form和弹出窗口等。在Ext核心部分，我们将会学习如何获取ExtJS库文件，即从官网下载并解压ZIP压缩文件来获取所需的目录和文件。ExtJS...

    ExtJS 实用教程

    6. **Form组件**：ExtJS提供了多种表单控件，如文本框、下拉框、复选框等，以及表单验证机制。通过FormPanel可以方便地创建和管理用户输入。 7. **图表组件**：ExtJS的图表组件能生成各种类型的图表，如柱状图、...

    extjs4 入门基础，form、grid、tree

    它提供了一整套组件化的用户界面元素，包括表单（Form）、网格（Grid）、树形视图（Tree）等，使得开发者能够创建出功能丰富且交互性强的前端应用。在深入探讨ExtJS 4的基础知识之前，首先确保你已经下载了ExtJS ...

    ExtJs4.0 表单提交Demo

    ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例，然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**：首先，定义一个FormPanel，并在其...

    extjs表单提交例子

    保存提交代码，extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...

    如何提交Extjs 中的表单

    首先，我们需要了解ExtJS中的表单组件（`Ext.form.Panel`）。表单面板是承载输入字段和其他表单元素的容器。创建一个基本的表单，你可以这样写： ```javascript var formPanel = Ext.create('Ext.form.Panel', { ...

    ExtJS的表单

    ExtJS的表单使用FormPanel容器 表单使用的布局方式：form和formtable布局 ExtJS的表单和html的form标签是相似的，新建一个FormPanel实际上就是新建一个html的form标签，只是添加许多Ext的样式而已

    dojo china extjs 视频教程源码

    3. **ExtJS组件**：熟悉ExtJS的组件库，如Grid面板、Window、Form表单、Toolbar等，学习如何创建、配置和布局这些组件。 4. **数据绑定**：掌握ExtJS的数据模型和Store，以及如何将数据与UI组件绑定，实现动态更新...

    Extjs验证表单 Extjs验证表单

    ### Extjs 表单验证详解 #### 一、引言 在现代Web开发中，确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架，提供了丰富的功能来帮助开发者轻松实现客户端验证。本文将深入探讨Extjs中的...

    Extjs优化(二)Form表单提交通用实现

    在本文中，我们将深入探讨如何优化EXTJS中的Form表单提交过程，特别是在EXTJS应用程序中。EXTJS是一个强大的JavaScript框架，用于构建富客户端Web应用程序，而表单提交是任何应用程序中不可或缺的部分。优化这一过程...

    extjs动态表单

    从提供的标签“源码”和“工具”来看，可能包含的资源kk.doc可能是一个示例代码文档或教程，展示了如何在ExtJS中创建和操作动态表单的详细步骤和代码片段。对于初学者来说，阅读和理解这样的文档有助于深入掌握动态...

    Extjs学习笔记之二 初识Extjs之Form

    首先，Extjs中的表单组件主要基于Ext.form.BasicForm，这是一个基础的表单对象，负责处理表单数据的提交和加载。然而，对于日常开发来说，更常见的是使用Ext.form.FormPanel，它是Panel的一个子类，不仅包含了...

    这是有关extjs的例子，里面有各种表单的定义，grid的实现

    在这个有关ExtJS的例子中，我们主要关注的是表单（Forms）的定义和Grid的实现。 表单在任何应用程序中都扮演着至关重要的角色，它们用于收集用户输入并将其发送到服务器进行处理。在ExtJS中，表单通常由各种字段...

Magicbox
Global site tag (gtag.js) - Google Analytics