包含ExtJs 基本的组件radioGroup,ComboBox,File,NumberField...

<%--

  Created by IntelliJ IDEA.

  User: Administrator

  Date: 2015/12/30 0030

  Time: 13:35

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

  <jsp:include page="resource.jsp"></jsp:include>

    <title>表单常用组件</title>

</head>

<body>

<script type="text/javascript">

  Ext.onReady(function(){

    //tore 也可以加载内部指定的数据. 在内部, Store 将我们传入的对象作为data,转换为Model实例。

    Ext.define('Movie', {

      extend: 'Ext.data.Model',

      fields: [

        {name: 'id', type: 'int'},

        {name: 'name', type: 'string'},

        {name: 'url',  type: 'string'}

      ]

    });

//加载一个嵌套的数据集合(nested dataset)并可以让Reader自动的生成相关的model

    var states = Ext.create("Ext.data.Store",{

      model: 'Movie',

      proxy: {

        type: 'ajax',

        url: 'movie.json',//指定的链接

        reader: {

          type: 'json',

          root: 'movies'

        }

      },

      autoLoad: true

    });

    var form = new Ext.form.Panel({

      title: '基本表单',

      bodyPadding: 5,

      width: 750,

      // 表单域 Fields 将被竖直排列, 占满整个宽度

      layout: 'anchor',

      defaults: {

        anchor: '100%'

      },

      url:"form.jsp",//提交至指定的url

      // The fields

      defaultType: 'textfield',

      items: [{

        fieldLabel: '用户名',

        name: 'name',

        allowBlank: false,//是否为空

        blankText:'用户名不能为空'

      },{

        fieldLabel: '密码',

        name: 'passwd',

        inputType:'password',

        allowBlank: false,

        blankText:"密码不能为空"

      },{

        fieldLabel:"性别",

        xtype: 'radiogroup',

        columns:2,//两列

        vertical: false,

        items: [

          { boxLabel: '男', name: 'sex', inputValue: '1',disabled:true },//一组Ext.form.Radio对象

          { boxLabel: '女', name: 'sex', inputValue: '2', checked: true}

        ]

      },

        {

          fieldLabel: '喜欢的电影类型',

          store: states,

          name:'movieType',

          xtype:"combo",

          queryMode: 'local',

          displayField: 'name',

          valueField: 'id',

          renderTo: Ext.getBody()

        },

        {

          xtype: 'checkboxgroup',

          fieldLabel: '爱好',

          columns: 3,

          vertical: true,

          items: [

            { boxLabel: 'IT', name: 'fav', inputValue: '1' },

            { boxLabel: '美女', name: 'fav', inputValue: '2', checked: true },

            { boxLabel: '建筑', name: 'fav', inputValue: '3' },

            { boxLabel: '新闻', id:"news", name: 'fav', inputValue: '4',handler:getCheckBox},// 点击后触发的事件

            { boxLabel: '体育', name: 'fav', inputValue: '5' },

            { boxLabel: '军事', name: 'fav', inputValue: '6' },

            { boxLabel: '亲子', name: 'fav', inputValue: '7' }

          ]

        },{

          xtype: 'datefield',

          fieldLabel: '出生日期',

          name: 'birth',

          editable:false

          //value: new Date()  // 设置默认值

        },{

          xtype: 'numberfield',

          anchor: '100%',

          name: 'salary',

          fieldLabel: '薪水',

          value: 4999,

        //  maxValue: 99999,

          minValue: 0

        },{

          xtype: 'filefield',

          name: 'resume',

          fieldLabel: '个人简历',

          labelWidth:70,

          msgTarget: 'side',

          allowBlank: false,

          anchor: '100%',

          buttonText: '选择要上传的文件'

        },{

          xtype: 'htmleditor',

          fieldLabel: '个人评价',

          name:"personal",

          enableColors: true,//启用选择颜色按钮

          enableFont:true,//启用选择字体按钮

          enableAlignments: true,//启用样式对齐按钮

          enableLinks : true,// 启用链接创建按钮,默认为true

          createLinkText: '创建超链接',//创建连接的提示信息

          value:"<b>ExtJs基础学习</b>",

          fontFamilies:['宋体','隶书','黑体']//字体列表

    }],

      // 重置 和 保存 按钮.

      buttons: [{

        text: '重置',

        handler: function() {

          this.up('form').getForm().reset();

        }

      }, {

        text: '保存',

        formBind: true, //only enabled once the form is valid

        disabled: true,

        handler: function() {

          var form = this.up('form').getForm();

          if (form.isValid()) {

            form.submit({

              success: function(form, action) {

                Ext.Msg.alert('保存成功', action.result.msg);

              },

              failure: function(form, action) {

                Ext.Msg.alert('操作失败', action.result.msg);

              }

            });

          }

        }

      }],

      renderTo: Ext.getBody()

    });

    function getCheckBox(){

      Ext.Msg.alert("提示","你不能选择该选项");

      Ext.getCmp("news").setValue("");

    }

  });

</script>

</body>

</html>

movie.json:

{

  "movies": [{

    "id": 1,

    "name": "恐怖片",

    "url":"http://www.google.com"

          },

    {

      "id": 2,

      "name": "科幻片",

      "url":"http://www.baidu.com"

    },

    {

      "id":3,

      "name": "喜剧片",

      "url":"http://www.xj.com"

    }]

}

效果图如下：

【ExtJs】 ExtJs4.2 基本表单组件的使用的更多相关文章

  1. reactjs入门到实战（八）----表单组件的使用

    表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...

  2. ReactJS实用技巧（2）：从新人大坑——表单组件来看State

    不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...

  3. 【form】 表单组件说明

    form表单组件 1)将form组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/ ...

  4. 通过html()的方法获取文本内容， form表单组件显示的值与获取到的值不一致的问题

    我在通过 html()获取对应节点的内容,发现一个问题,获取到的 form表单组件的内容值是初始加载的值,而不是经过用户修改后的值.例如页面加载时组件<input type="text ...

  5. 如何实现Ant design表单组件封装？

    目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...

  6. django基础之day09，创建一个forms表单组件进行表单校验，知识点：error_messages，label，required，invalid，局部钩子函数，全局钩子函数， forms_obj.cleaned_data，forms_obj.errors，locals()， {{ forms.label }}:{{ forms }}，{{ forms.errors.0 }}

    利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...

  7. 使用iview 的表单组件验证 Upload 组件

    使用iview 的表单组件验证 Upload 组件 结果: 点击提交按钮, 没有填的form 项, 提示错误, 当填入数据后提示验证成功 代码: <template> <div id ...

  8. 文档驱动 —— 表单组件（五）：基于Ant Design Vue 的表单控件的demo，再也不需要写代码了。

    源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...

  9. 文档驱动 —— 表单组件（六）：基于AntDV的Form表单的封装，目标还是不写代码

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 也不知道大家是怎么写代码的,这里全当抛砖引玉 为何封装? AntDV非常强大,效果也非常漂亮,功能强大, ...

随机推荐

  1. ny540 奇怪的排序 简单题

    奇怪的排序 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 描述 最近,Dr. Kong 新设计一个机器人Bill.这台机器人很聪明,会做许多事情.惟独对自然数的理解与人类不一 ...

  2. ng-bind和{{}}插值法

    引言 今天调bug的时候遇到了一个问题,就是有的时候加载出来的数据没有数据的时候出现的是{{TeacherName}},一看这个不是我在页面上绑的值吗?怎么这样就显示出来了呢…… 针对这个问题,想起来 ...

  3. 浅谈C# application.DoEvent作用

    Application.DoEvents()的作用:处理所有的当前在消息队列中的Windows消息. private void button1_Click(object sender, EventAr ...

  4. ajaxfileupload 半成品遇到的问题，不走success 走error的问题

    大部分都是datatype 为 json的时候遇到的 1.遇到json被加pre标签  去掉 2.遇到json被加audio 标签 去掉 3.遇到json转换错误,换方式转 改后的代码如下  , 有注 ...

  5. 字符串copy推导演变

    #include <stdio.h> #include<string.h> /*基本水平*/ void mycopy1(char *des,char * sou) { unsi ...

  6. 百度编辑器UEditor不能插入音频视频的解决方法

    引用:https://my.oschina.net/u/379795/blog/787985 xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_url属性(用来存储视频url ...

  7. Wpf border 容易弄混的两个属性

    代码如下: <Border Margin=" > <Button Content="dafkafjk"></Button> </ ...

  8. 搭建一个单纯学习hibernate的项目

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  9. 【C#/WPF】TextBlock/TextBox/Label编辑文字的问题

    标题有点描述不清,就当是为了方便自己用时易于搜索到. 总之需求是:显示用户信息(文字)时,允许用户编辑自己的信息. 效果图如下: 点击[编辑]按钮前: 点击[编辑]按钮后,允许编辑: 别吐槽为甚性别还 ...

  10. C# 异常类型

    Exception 类  描述 SystemException 其他用户可处理的异常的基本类 ArgumentException 方法的参数是非法的 ArgumentNullException 一个空 ...