如何使用ExtJS Design中生成的代码

首先需要在页面引入所需的js和css文件：

 

<link rel="stylesheet" type="text/css" href="/WebShare/extjs4.0.7/resources/css/ext-all.css" /> 
  <script type="text/javascript" src="/WebShare/extjs4.0.7/bootstrap.js"></script>

<script type="text/javascript" src="js/login/login.js"></script>

修改ExtJs Designer自动生成的代码，放入login.js文件中，第4行renderTO以及第50行是需要在自动生成代码上进行修改的部分。

1. Ext.onReady(function() {
2. Ext.MyForm = Ext.extend(Ext.form.FormPanel, {
3. xtype : "form",
4. renderTo : "login-panel",
5. title : "系统登录",
6. labelWidth : 100,
7. labelAlign : "left",
8. layout : "absolute",
9. width : 333,
10. height : 213,
11. padding : "10px",
12. initComponent : function() {
13. this.items = [ {
14. xtype : "label",
15. text : "用户名：",
16. x : 50,
17. y : 35
18. }, {
19. xtype : "label",
20. text : "密码：",
21. x : 60,
22. y : 85
23. }, {
24. xtype : "textfield",
25. fieldLabel : "标签",
26. anchor : "90%",
27. x : 120,
28. y : 30
29. }, {
30. xtype : "textfield",
31. fieldLabel : "标签",
32. anchor : "90%",
33. x : 120,
34. y : 80
35. }, {
36. xtype : "button",
37. text : "登 录",
38. x : 100,
39. y : 130
40. }, {
41. xtype : "button",
42. text : "重 置",
43. x : 180,
44. y : 130
45. } ]
46. Ext.MyForm.superclass.initComponent.call(this);
47. }
48. });
50. var myForm = new Ext.MyForm();
51. });

Ext.onReady(function() {
		Ext.MyForm = Ext.extend(Ext.form.FormPanel, {
			xtype : "form",
			renderTo : "login-panel",
			title : "系统登录",
			labelWidth : 100,
			labelAlign : "left",
			layout : "absolute",
			width : 333,
			height : 213,
			padding : "10px",
			initComponent : function() {
				this.items = [ {
					xtype : "label",
					text : "用户名：",
					x : 50,
					y : 35
				}, {
					xtype : "label",
					text : "密码：",
					x : 60,
					y : 85
				}, {
					xtype : "textfield",
					fieldLabel : "标签",
					anchor : "90%",
					x : 120,
					y : 30
				}, {
					xtype : "textfield",
					fieldLabel : "标签",
					anchor : "90%",
					x : 120,
					y : 80
				}, {
					xtype : "button",
					text : "登 录",
					x : 100,
					y : 130
				}, {
					xtype : "button",
					text : "重  置",
					x : 180,
					y : 130
				} ]
				Ext.MyForm.superclass.initComponent.call(this);
			}
		});
		
		var myForm = new Ext.MyForm();
	});

最后在页面body的对应位置添加一个div元素，元素名必须要和renderTo中的值一致，在这里名字需要把名字命名为“login-panel”。

1. <div id="login-panel"></div>