【ExtJs】 ExtJs4.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"
    }]
}


 

效果图如下:

【ExtJs】 ExtJs4.2 基本表单组件的使用_第1张图片

你可能感兴趣的:(java,ExtJs)