AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ExtJS表单控件

2014-03-22 730
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： k代码如下 Php代码  Ext.onReady(function() {                Ext.
k


代码如下 
Php代码   收藏代码
  1. Ext.onReady(function() {  
  2.       
  3.         Ext.QuickTips.init();  
  4.         Ext.form.Field.prototype.msgTarget = 'side';  
  5.   
  6.         var form1 = new Ext.FormPanel({  
  7.             layout: 'form',  
  8.             collapsible: true,  
  9.             autoHeight: true,  
  10.             frame: true,  
  11.             renderTo: Ext.getBody(),  
  12.             title: '<center style="curor:hand" onclick="window.location.reload();">表单控件</center>',  
  13.             style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',  
  14.             //设置标签对齐方式  
  15.             labelAlign: 'right',  
  16.             //设置标签宽  
  17.             labelWidth: 170,  
  18.             //设置按钮的对齐方式  
  19.             buttonAlign:'center',  
  20.             //默认元素属性设置  
  21.             defaults:{  
  22.                     width:180  
  23.                 },  
  24.             items: [{  
  25.                 fieldLabel: '文本框控件',  
  26.                 name: 'TextBox',  
  27.                 xtype: 'textfield'  
  28.                 //,readOnly : true            //只读  
  29.                 //,emptyText    :'请输入数据'    //为空时显示的文本，注意不是value  
  30.             },{  
  31.                 fieldLabel: '只允许输入数字'  
  32.                 ,name:'TextBoxNumber'  
  33.                 ,xtype:'numberfield'  
  34.                 //,allowDecimals: false     // 允许小数点  
  35.                 //,allowNegative: false,     // 允许负数  
  36.                 //,maxValue:1000      //最大值  
  37.                 //,minValue:0            //最小值  
  38.             },{  
  39.                 fieldLabel: '下拉框控件',  
  40.                 name: 'DropDownList',  
  41.                 xtype: 'combo',  
  42.                 //本地数据源  local/remote  
  43.                 mode:'local',  
  44.                 //设置为选项的text的字段  
  45.                 displayField: "Name",         
  46.                 //设置为选项的value的字段   
  47.                 valueField: "Id",  
  48.                 //是否可以输入，还是只能选择下拉框中的选项  
  49.                 editable : false,   
  50.                 typeAhead: true,  
  51.                 //必须选择一项  
  52.                 //forceSelection: true,  
  53.                 //输入部分选项内容匹配的时候显示所有的选项  
  54.                 triggerAction: 'all',  
  55.                 //selectOnFocus:true,  
  56.                 //数据  
  57.                 store:new Ext.data.SimpleStore({  
  58.                     fields: ['Id', 'Name'],  
  59.                     data: [  [1,'男'],[0,'女'] ]  
  60.                 })  
  61.             }, {  
  62.                 fieldLabel: '日历控件',  
  63.                 xtype: 'datefield',  
  64.                 name: 'DateControl',  
  65.                 format: "Y-m-d",  
  66.                 editable : false  
  67.                 //, 默认当前日期  
  68.                 //value:new Date().dateFormat('Y-m-d')  
  69.             },{  
  70.                 fieldLabel: '单选控件'  
  71.                 ,xtype:'radiogroup'  
  72.                 ,name:'Radios'  
  73.                 ,items:[  
  74.                     {name : 'RadioItems',boxLabel:'选我',inputValue:'1',checked:true},  
  75.                     {name : 'RadioItems',boxLabel:'选我吧',inputValue:'0'}  
  76.                 ]  
  77.             },{  
  78.                 fieldLabel: '复选控件'  
  79.                 ,xtype:'checkboxgroup'  
  80.                 ,name:'Checkboxs'  
  81.                 //columns属性表示用2行来显示数据  
  82.                 ,columns:2  
  83.                 ,items:[  
  84.                     {name : 'CheckboxItems',boxLabel:'香蕉',inputValue:'A'},  
  85.                     {name : 'CheckboxItems',boxLabel:'苹果',inputValue:'B'},  
  86.                     {name : 'CheckboxItems',boxLabel:'橘子',inputValue:'C'},  
  87.                     {name : 'CheckboxItems',boxLabel:'桃子',inputValue:'D'}  
  88.                 ]  
  89.             },{  
  90.                 fieldLabel: '文本域控件'  
  91.                 ,xtype:'textarea'  
  92.                 ,value:'可以输好多字！'  
  93.                 ,height:50  
  94.             },{  
  95.                 fieldLabel: '时间控件'  
  96.                 ,xtype:'timefield'  
  97.                 //格式化输出 默认为 "g:i A"  
  98.                 //"g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H"  
  99.                 ,format:'H:i'  
  100.                 //时间间隔(分钟)  
  101.                 ,increment: 60  
  102.             },{  
  103.                 fieldLabel: '标签页'  
  104.                 ,xtype:'fieldset'  
  105.                 ,title: '标签页'  
  106.                 ,autoHeight:true  
  107.                 ,items :[{  
  108.                     xtype: 'panel',  
  109.                     title: '标签页中的面板',  
  110.                     frame: true,  
  111.                     height: 50  
  112.                 }]  
  113.             },{  
  114.                 fieldLabel: '在线编辑器'  
  115.                 ,xtype:'htmleditor'  
  116.                 ,width:260  
  117.                 ,height:100  
  118.                 //以下为默认选项，其他请参照源代码  
  119.                 //,enableColors: false  
  120.                 //,enableFormat : true  
  121.                 //,enableFontSize : true  
  122.                 //,enableAlignments : true  
  123.                 //,enableLists : true  
  124.                 //,enableSourceEdit : true  
  125.                 //,enableLinks : true  
  126.                 //,enableFont : true  
  127.             }],  
  128.             buttons: [{  
  129.                 text: "保 存"  
  130.                 ,handler:function(){  
  131.                     MsgInfo('保存');  
  132.                 }  
  133.             }, {  
  134.                 text: "取 消"  
  135.                 ,handler:function(){  
  136.                     form1.form.reset();  
  137.                 }  
  138.             }]  
  139.         });  
  140.   
  141.         function MsgInfo(str_msg)  
  142.         {  
  143.             Ext.MessageBox.show({  
  144.                 title: '提示',  
  145.                 msg: str_msg,  
  146.                 width: 400,  
  147.                 icon:Ext.MessageBox.INFO,  
  148.                 buttons: Ext.MessageBox.OK  
  149.             });  
  150.         }  
  151.     });  
文章标签：
JavaScript
PHP
聚优云惠
目录
相关文章
MrRobot
|
9月前
|
JavaScript 前端开发 iOS开发
vue表单控件
vue表单控件
MrRobot
66 2
游客rwfdzeltumt5s
零基础HTML入门教程(19)——表单按钮和文本域
本小结我们学习一下表单里面的按钮和文本框，我们网络中文本域和按钮，已经是很常见了，我们现在学习一下这些内容。*代码如下 效果如下 代码如下 效果如下 我们这一小节学习了，按钮和文本域，我们学到这里大致把html常用的标签全部讲完了我们课下一定多多练习熟练掌握。
游客rwfdzeltumt5s
151 0
零基础HTML入门教程(19)——表单按钮和文本域
游客rwfdzeltumt5s
|
数据安全/隐私保护
零基础HTML入门教程(17)——表单的单选框和复选框
我们上一小结学习了，密码输入框和文本输入框，我们这一小结学习复选框和单选框。单选框用于从若干选项中选择其中一个，例如性别只能从男、女中选择一个： 效果如下 代码如下 效果如下 我们这一小节学习了单选框和复选框，我相信在大家，注册账号或者填写信息的时候很常见，在我们html里面单选框和复选框也很常用，我们要熟练使用。
游客rwfdzeltumt5s
486 0
零基础HTML入门教程(17)——表单的单选框和复选框
带你读小助手
|
开发者
表单控件|学习笔记
快速学习表单控件
带你读小助手
104 0
表单控件|学习笔记
狼人2007
|
JavaScript
【推荐】用于UI和表单设计的10款jQuery插件
本文搜集了一些有用的用户界面和架构设计工具。包含架构验证器、文件上传以及UI工具包。 1.A Better Form 这款插件有助于清除垃圾评论、垃圾邮件和自动提交表单。 在线演示 2.3 State Switch Plugin 此款插件可切换至三种状态。
狼人2007
1519 0
金色海洋
|
JSON JavaScript 数据格式
【分享】 纯 js 表单控件 —— 让 “增改查” 更轻松！
　　我们在做增删改查的时候，必可避免的要做表单，那么表单是怎么弄出来的呢？拖拽控件、手写、js创建还是第三方控件（包括js版）？ 以前用服务器控件写了一套表单控件，用起来感觉也挺方便的，只是效率太低，太占用服务器的资源。
金色海洋
1440 0
金色海洋
|
存储 SQL 测试技术
【实现】表单控件的UI布局，实现方式
 一、先说一下表单控件要实现的功能吧。        1、绘制UI，包括表格（Table）的绘制，也就是TR 、TD，TR是多少行，TD是有多少列；包括子控件的控件，TextBox、DropDownList、CheckBoxList等控件的加载、描述（宽度、最大字符数、填充item）等。
金色海洋
1520 0
walb呀
|
数据安全/隐私保护 .NET 开发框架
WinForm界面开发之“HTML内容编辑控件”
walb呀
1861 0
技术小胖子
|
JavaScript 前端开发
推荐：50个加强表单的jQuery插件
技术小胖子
1435 0
科技小先锋
|
JavaScript 数据格式
ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]
科技小先锋
983 0

热门文章

最新文章

  • 1
    开箱即用的axios封装：Vue3+TS（建议收藏）
  • 2
    Python实现阿里云域名DDNS支持ipv4和ipv6
  • 3
    国外短域名的使用及跳转方法
  • 4
    第 1 章 Terminal
  • 5
    [图示]做人36字诀：二）形象塑造 ——教你品格高雅
  • 6
    oracle_asm理解
  • 7
    移动安全策略不只要关注恶意软件
  • 8
    Metadata Service 最高频的应用 - 每天5分钟玩转 OpenStack（164）
  • 9
    struts jsp传值到action，乱码的解决方案
  • 10
    设置linux的console为串口【转】
  • 1
    【2025穿越时空 怀旧经典】VMware Workstation Pro助你重返WindowsXP，让怀旧不再是空谈！
    23
  • 2
    【2025最新】 神奇！VMware Workstation Pro虚拟机还原与删除功能，让你轻松应对各种场景！
    29
  • 3
    【2025最新】VMware Workstation Pro 虚拟机配置与安装VMware Tools 感受它的强大~
    22
  • 4
    【2025最新】VMware Workstation Pro 虚拟机基础配置教程，方便你的神操作!
    27
  • 5
    【02】整体试验思路，在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么？相互如何转换？python开发之理论研究试验，如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    22
  • 6
    十、MyBatis的缓存
    20
  • 7
    【独家揭秘2025】VMware Workstation Pro虚拟机：免费安装教程大放送，一键解锁操作系统模拟神器！
    16
  • 8
    算法系列之递归反转单链表
    19
  • 9
    【Java并发】【线程池】带你从0-1入门线程池
    87
  • 10
    《解锁脑电信号密码：探秘标准化与归一化处理》
    11

    • 相关课程

    更多
  • jQuery开发教程

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    通义万相：视觉生成大模型再进化