ExtJS第一天实例

来源：互联网发布：带网络的电视机编辑：程序博客网时间：2024/05/22 14:24
第一步当然是引进类库文件啦，具体引进的东西可以看上一篇博客第二步：创建一个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();});