如何使用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>
页:
[1]