天天看點
傳回

【初學EXT】控件練習

上一篇： 【初學EXT】基礎知識

書看的差不多了，那就來練習吧！相信你也知道，練習控件最好的界面莫過于“使用者注冊”，還等什麼，快快動手吧

不考慮布局，隻是簡單的熟悉常用控件及常用控件對應的屬性

友情提示：

1、如果控件不夠熟悉，那就照着代碼敲，熟能生巧

2、标點符号一定要是英文的

3、有效利用浏覽器的錯誤提示資訊，幫助自己糾錯吧

4、一定要注意每次最後一個屬性後面沒有逗号，這個錯誤影響了我很多次

練習界面如下：

【初學EXT】控件練習

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css"
	href="EXT/resources/css/ext-all.css" target="_blank" rel="external nofollow"  />
<script type="text/javascript" src="EXT/ext-base.js"></script>
<script type="text/javascript" src="EXT/ext-all.js"></script>
<script type="text/javascript" src="EXT/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {//頁面初始化代碼
		var txtName = new Ext.form.TextField({
			nme : "txtName",
			fieldLabel : "姓名",
			width : 200
		});

		var txtpassWord = new Ext.form.TextField({
			name : "txtpassWord",
			fieldLabel : "密碼",
			inputType : "password",
			width : 200
		});

		var rdaSexMan = new Ext.form.Radio({
			name : "rdaSex",
			inputValue : "男",//實際值
			boxLabel : "男",//顯示值
			checked : true
		//是否預設
		});

		var rdaSexWomen = new Ext.form.Radio({
			name : "rdaSex",
			inputValue : "女",//實際值
			boxLabel : "女",//顯示值
		//  width:150
		});

		var grpSex = new Ext.form.RadioGroup({
			name : "sex",
			fieldLabel : "性别",
			items : [ rdaSexMan, rdaSexWomen ],
			width : 100
		});

		var dateBrithday = new Ext.form.DateField({
			name : "birthday",
			fieldLabel : "出生日期",
			format : "Y-m-d",//指定日期格式，Y表示四位數年，m表示月，d表示日
			value : new Date()
		//預設目前日期
		});

		var chkhobby1 = new Ext.form.Checkbox({
			name : "chkHobby",
			inputValue : "釣魚",
			boxLabel : "釣魚",
			checked : true
		});

		var chkhobby2 = new Ext.form.Checkbox({
			name : "chkHobby",
			inputValue : "聚會",
			boxLabel : "聚會"
		});

		var chkhobby3 = new Ext.form.Checkbox({
			name : "chkHobby",
			inputValue : "遊泳",
			boxLabel : "遊泳"
		});

		var chkhobby4 = new Ext.form.Checkbox({
			name : "chkHobby",
			inputValue : "打球",
			boxLabel : "打球"
		});

		var grpGobby = new Ext.form.CheckboxGroup({
			name : "hobby",
			fieldLabel : "您的愛好",
			items : [ chkhobby1, chkhobby2, chkhobby3, chkhobby4 ],
			width : 300
		});

		var data = [ [ 1, "博士" ], [ 2, "研究所學生" ], [ 3, "大學大學" ], [ 4, "專科" ],
				[ 5, "高中" ], [ 6, "其他" ] ];

		var proxy = new Ext.data.MemoryProxy(data);

		var edu = Ext.data.Record.create([ {
			name : "eid",
			type : "int",
			mapping : 0
		}, {
			name : "ename",
			type : "string",
			mapping : 1
		} ]);

		var reader = new Ext.data.ArrayReader({}, edu);

		var store = new Ext.data.Store({
			proxy : proxy,
			reader : reader
		});

		store.load();

		var chkEdu = new Ext.form.ComboBox({
			name : "chkEdu",
			fieldLabel : "最高學曆",
			store : store,
			mode : "local",
			triggerAction : "all",
			emptyText : "請選擇最高學曆",
			displayField : "ename",
			valueField : "eid",
			value : 3
		//預設值 
		});

		var numLove = new Ext.form.NumberField({
			name : "numLove",
			fieldLabel : "最喜歡的數字"
		});

		var areaAddress = new Ext.form.TextArea({
			name : "areaAddress",
			fieldLabel : "家庭住址",
			width : 500,
			height : 50
		});

		var timeWork = new Ext.form.TimeField({
			name : "timeWork",
			fieldLabel : "上班時間",
			increment : 30,
			format : "H:i"
		});

		var htmlIntro = new Ext.form.HtmlEditor({
			name : "htmlIntro",
			fieldLabel : "個人簡介",
			enablelist : false,
			enableSourceEdit : false,
			height : 150
		});

		var txtPhoto = new Ext.form.TextField({
			name : "txtPhoto",
			inputType : "file",
			fieldLabel : "照片",
			width : 500
		});

		var btnSubmit = new Ext.Button({
			text : "送出"
		});

		var btnReset = new Ext.Button({
			text : "重置",
			handler : function() {
				f.getForm().reset();
			}
		});

		var f = new Ext.form.FormPanel(
				{
					//	url : "/FormServlet",
					method : "post",
					renderTo : "a",
					title : "新增使用者",
					stytle : "padding:10px",
					frame : true,
					labelAlign : "right",
					width : 650,
					autoHeight : true,
					items : [ txtName, txtpassWord, grpSex, dateBrithday,
							grpGobby, chkEdu, numLove, areaAddress, timeWork,
							htmlIntro, txtPhoto ],
					buttons : [ btnSubmit, btnReset ]
				});

	});
</script>
</head>
<body>
	<div id="a"></div>
</body>
</html>

這個例子将常用的控件都做了基本的展示練習，其中某些屬性也許你不是很明白，那就去找api吧，他會清清楚楚的告訴你，再者多嘗試修改自然而然就明白了，一個很簡單的方式是将不明白的屬性注釋掉的效果和沒有注釋掉的效果進行比較也能幫助自己了解

extjs
上一篇: HikariCP MBean (JMX) Monitoring and Management
下一篇: RTX與反射記憶體

繼續閱讀