`
java-mans
  • 浏览: 11458169 次
文章分类
社区版块
存档分类
最新评论

ExtJS笔记----FormPanel的使用

 
阅读更多

转载自：http://lucky16.iteye.com/blog/1490278

一、效果图
　　　　先用美图勾引那些驻足观望之人：

二、代码讲解
注意代码中的EXT js引入路径， 需要根据你的实际情况进行引入，否者可能出现错误

Javascript代码收藏代码
  1. <html>
  2. <head>
  3. <title>系统登录</title>
  4. <metacharset="UTF-8"/>
  5. <linkrel="stylesheet"type="text/css"href="extjs/resources/css/ext-all.css"/>
  6. <style>
  7. </style>
  8. <scripttype="text/javascript"src="extjs/ext-base.js"></script>
  9. <scripttype="text/javascript"src="extjs/ext-all.js"></script>
  10. <scripttype="text/javascript"src="extjs/ext-lang-zh_CN.js"></script>
  11. </head>
  12. <body>
  13. <formid="form1"runat="server">
  14. <scripttype="text/javascript">
  15. Ext.onReady(function(){
  17. Ext.QuickTips.init();
  18. Ext.form.Field.prototype.msgTarget='side';
  20. varform1=newExt.FormPanel({
  21. layout:'form',
  22. collapsible:true,
  23. autoHeight:true,
  24. frame:true,
  25. renderTo:Ext.getBody(),
  26. title:'<centerstyle="curor:hand"onclick="window.location.reload();">表单控件</center>',
  27. style:'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
  28. //设置标签对齐方式
  29. labelAlign:'right',
  30. //设置标签宽
  31. labelWidth:170,
  32. //设置按钮的对齐方式
  33. buttonAlign:'center',
  34. //默认元素属性设置
  35. defaults:{
  36. width:180
  37. },
  38. items:[{
  39. fieldLabel:'文本框控件',
  40. name:'TextBox',
  41. xtype:'textfield'
  42. //,readOnly:true//只读
  43. //,emptyText:'请输入数据'//为空时显示的文本，注意不是value
  44. },{
  45. fieldLabel:'只允许输入数字',
  46. name:'TextBoxNumber',
  47. xtype:'numberfield'
  48. //,allowDecimals:false//允许小数点
  49. //,allowNegative:false,//允许负数
  50. //,maxValue:1000//最大值
  51. //,minValue:0//最小值
  52. },{
  53. fieldLabel:'下拉框控件',
  54. name:'DropDownList',
  55. xtype:'combo',
  56. //mode:'local',
  57. displayField:"Name",
  58. //设置为选项的value的字段
  59. valueField:"Id",
  60. //是否可以输入，还是只能选择下拉框中的选项
  61. editable:false,
  62. typeAhead:true,
  63. //必须选择一项
  64. //forceSelection:true,
  65. //输入部分选项内容匹配的时候显示所有的选项
  66. triggerAction:'all',
  67. //selectOnFocus:true,
  68. //数据
  69. store:newExt.data.SimpleStore({
  70. fields:['Id','Name'],
  71. data:[[1,'男'],[0,'女']]
  72. })
  73. },{
  74. fieldLabel:'日历控件',
  75. xtype:'datefield',
  76. name:'DateControl',
  77. format:"Y-m-d",
  78. editable:false
  79. //,默认当前日期
  80. //value:newDate().dateFormat('Y-m-d')
  81. },{
  82. fieldLabel:'单选控件',
  83. xtype:'radiogroup',
  84. name:'Radios',
  85. items:[{
  86. name:'RadioItems',
  87. boxLabel:'选我',
  88. inputValue:'1',
  89. checked:true
  90. },{
  91. name:'RadioItems',
  92. boxLabel:'选我吧',
  93. inputValue:'0'
  94. }]
  95. },{
  96. fieldLabel:'复选控件',
  97. xtype:'checkboxgroup',
  98. name:'Checkboxs'
  99. //columns属性表示用2行来显示数据
  100. ,
  101. columns:2,
  102. items:[{
  103. name:'CheckboxItems',
  104. boxLabel:'香蕉',
  105. inputValue:'A'
  106. },{
  107. name:'CheckboxItems',
  108. boxLabel:'苹果',
  109. inputValue:'B'
  110. },{
  111. name:'CheckboxItems',
  112. boxLabel:'橘子',
  113. inputValue:'C'
  114. },{
  115. name:'CheckboxItems',
  116. boxLabel:'桃子',
  117. inputValue:'D'
  118. }]
  119. },{
  120. fieldLabel:'文本域控件',
  121. xtype:'textarea',
  122. value:'可以输好多字！',
  123. height:50
  124. },{
  125. fieldLabel:'时间控件',
  126. xtype:'timefield'
  127. //格式化输出默认为"g:iA"
  128. //"g:ia|g:iA|g:ia|g:iA|h:i|g:i|H:i|ga|ha|gA|ha|ga|gA|gi|hi|gia|hia|g|H"
  129. ,
  130. format:'H:i'
  131. //时间间隔(分钟)
  132. ,
  133. increment:60
  134. },{
  135. fieldLabel:'标签页',
  136. xtype:'fieldset',
  137. title:'标签页',
  138. autoHeight:true,
  139. items:[{
  140. xtype:'panel',
  141. title:'标签页中的面板',
  142. frame:true,
  143. height:50
  144. }]
  145. },{
  146. fieldLabel:'在线编辑器',
  147. xtype:'htmleditor',
  148. width:260,
  149. height:100
  150. //以下为默认选项，其他请参照源代码
  151. //,enableColors:false
  152. //,enableFormat:true
  153. //,enableFontSize:true
  154. //,enableAlignments:true
  155. //,enableLists:true
  156. //,enableSourceEdit:true
  157. //,enableLinks:true
  158. //,enableFont:true
  159. }],
  160. buttons:[{
  161. text:"保存",
  162. handler:function(){
  163. MsgInfo('保存');
  164. }
  165. },{
  166. text:"取消",
  167. handler:function(){
  168. form1.form.reset();
  169. }
  170. }]
  171. });
  173. functionMsgInfo(str_msg){
  174. Ext.MessageBox.show({
  175. title:'提示',
  176. msg:str_msg,
  177. width:400,
  178. icon:Ext.MessageBox.INFO,
  179. buttons:Ext.MessageBox.OK
  180. });
  181. }
  183. });
  185. </script>
  186. </form>
  187. </body>
  188. </html>

分享到：
| 无废话ExtJs 入门教程十[单选组：RadioGro ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics