Ext-表单

最新推荐文章于 2022-05-14 11:25:47 发布
最新推荐文章于 2022-05-14 11:25:47 发布
阅读量234 收藏
点赞数
分类专栏： Ext
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xie__jin__cheng/article/details/108386956
版权

1.概述

1.1 文本域

{ 	
   xtype: 'textfield',
   fieldLabel: 'Text field'  
}

1.2 文本区域

{
   xtype: 'textarea',
   fieldLabel: 'Text Area'
}

 

1.3 lable

{
   xtype: 'displayfield',
   fieldLabel: 'Display Field'
}

 

1.4 时间空间

{
   xtype: 'datefield',
   fieldLabel: 'Date picker'
}

 

1.5 按钮

{
   xtype: 'button', 
   text : 'Button'
}

1.6 单选按钮

{
   xtype      : 'fieldcontainer',
   fieldLabel : 'Radio field',
   defaultType: 'radiofield',
   defaults: {
      flex: 1
   },
   layout: 'hbox',
   items: [{
      boxLabel  : 'A',
      inputValue: 'a',
      id        : 'radio1'
   },{
      boxLabel  : 'B',
      inputValue: 'b',
      id        : 'radio2'
   },{
      boxLabel  : 'C',
      inputValue: 'c',
      id 	      : 'radio3'
   }]
}

 

1.7 多选

{
   xtype: 'fieldcontainer',
   fieldLabel: 'Check Box Field',
   defaultType: 'checkboxfield',
   items: [{
      boxLabel  : 'HTML',
      inputValue: 'html',
      id        : 'checkbox1'
   },{
      boxLabel  : 'CSS',
      inputValue: 'css',
      checked   : true,
      id        : 'checkbox2'
   },{
      boxLabel  : 'JavaScript',
      inputValue: 'js',
      id        : 'checkbox3'
   }]
}

 

1.8 下拉列表

{
               xtype: 'combobox',
               fieldLabel: 'Combo Box',
               store: Ext.create('Ext.data.Store', {
                        fields: ['abbr', 'name'],
                        data: [{
                           'abbr': 'HTML',
                           'name': 'HTML'
                        },{
                           'abbr': 'CSS',
                           'name': 'CSS'
                        },{
                           'abbr': 'JS',
                           'name': 'JavaScript'
                        }]
                     }),
               valueField: 'abbr',
               displayField: 'name'
            }

1.9 文件选择

{
   xtype: 'filefield',
   fieldLabel: 'File field',
   labelWidth: 50,
   msgTarget: 'side',
   allowBlank: false,
   anchor: '100%',
   buttonText: 'Select File...'
}

1.10 数字增减

{
   xtype: 'numberfield',
   anchor: '100%',
   fieldLabel: 'Numeric field',
   maxValue: 99,
   minValue: 0
}

2.综合举例 

2.1 代码

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.form.Panel', {
            id: 'newForm',
            renderTo: 'formId',
            border: true,
            width: 600,
            items: [{
               xtype: 'textfield',
               fieldLabel: 'Text Field'
            },{
               xtype: 'displayfield',
               fieldLabel: 'Display Field'
            },{
               xtype: 'textarea',
               fieldLabel: 'Text Area'
            },{
               xtype: 'datefield',
               fieldLabel: 'Date picker'
            },{
               xtype: 'button',
               text: 'Button'
            },{
               xtype: 'fieldcontainer',
               fieldLabel: 'Radio field',
               defaultType: 'radiofield',
               defaults: {
                  flex: 1
               },
               layout: 'hbox',
               items: [{
                  boxLabel: 'A',
                  inputValue: 'a',
                  id: 'radio1'
               },{
                  boxLabel: 'B',
                  inputValue: 'b',
                  id: 'radio2'
               },{
                  boxLabel: 'C',
                  inputValue: 'c',
                  id: 'radio3'
               }]
            },{
               xtype: 'fieldcontainer',
               fieldLabel: 'Check Box Field',
               defaultType: 'checkboxfield',
               items: [{
                  boxLabel: 'HTML',
                  inputValue: 'html',
                  id: 'checkbox1'
               },{
                  boxLabel: 'CSS',
                  inputValue: 'css',
                  checked: true,
                  id: 'checkbox2'
               },{
                  boxLabel: 'JavaScript',
                  inputValue: 'js',
                  id: 'checkbox3'
               }]
            },{
               xtype: 'hiddenfield',
               name: 'hidden field ',
               value: 'value from hidden field'
            },{
               xtype: 'numberfield',
               anchor: '100%',
               fieldLabel: 'Numeric Field',
               maxValue: 99,
               minValue: 0
            },{
               xtype: 'spinnerfield',
               fieldLabel: 'Spinner Field',
               step: 6,
               // override onSpinUp (using step isn't neccessary)
               onSpinUp: function() {
                 var me = this;
                 if (!me.readOnly) {
                     var val = me.step; // set the default value to the step value
                     if(me.getValue() !== '') {
                         val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
                     }                          
                     me.setValue((val + me.step) + ' Pack');
                 }
               },

               // override onSpinDown
               onSpinDown: function() {
                 var me = this;
                 if (!me.readOnly) {
                     if(me.getValue() !== '') {
                         val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
                     }            
                     me.setValue((val - me.step) + ' Pack');
                 }
               }
            },{
               xtype: 'timefield',
               fieldLabel: 'Time field',
               minValue: '6:00 AM',
               maxValue: '8:00 PM',
               increment: 30,
               anchor: '100%'
            },{
               xtype: 'combobox',
               fieldLabel: 'Combo Box',
               store: Ext.create('Ext.data.Store', {
                        fields: ['abbr', 'name'],
                        data: [{
                           'abbr': 'HTML',
                           'name': 'HTML'
                        },{
                           'abbr': 'CSS',
                           'name': 'CSS'
                        },{
                           'abbr': 'JS',
                           'name': 'JavaScript'
                        }]
                     }),
               valueField: 'abbr',
               displayField: 'name'
            },{
               xtype: 'filefield',
               fieldLabel: 'File field',
               labelWidth: 50,
               msgTarget: 'side',
               allowBlank: false,
               anchor: '100%',
               buttonText: 'Select File...'
            }]
         });
      });
   </script>
</head>
<body>
   <div id = "formId"></div>
</body>
</html>

2.2 效果 

科学的发展-只不过是读大自然写的代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ext-gen:Sencha ExtGen-用于Ext JS的开放工具
05-06
Ext JS是一个全面且安全JavaScript框架，具有包含140多种企业级UI组件的强大库，这些组件包括数据网格，数据透视网格，树，图表，D3可视化，表单，日历，按钮，菜单等。 Ext JS功能丰富的组件已预先构建和测试，...
extjs Ext.form.Panel 表单面板学习
西京刀客
06-17 1773
⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️
初学ExtJS（6.6.0）
Pagegle的博客
11-15 982
API文档地址https://docs.sencha.com/extjs/6.6.0/modern/Ext.html 下载库文件https://www.sencha.com/ build：压缩后的Ext全部源码（里面分类存放） ...
ExtJs控件属性配置详细
weixin_34233618的博客
08-27 420
序言：    1.本文摘自网络，看控件命名像是4.0以前的版本，但控件属性配置仍然可以借鉴（不足之处，以后项目用到时再续完善）。 Ext.form.TimeField:   配置项：            maxValue：列表中允许的最大时间            maxText：当时间大于最大值时的错误提示信息            minValue：列表中允许的最小时间        ...
EXT表单
无界编程
10-11 4846
ETX系列：EXT基础 EXT表单 EXT表格 EXT事件 EXT窗口 EXT按钮事件 纯表单 演示 Ext.onReady(function(){ var form1 = new Ext.form.FormPanel({ title:
ext-4.X学习文档
12-10
extjs-4-入门 extjs-4-类系统介绍 extjs-4-数据详解 extjs-4-组件详解 extjs-4-Grids详解 extjs-4-布局和容器 ExtJS 4 表单 ExtJS 4 树 extjs-MVC架构讲解 个人学习资料收集
Ext 表单布局实例代码
09-06
ext下布局的实现代码。
ext-modelform：MvcCore表单扩展，通过装饰的模型类构建表单
02-14
通过装饰的模型属性轻松创建带有字段的表单实例而不扩展\MvcCore\Ext\Form或\ MvcCore \ Ext \ ModelForms \ Form`类。 可以通过\MvcCore\Ext\ModelForms\IModel::GetFormsMetaData()获取模型属性元数据。 通过旧...
ext表单
03-01
NULL 博文链接：https://endeavor416.iteye.com/blog/260470
ext 表单提交
03-16
NULL 博文链接：https://lym6520.iteye.com/blog/339556
Ext 添加功能form表单实例
03-22
Ext 添加功能form表单实例 适合Ext初学者
ExtJs中提交表单的四种方式
hyx153183740的博客
05-14 567
ExtJs中提交表单的五种方式第一种 Ajax提交方式第二种 Ajax-Html提交方式第三种 Ext.FormPanel 提交方式第四种 Ext.Window 提交方式第五种 将html的表单转化为ext的表单提交方式 第一种 Ajax提交方式 这种方式需要直接使用ext Ajax方法进行提交 使用这种方式，需要将待传递的参数进行封装。 function saveUser_ajaxSubmit1() { Ext.Ajax.request( { url : 'user_s
ExtJS4的文本框(textField)使用正则表达式进行验证(Regex)的方法
m0_37822534的博客
06-14 638
{ xtype:'textfield', fieldLabel: '邮政编码', name:'postCode', regex: /^[1-9]\d{5}(?!\d)$/, regexText : '请输入正确的邮政编码', anchor: '92%' } 1. regex: /^[\u4e00-\u9fa5]+$/i, regexText : "请输入中文", 2. regex: /^\...
extJs 4种异步提交
loser
12-05 1163
/**   *    * 第一种Ajax提交方式   *    *    * 这种方式需要直接使用ext Ajax方法进行提交   *    *    * 使用这种方式，需要将待传递的参数进行封装   *    *    * @return   */   function saveUser_ajaxSubmit1() {       Ext.Ajax.request(
Ext JS4序列教程之四：form表单
死牛崇拜的专栏
02-26 4831
1.1 什么是表单          表单是HTML中的一个元素，用来和服务器交互数据，将用户数据提交到服务器中，由服务器的CGI程序进行处理，例如保存到数据库等操作。原生的HTML表单中可以包含文本框、文本域、下拉框、复选框、单选框等元素，但日历控件、下拉分页控件等都不是默认HTML表单元素，需要JavaScript编写的AJAX框架才能支持，我们可以使用很多开源的日历控件、下拉分页控件，但
Ext Js 3.2 form表单布局的小例子
张波的技术积累
11-27 6892
1：代码： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> form表单布
Extjs-表单与输入控件
itlwc
08-16 7937
项目中的from var editForm = new Ext.form.FormPanel({ labelWidth : 120, labelAlign : 'right', border : false, frame : true, trackResetOnLoad : true, anchor : '100%', bodyStyle : 'padding:5p
ExtJS创建Form表单
Coder Yasmine
05-29 5864
前言     系统页面基本离不开Form表单，一般情况下我们的表单都是在页面中用HTML代码写一个Form，然后在Form中写各种控件，然后是一个type为submit的按钮，在Form中设置method提交的方式和action提交的路径，这样就可以了。但是用ExtJS，Form表单的封装就显得简单了，只需要用JS写出各个控件，组合在Form中就OK了。 Form表单
99-智慧园区数据平台方案.pptx
最新发布
04-27
99-智慧园区数据平台方案.pptx
ext-7.0.0.156.zip
06-20
1. 提供了一些常用的 UI 组件，例如按钮、表格、面板和表单等。 2. 包含了一些强大的工具，例如 Grid 和 Chart 工具，可以帮助开发者轻松创建复杂的数据可视化界面。 3. 支持多种数据源和数据格式，例如 JSON、XML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值