Extjs——form组件

最新推荐文章于 2020-03-12 09:58:28 发布
最新推荐文章于 2020-03-12 09:58:28 发布
阅读量91 收藏
点赞数
分类专栏： Extjs相关 
<!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',{
              renderTo:'formDiv',
              fieldLabel: 'Text Area',
              // html:'content',
              width:600,
              items:[{
                  //textfield文本域，只能输入一行文本
                  xtype:'textfield',
                  //文本域名称
                  fieldLabel:'文本域'
              },{
                  //文本区域，可以输入多行文本
                  xtype:'textarea',
                  fieldLabel:'文本区域'
              },{
                  //显示文本字段,值用value属性
                  xtype:'displayfield',
                  fieldLabel:'显示文本字段',
                  value:'字段值'
              },{
                  xtype:'datefield',
                  fieldLabel:'日期字段'
              },{
                  xtype:'button',
                  text:'button',
                  fieldLabel:'button按钮'
              },{
                  xtype:'fieldcontainer',
                  fieldLabel:'Radio field',
                  defaultType:'radiofield',
                  defaults:{
                      flex:1
                  },
                  layout:'hbox',
                  items:[{
                      boxLabel:'A',
                      inputValue:'a',
                      id:'rado1'
                  },{
                      boxLabel:'B',
                      inputValue:'b',
                      id:'radio2'
                  },{
                      boxLabel:'C',
                      inputValue:'c',
                      id:'radio3'
                  }]
              },{
                  xtype:'fieldcontainer',
                  fieldLabel:'checkbox',
                  defaultType:'checkboxfield',
                  defaults:{
                      flex:1
                  },
                  layout:'hbox',
                  items:[{
                      id:'box1',
                      boxLabel:'HTML',
                      inputValue:'html',
                      checked:true
                  },{
                      id:'box2',
                      inputValue:'js',
                      boxLabel:'JS'
                  },{
                      id:'box3',
                      inputValue:'css',
                      boxLabel:'CSS'
                  }]
              }]
          });
      });

      
   </script>
</head>
<body>
    <div id="formDiv"></div>
</body>
</html>

 

weixin_39102174
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS4组件_form表单配置-属性-方法详解
heitdf
11-23 1万+
1、Ext.form.Action   配置项：         success：执行成功后回调的函数，包括两个参数：form和action          failure：执行失败后回调的函数，包括两个参数：form和action          method：表单的提交方式，有效值包括GET、POST          params：传递到请求中的参数          u
ExtJS——页面布局汇总
u013127751的博客
03-23 1410
Ext.onReady(function(){ var box1 = new Ext.Component({ autoEl:{ tag:'div', style:'background:red;width:300px;height:30px', html:'box1' } });
ExtJsCustomComponent:ExtJs自定义组件
06-19
SearchComboBox: 扩展ExtJs4的combobox控件，当输入框改变时就会向后台发送请求，展现数据。 TreeField: 扩展ExtJs4的Ext.form.field.Picker类，当点击下拉框时，异步加载树形结构数据的所有层级，需要后台提供树形结构数据，同时提供当树形列表选择改变后（selectionchange）等自定义事件，和是否为多选，父节点是否可选等多项自定义配置属性。
Extjs自定义组件
个人专栏
04-16 310
FormUtil.js文件内容： function getMemberLevelCombox(){ //会员类型 var memberLevelData=[['','all'],['1','type1'],['2','type2'],['3','type3']]; // 会员类型 var memberLevelStore = new Ext.data.SimpleStore({ ...
Extjs3.2自定义组件的书写
沧海一粟
01-10 205
最近参与的项目中用到Extjs，研究了几天， 发现实际开发中很有必要将各种布局的组件一起作为自定义组件使用，以提高代码重用性。 项目中的‘添加用户’功能中， 由于用户信息比较多，还同时可能要注册其账号信息，所以想在添加的时候分多步填写最后提交。 翻阅Extjs3.2的example发现没有满足要求的组件。于是试着书写一个。我暂时给它取名叫StepForm。   1.Extjs中可以模拟ja...
Extjs6组件——Form大家族成员介绍
yijianzhi77的博客
03-12 490
本文基于ext-6.0.0 一、xtype 　　form一共有12种xtype，下面来一一举例说一下。 1、textfield 　　这个是用的最多的form之一。   { xtype: 'textfield', fieldLabel:'姓名（textfield）', name:'userN...
Extjs——初步学习
不忘初心 ，方得始终
01-13 6537
最近在系统学习Extjs框架，从刚一开始接触Extjs到现在发现对Extjs越来越喜欢了。刚开始只是想在页面上实现一个展示大量图片的功能，就像在线订餐系统展示菜单的效果那样，每幅图片上都有一些必要的信息、动作、链接等。效果如下图：                            这样的实现功能其实就是图片及信息重复显示，刚开始本想借助像asp.net中repeater那样的服务器控件来达
ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]
孤灯下的倩影的专栏
03-01 1730
前言 　　 本章主要讲ExtJS表单验证方面，正好趁着周末多写两篇，一边梳理之前用过的代码，一边就地取材补充相关方面的资料，算是温习+补习吧 : ) 系列 　　1.　　ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ] 　　2.　　ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ] 　　3.　　ExtJs 备忘录（3）—— Form表单
ExtJS——继承
u013127751的博客
03-23 299
Ext.onReady(function(){ var Panel1 = new Ext.Panel({ title: '标题', width: 500, height: 100, html: '好好学习' }); var Panel2 = n
Extjs绚丽上传组件
07-28
在本案例中，我们将讨论的是ExtJS中的一个特定组件——上传组件，它允许用户在Web应用中实现文件上传功能，且具有良好的用户体验和视觉效果。 首先，ExtJS的上传组件通常基于HTML5的File API构建，这使得它能够支持...
extjs3.0 组件
04-18
首先，我们要了解EXTJS 3.0 的基础——面板（Panel）。面板是EXTJS 中最常用的组件，它可以包含其他组件，如表格、表单、按钮等，形成复杂的布局。面板支持多种布局模式，如fit、form、border等，能够灵活地适应不同...
ExtJs——简单组件(ComboBox、GridPanel、Button、Fx、DatePicker)！！！
事后诸葛亮的程序人生（微信：zq9017197）
03-09 1532
<br />Ext.onReady(function(){ //动画效果 Ext.get('a1').applyStyles({ position:'absolute', top:50, left:50, backgroundColor:'red', width:50, height:50 }).slideIn(); //按钮 var btn = new Ext.Button({ renderTo:Ext.get('a2'), tex
ExtJS——GridePanel添加复选框列和分页功能
u013127751的博客
03-23 731
index.html Ext.onReady(function(){ //数据源 var itemsPerPage = 2; // 设置您希望看到的每页的条目数量 var store = new Ext.data.Store({ id:'simpsonsStore', autoL
python下载安装.zip
09-01
python下载安装
dbForge Studio 2023 for MySQL Enterprise 10.0.150 x64亲测可用
09-01
用全面的 MySQL GUI 工具简化您的日常工作流程，用于数据库开发、经营管理和行政管理。
mysql实验111111111
最新发布
09-01
mysql实验111111111
弹性力学数值方法：有限元法(FEM)：三维弹性问题有限元分析.docx
09-01
弹性力学数值方法：有限元法(FEM)：三维弹性问题有限元分析.docx
弹性力学数值方法：迭代法：弹性力学中的多网格方法.docx
09-01
弹性力学数值方法：迭代法：弹性力学中的多网格方法.docx
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值