第一步当然是引进类库文件啦,具体引进的东西可以看上一篇博客 第二步:创建一个jsp文件 Helloword.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- 引入extjs的css样式文件 --> <link rel="stylesheet" type="text/css" href="/extjs_01/ext-4.0/resources/css/ext-all.css"> <!-- 引入使用extjs所依赖的js文件 交给引导程序处理--> <script type="text/javascript" src="/extjs_01/ext-4.0/bootstrap.js"></script> <!-- 引入自己的js文件 extjs所依赖的js文件的引入一定要在自己的js之前引入--> <script type="text/javascript" src="/extjs_01/example/lession01/hw.js"></script> </head> <body> </body> </html> 第三步:编写js文件 //当窗体加载完毕后,触发匿名函数 Ext.onReady(function(){ //alert("开始了"); //弹出一个提示框 Ext相当于命名空间 //Ext.MessageBox.alert("aaaaa"); //Ext.MessageBox.alert("标题","这里是内容"); //javascript类 function User(name,sex,age){ this.name=name; this.sex=sex; this.age=age; this.showMsg=function(){ Ext.MessageBox.alert("演示js原始的创建对象的方法","创建user1对的姓名是======"+this['name']+" 性别是====="+this['sex']+" 年龄是===="+this['age']); } } //创建类的对象 var user1=new User("小爽","女","1"); //user1.name user1['name'] //Ext.MessageBox.alert("演示js原始的创建对象的方法","创建user1对的姓名是======"+user1['name']); //user1.showMsg(); var user2 = { name : "小狼", sex : "男", age : "2", toString : function() { Ext.MessageBox.alert("演示js原始的创建对象的方法", "创建user2对象的姓名是:" + this['name'] + " 性别是:" + this['sex'] + " 年龄是:" + this['age']); } }; //user2.toString(); //Array数组 var arrs=[1,2,3,4,-3,-4]; //遍历数组-------老方式 /*for(var i=0;i<arrs.length;i++){ alert(arrs[i]); } //过滤 值小于0的排除 for(var i=0;i<arrs.length;i++){ if(arrs[i]>0){ alert(arrs[i]); } }*/ var newArrs = Ext.Array.filter(arrs, function(item) { if (item > 0) { //真假 如果返回的是true 就保留数组元素 如果是false 就不保留数组元素 return true; } else { //不处理操作 return false; } }, this); alert(newArrs.join("\n")); Ext.Array.each(newArrs,function(item){ alert(item); }); }); Js文件写的有点儿乱,可以从上到下把注释取消一步一步的测,可能会发现你想要的 关于窗体的创建: Ext.onReady(function(){ //extjs4.0自带的窗体 /*var win=Ext.create("Ext.window.Window",{ width:300, height:400, title:"第1111111111111111111个窗体" }); win.show();*/ //自定义一个窗体 Ext.define("my.pck.myWindow",{ extend:"Ext.window.Window", width:300, height:400, title:"你好", initComponent:function(){ this.callParent(arguments); } }); /*var myMin=new my.pck.myWindow({}); myMin.show();*/ Ext.create("my.pck.myWindow",{ title:"这是自己创建的窗体", width:400 }).show(); });