您的位置：首页 > Web前端 > JavaScript

ExtJS第一天实例

2012-05-07 17:50 134 查看 
第一步当然是引进类库文件啦，具体引进的东西可以看上一篇博客
第二步：创建一个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();
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航