文档章节

【ExtJs】 ExtJs4.2 基本表单组件的使用

alonelywolf
 alonelywolf
发布于 2015/12/30 16:41
字数 654
阅读 96
收藏 2

包含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"
    }]
}


 

效果图如下:

© 著作权归作者所有

共有 人打赏支持
alonelywolf
粉丝 4
博文 62
码字总数 34590
作品 0
丰台
程序员
私信 提问
ExtJS4.2学习(16)制作表单

本节开始我们正式讲EXT的第2大类组件--表单控件,有了之前几节的经验,现在应该学起来得心应手,这里先介绍下Extjs4.2里的样式,以便于美化界面,今天无意中还搜到了几篇自己制作样式的文章,...

shyy8712872
2014/02/18
0
0
[ExtJs5.1.0系列-第6天]Form表单 之 表单面板(Ext.form.Panel)

对于从事Web开发的程序员来说,接触最多的就是表单的操作。传统的HTML表单给人一种功能单一风格朴素的印象。这个问题在ExtJs的表单上有了很大程度的改善,ExtJs对于常用表单功能给出了优秀的...

LSantorini
2015/10/01
1K
0
ExtJS4.2学习 php版(八)

最近在使用extjs4.2 发现要使用Ext.util.Observable这个类和以前不同 extjs4.2的用法 使用extend时 Ext.define("children",{ extend: 'Ext.util.Observable' constructor:function(config); ......

lbc19920615
2014/04/05
0
0
JEPF 软件快速开发平台今日入住 oschina

平台的6层架构体系 平台采用标准的SOA架构,依托优秀的前台富客户端框架(Extjs4.2)实现展示层的MVC(Model View Controller)再分层,利用内部升级版的SSH2应用框架加之独有的DynaBean数据...

JESAAS
2016/02/29
6.2K
48
ExtJS4.2学习(14)基于表格的扩展插件(2)

我曾经在第6节里讲到表格分页,还记得之前的分页组件是什么样的吗? 上面只有文字显示,我们来为其制作的更美观点,好吧,不卖关子了,讲本节的内容:进度条分页控件,这是表格扩展组件。 首...

shyy8712872
2013/12/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
22
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
17
0
my.ini

1

architect刘源源
今天
15
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
15
0
寻找数学的广度——《这才是数学》读书笔记2700字

寻找数学的广度——《这才是数学》读书笔记2700字: 文|程哲。数学学习方式之广:国内外数学教育方面的专家,进行了很多种不同的数学学习方式尝试,如数学绘本、数学游戏、数学实验、数学步道...

原创小博客
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部