【ExtJs】 ExtJs4.2 基本表單組件的使用

時間 2019-11-09

標籤 ExtJs extjs4.2 extjs 基本表單組件使用欄目 HTML 简体版

原文原文鏈接

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

<%-- 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:html

{
  "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"
    }]
}

效果圖以下：java