开发者社区> 聚优云惠> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ExtJS表单控件

简介: 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.     });  

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

相关文章
extjs
引用:http://baike.baidu.com/view/1350145.htm 序言   ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。     功能丰富,无人能出其右。
1328 0
+关注
聚优云惠
专业科普建站知识 ,让建站变得更简单。专注于WordPress和Java建站知识讲解,云服务器主机知识讲解,建站程序搭建和网站优化。 欢迎访问我的网站 :http://tencent.yundashi168.com
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载