`
雪馨25
  • 浏览: 125268 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

【初学EXT】控件练习

    博客分类：
  • EXT
ext控件用户注册 
阅读更多

 

书看的差不多了，那就来练习吧！相信你也知道，练习控件最好的界面莫过于“用户注册”，还等什么，快快动手吧

不考虑布局，只是简单的熟悉常用控件及常用控件对应的属性

友情提示：
1、如果控件不够熟悉，那就照着代码敲，熟能生巧
2、标点符号一定要是英文的
3、有效利用浏览器的错误提示信息，帮助自己纠错吧
4、一定要注意每次最后一个属性后面没有逗号，这个错误影响了我很多次

练习界面如下：

代码：

[html] view plaincopyprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4. <title>Hello World</title>  
  5. <link rel="stylesheet" type="text/css"  
  6.     href="EXT/resources/css/ext-all.css" />  
  7. <script type="text/javascript" src="EXT/ext-base.js"></script>  
  8. <script type="text/javascript" src="EXT/ext-all.js"></script>  
  9. <script type="text/javascript" src="EXT/ext-lang-zh_CN.js"></script>  
  10. <script type="text/javascript">  
  11.     Ext.onReady(function() {//页面初始化代码  
  12.         var txtName = new Ext.form.TextField({  
  13.             nme : "txtName",  
  14.             fieldLabel : "姓名",  
  15.             width : 200  
  16.         });  
  17.   
  18.         var txtpassWord = new Ext.form.TextField({  
  19.             name : "txtpassWord",  
  20.             fieldLabel : "密码",  
  21.             inputType : "password",  
  22.             width : 200  
  23.         });  
  24.   
  25.         var rdaSexMan = new Ext.form.Radio({  
  26.             name : "rdaSex",  
  27.             inputValue : "男",//实际值  
  28.             boxLabel : "男",//显示值  
  29.             checked : true  
  30.         //是否默认  
  31.         });  
  32.   
  33.         var rdaSexWomen = new Ext.form.Radio({  
  34.             name : "rdaSex",  
  35.             inputValue : "女",//实际值  
  36.             boxLabel : "女",//显示值  
  37.         //  width:150  
  38.         });  
  39.   
  40.         var grpSex = new Ext.form.RadioGroup({  
  41.             name : "sex",  
  42.             fieldLabel : "性别",  
  43.             items : [ rdaSexMan, rdaSexWomen ],  
  44.             width : 100  
  45.         });  
  46.   
  47.         var dateBrithday = new Ext.form.DateField({  
  48.             name : "birthday",  
  49.             fieldLabel : "出生日期",  
  50.             format : "Y-m-d",//指定日期格式，Y表示四位数年，m表示月，d表示日  
  51.             value : new Date()  
  52.         //默认当前日期  
  53.         });  
  54.   
  55.         var chkhobby1 = new Ext.form.Checkbox({  
  56.             name : "chkHobby",  
  57.             inputValue : "钓鱼",  
  58.             boxLabel : "钓鱼",  
  59.             checked : true  
  60.         });  
  61.   
  62.         var chkhobby2 = new Ext.form.Checkbox({  
  63.             name : "chkHobby",  
  64.             inputValue : "聚会",  
  65.             boxLabel : "聚会"  
  66.         });  
  67.   
  68.         var chkhobby3 = new Ext.form.Checkbox({  
  69.             name : "chkHobby",  
  70.             inputValue : "游泳",  
  71.             boxLabel : "游泳"  
  72.         });  
  73.   
  74.         var chkhobby4 = new Ext.form.Checkbox({  
  75.             name : "chkHobby",  
  76.             inputValue : "打球",  
  77.             boxLabel : "打球"  
  78.         });  
  79.   
  80.         var grpGobby = new Ext.form.CheckboxGroup({  
  81.             name : "hobby",  
  82.             fieldLabel : "您的爱好",  
  83.             items : [ chkhobby1, chkhobby2, chkhobby3, chkhobby4 ],  
  84.             width : 300  
  85.         });  
  86.   
  87.         var data = [ [ 1, "博士" ], [ 2, "研究生" ], [ 3, "大学本科" ], [ 4, "专科" ],  
  88.                 [ 5, "高中" ], [ 6, "其他" ] ];  
  89.   
  90.         var proxy = new Ext.data.MemoryProxy(data);  
  91.   
  92.         var edu = Ext.data.Record.create([ {  
  93.             name : "eid",  
  94.             type : "int",  
  95.             mapping : 0  
  96.         }, {  
  97.             name : "ename",  
  98.             type : "string",  
  99.             mapping : 1  
  100.         } ]);  
  101.   
  102.         var reader = new Ext.data.ArrayReader({}, edu);  
  103.   
  104.         var store = new Ext.data.Store({  
  105.             proxy : proxy,  
  106.             reader : reader  
  107.         });  
  108.   
  109.         store.load();  
  110.   
  111.         var chkEdu = new Ext.form.ComboBox({  
  112.             name : "chkEdu",  
  113.             fieldLabel : "最高学历",  
  114.             store : store,  
  115.             mode : "local",  
  116.             triggerAction : "all",  
  117.             emptyText : "请选择最高学历",  
  118.             displayField : "ename",  
  119.             valueField : "eid",  
  120.             value : 3  
  121.         //缺省值   
  122.         });  
  123.   
  124.         var numLove = new Ext.form.NumberField({  
  125.             name : "numLove",  
  126.             fieldLabel : "最喜欢的数字"  
  127.         });  
  128.   
  129.         var areaAddress = new Ext.form.TextArea({  
  130.             name : "areaAddress",  
  131.             fieldLabel : "家庭住址",  
  132.             width : 500,  
  133.             height : 50  
  134.         });  
  135.   
  136.         var timeWork = new Ext.form.TimeField({  
  137.             name : "timeWork",  
  138.             fieldLabel : "上班时间",  
  139.             increment : 30,  
  140.             format : "H:i"  
  141.         });  
  142.   
  143.         var htmlIntro = new Ext.form.HtmlEditor({  
  144.             name : "htmlIntro",  
  145.             fieldLabel : "个人简介",  
  146.             enablelist : false,  
  147.             enableSourceEdit : false,  
  148.             height : 150  
  149.         });  
  150.   
  151.         var txtPhoto = new Ext.form.TextField({  
  152.             name : "txtPhoto",  
  153.             inputType : "file",  
  154.             fieldLabel : "照片",  
  155.             width : 500  
  156.         });  
  157.   
  158.         var btnSubmit = new Ext.Button({  
  159.             text : "提交"  
  160.         });  
  161.   
  162.         var btnReset = new Ext.Button({  
  163.             text : "重置",  
  164.             handler : function() {  
  165.                 f.getForm().reset();  
  166.             }  
  167.         });  
  168.   
  169.         var f = new Ext.form.FormPanel(  
  170.                 {  
  171.                     //  url : "/FormServlet",  
  172.                     method : "post",  
  173.                     renderTo : "a",  
  174.                     title : "新增用户",  
  175.                     stytle : "padding:10px",  
  176.                     frame : true,  
  177.                     labelAlign : "right",  
  178.                     width : 650,  
  179.                     autoHeight : true,  
  180.                     items : [ txtName, txtpassWord, grpSex, dateBrithday,  
  181.                             grpGobby, chkEdu, numLove, areaAddress, timeWork,  
  182.                             htmlIntro, txtPhoto ],  
  183.                     buttons : [ btnSubmit, btnReset ]  
  184.                 });  
  185.   
  186.     });  
  187. </script>  
  188. </head>  
  189. <body>  
  190.     <div id="a"></div>  
  191. </body>  
  192. </html>  

这个例子将常用的控件都做了基本的展示练习，其中某些属性也许你不是很明白，那就去找api吧，他会清清楚楚的告诉你，再者多尝试修改自然而然就明白了，一个很简单的方式是将不明白的属性注释掉的效果和没有注释掉的效果进行比较也能帮助自己理解

 

相关文章：

【初学EXT】基础知识

【初学EXT】eclipse 部署EXTJS

 

分享到：
| 【初学EXT】基础知识
评论
发表评论

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

相关推荐

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