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

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

<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/login/login.js"></script>

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

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”。

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