文档章节

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

alonelywolf
 alonelywolf
发布于 2015/12/30 16:41
字数 654
阅读 88
收藏 2
点赞 0
评论 0

包含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
粉丝 3
博文 62
码字总数 34658
作品 0
丰台
程序员
ExtJS4.2学习(16)制作表单

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

shyy8712872 ⋅ 2014/02/18 ⋅ 0

JEPF 软件快速开发平台今日入住 oschina

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

JESAAS ⋅ 2016/02/29 ⋅ 48

[ExtJs5.1.0系列-第6天]Form表单 之 表单面板(Ext.form.Panel)

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

LSantorini ⋅ 2015/10/01 ⋅ 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

ExtJS4.2学习(14)基于表格的扩展插件(2)

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

shyy8712872 ⋅ 2013/12/22 ⋅ 0

Sencha Cmd 3.1 之 主题开发

本篇文章主要介绍sencha cmd3.1的使用以及ExtJS4.2的主题开发。 废话不多说,我们来直接看如何使用sencha cmd3.1来生成项目结构,然后再此基础上制作自己的主题。 要实现如上功能,你需要安装...

爪哇小贩 ⋅ 2013/05/05 ⋅ 1

使用 async-validator 编写 Form 组件

前端开发中,表单的校验一个很常见的功能,一些 ui 库例如 ant.design 与 Element ui 都实现了有校验功能的 Form 组件。async-validator 是一个可以对数据进行异步校验的库,ant.design 与 ...

⋅ 01/09 ⋅ 0

ExtJS4.2学习(九)属性表格控件PropertyGrid

PropertyGrid是在上节我们说的Editor的基础上开发的更灵活的高级表格组件,下面我们来看下它的功能和应用方式: 属性表格扩展自EditGrid,所以可以直接编辑右边的内容。注意,只有右边的,即...

shyy8712872 ⋅ 2013/12/10 ⋅ 0

ReactJS学习笔记——组件复合及表单的处理

ReactJS学习笔记——组件复合及表单的处理 React是一个JavaScript库文件,使用它的目的在于能够解决构建大的应用和数据的实时变更。该设计使用JSX允许你在构建标签结构时充分利用JavaScript的...

小米墨客 ⋅ 2016/03/26 ⋅ 3

[译]如何优雅地用 Vue 创建数据驱动的用户界面

翻译: 珈蓝 from 迅雷前端 翻译自 Evan Schultz 的文章 Do it with Elegance: How to Create Data-Driven User Interfaces in Vue 本文演示了如何利用 Vue 的动态组件根据 schema 来生成一个...

迅雷前端 ⋅ 06/04 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 5分钟前 ⋅ 0

MySQL 内核深度优化

MYSQL数据库适用场景广泛,相较于Oracle、DB2性价比更高,Web网站、日志系统、数据仓库等场景都有MYSQL用武之地,但是也存在对于事务性支持不太好(MySQL 5.5版本开始默认引擎才是InnoDB事务...

OSC_cnhwTY ⋅ 12分钟前 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 14分钟前 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 22分钟前 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 23分钟前 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 52分钟前 ⋅ 0

Linux(CentOS)下配置php运行环境及nginx解析php

【part1:搭建php环境】 1.选在自己需要安装的安装包版本,wget命令下载到服务器响应目录 http://php.net/releases/ 2.解压安装包 tar zxf php-x.x.x 3.cd到解压目录执行如下操作 cd ../php-...

硅谷课堂 ⋅ 59分钟前 ⋅ 0

Nginx服务架构初探(四):nginx服务器的rewrite功能

nginx服务器的rewrite功能 1.nginx后端服务器组的配置 1>upstream name {…} name是给服务器组限的组名 2>server address [parameters]; address为服务器地址 parame......

余温灬未存 ⋅ 今天 ⋅ 0

layer.prompt使文本框为空的情况下也能点击确定

最近一直在使用layui,但是用到弹出层layer.prompt时,如果文本框是空的话点击确定没有反应,不能向下执行。 但是我又需要空值,看看我原来的代码。 123456789 layer.prompt...

孟飞阳 ⋅ 今天 ⋅ 0

Linux普通文件压缩工具gzip、Bzip2、xz

第六章 文件压缩和打包 6.1 压缩打包介绍 Linux环境常见压缩文件类型: .zip,.gz,.bz2,.xz, .tar.gz,.tar.bz2,.tar.xz 压缩打包的目的 方便文件传输 节省磁盘空间 减少传输花费的时间 ...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部