Etxjs
来源：互联网 发布：网络视频下载app 编辑：程序博客网 时间：2024/05/29 07:21
Extjs
环境搭配：（详见笔记——张海主讲）
1,把spket集成到myeclipse，解压文件，把文件放到myeclipse中的dropins文件夹中：
2，在myeclipse中windows->preferences->spket进行设置，另外还要设置.js
3,在工程中需要引入的包和库：
Ext.onReady:这个方法是Ext的准备函数，也就是Ext相关的代码都会在这个函数里书写，它比较类似于windowonload方法。但是注意其执行时机是在页面DOM对象加载完毕之后立即执行。
Ext.window.MessageBox:提供EXTJS的弹出提示框，确认框等简单的小组件。
注意：要导的包：
要导入的库：<!--ext的样式--><link rel="Stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" /><!--extjs的核心文件--><script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script> <!--国际化文件--> <script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script> <script type="text/javascript" charset="utf-8" src="test.js"></script> <script type="text/javascript" charset="utf-8" src="test2.js"></script>
案例：index.jsp:
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--ext的样式--><link rel="Stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" /><!--extjs的核心文件--><script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script> <!--国际化文件--> <script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script> <script type="text/javascript" charset="utf-8" src="test.js"></script> <script type="text/javascript" charset="utf-8" src="test2.js"></script> </head> <body> <br> </body></html>
text2.js:
Ext.onReady(function(){//提示信息/*Ext.MessageBox.alert("我是标题2","Helloworld!",function(){console.info(this);alert("我是回调函数！");},this);*///询问框/*Ext.Msg.confirm('提示信息3','确认删除该条记录么？',function(op){if(op=='yes'){alert('确认了');}else{alert('取消');}});*///输入框/*Ext.Msg.prompt('我是标题','请输入姓名:',function(op,val){//op ok cancelconsole.info(op);console.info(val);},this,true,'张三');*///等待框/*Ext.Msg.wait('加载进度','提示信息',{interval:400,//循环定时的间隔duration:20000,//总时长increment:15,//执行进度条的text:'加载中,请稍后.....',//提示文字scope:this,//fn:function(){alert('更新成功！');},animate:true //更新渲染时的动画效果});*///show方法Ext.Msg.show({title:'我是自定义的提示框',msg:'我是警告',width:300,height:300,buttons:Ext.Msg.YESNOCANCEL,icon:Ext.Msg.WARNING});});javascript:
好书推荐《javascript高级程序设计》，《javascript设计模式》
javascript的6种基本类型：
number,string,boolean,object,function和undefilned;
过滤器的写法：
//过滤器filter
var arr=[10,20,21,35,18];
var newarr=arr.filter(function(item){
if(item>20){
return true;
}else{
return false;
}
});
alert(newarr);
//三种函数的写法：
//1,function语句式
function fun1(){
alert('fun1...');
};
//2，函数直接量形式
var fun2=function(){
alert('fun2...');
};
//3,构造函数形式
var fun3=new Function('fun3...');
var fun4=new Function('x','y','return x+y;');
alert(fun4(10,20));
Ext.onReady(function(){//numbervar num1=10;var num2=10.5;var num3=.6;//0.6var num4=070;//66var num5=1/0;//正无穷//string//object/*var date=new Date();var arr=new Array();var obj={name:'bjsxt',age:10};obj.constructor();alert(obj.hasOwnProperty('name'));alter(obj.toSource());*///function函数类型/*function fun(){console.info('fun...');}alert(typeof fun);*///过滤器filter/*var arr=[10,20,21,35,18];var newarr=arr.filter(function(item){if(item>20){return true;}else{return false;}});alert(newarr);*///三种函数的写法：//1,function语句式function fun1(){alert('fun1...');};//2，函数直接量形式var fun2=function(){alert('fun2...');};//3,构造函数形式var fun3=new Function('fun3...');var fun4=new Function('x','y','return x+y;');alert(fun4(10,20));});/*var k=1;function test(){var k=2;//创建第二种方式的函数function f(){return k;}var f=function(){return k;};var f=new Function('return k;');alert(f());};test();*/arguments对象：
//arguments对象：//第一个作用：接收函数的实际参数:arguments.callee表示引用当前函数本身function test(x,y){alert(arguments.length);alert(arguments[2]);};test(1,2);//第二个作用：通常用于递归操作function fact(number){if(number<=1){return 1;}else{return number*fact(number-1)}};alert(fact(5));var fact2=fact;fact=null;alert(fact2(5));尚学堂06,07讲javascript还未看，以后补上。
Ext.window.window(一)
Ext.onReady(function(){Ext.create('Ext.window.Window', { title: '我的第一个组件window', height: 200, width:300, layout:'fit',constrain:true,//限制窗体不超出浏览器边界 renderTo:Ext.getBody() }).show(); });效果：
注：
constrain:true,//限制窗体不超出浏览器边界
constrainHeader:true,//不允许浏览器的title超出浏览器边界
Ext.onReady(function(){Ext.create('Ext.window.Window', { title: '我的第一个组件window', height: 200, width:300, layout:'fit', constrain:true,//限制窗体不超出浏览器边界 constrainHeader:true,//不允许浏览器的title超出浏览器边界 modal:true,//设置一个模态窗口 plain:true, icon:'js/icon/window.png',//图标，是图片路径 iconCls:'',//是css样式 x:50, y:50,//定窗口位置 onEsc:Ext.getBody(),//按Esc键时关闭窗口 autoScroll:true,//滚动条 html:'<div style=width:200px;height:200px;>我是第一个div</div><div style=width:200px;height:200px;>我是第二个div</div>', renderTo:Ext.getBody() }).show(); });<img src="http://img.blog.csdn.net/20151119202926109?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />案例1：点击一个按钮，打开一个窗体，并要求避免重复创建
Ext.create('Ext.Button', { text : 'Button', renderTo : Ext.getBody(), listeners: { click: function() { Ext.create('Ext.window.Window',{ title:'新窗体', height: 200, width:300, layout:'fit', renderTo:Ext.getBody() }).show(); } }});});代码更新：
Ext.onReady(function(){//案例1：点击一个按钮，打开一个窗体，并要求避免重复创建 //法一 Ext.create('Ext.Button', { text : 'Button', renderTo : Ext.getBody(), listeners: { click: function() { if(!Ext.getCmp('mywin')){//法二：模态避免了重复创建窗体的问题： Ext.create('Ext.window.Window',{ id:'mywin',//如果给主键加了id，那么就会被EXT管理 title:'新窗体', height: 200, width:300, layout:'fit', renderTo:Ext.getBody() //modal:true //法一：模态避免了重复创建窗体的问题： }).show(); } } }});/*//法二：var win=Ext.create('Ext.window.Window',{title:'第二种方法创建的新窗体',height:300,width:400,renderTo:Ext.getBody()});Ext.get('btn').on('click',function(){});*/});效果：
案例二：在组件中添加子组件（用items添加）
代码：
Ext.onReady(function(){//例二：添加子组件及查找组件var win=new Ext.window.Window({title:"添加子组件实例",height:400,width:"40%",renderTo:Ext.getBody(),draggable:false ,//不允许拖拽resizable:false ,//不可以改变窗口大小closable:true , //是否可以关闭窗口collapsible:true, //是否可折叠bodyStyle:'background:#fcf;padding:10px;',//设置样式html:'我是window的内容',//Ext items配置子组件的配置项items://items添加子组件[{//Ext组件给我们提供了一个简单的写法，xtype属性xtype:'panel',width:'100%',height:100,html:'我是面板！！'},{xtype:'button',text:'按钮',handler:function(btn){//handler:每个绑定到当前action的组件，在主要的事件被触发时，都会调用的函数。alert('我被点击了');alert(btn.text);}}]});win.show();});效果：
案例二之查找组件：
代码：
Ext.onReady(function(){var win=new Ext.Window({id:'mywin',title:'操作组件的形式',width:500,height:300,bodyStyle:'background:#fcf;padding:10px;',renderTo:Ext.getBody(),fbar :// 表示当前组件的底部位置添加一个工具条,bbar表示在下面添加，tbar表示在当前组件的顶部，同理有lbar和rbar;[{text : '按钮1',handler : function(btn) {// 组件都会有up和down这两个方法，表示向上或者向下查找，需要的参数是组件的xtype或者选择器alert(btn.up('window').title);}}, {text : '按钮2',handler : function(btn) {//最常用的方式alert(Ext.getCmp('mywin').title);}}, {text : '按钮3',handler : function(btn) {//一上一級組件的形式去查找ownerCtalert(btn.ownerCt.ownerCt.title);//console.info(btn.ownerCt);}}] });win.show();});效果：
重点：
查找组件的三种方法：
[{text : '按钮1',handler : function(btn) {// 组件都会有up和down这两个方法，表示向上或者向下查找，需要的参数是组件的xtype或者选择器alert(btn.up('window').title);}}, {text : '按钮2',handler : function(btn) {//最常用的方式alert(Ext.getCmp('mywin').title);}}, {text : '按钮3',handler : function(btn) {//一上一級組件的形式去查找ownerCtalert(btn.ownerCt.ownerCt.title);//console.info(btn.ownerCt);}}] 案例003：用windowGroup去操作多個窗口
代码：
Ext.onReady(function(){//案例003：用windowGroup去操作多個窗口 var wingroup=new Ext.WindowGroup(); for(var i=1;i<=5;i++){ var win=Ext.create('Ext.Window',{ title:'第'+i+'個窗口', id:'win_'+i, width:300, height:300, renderTo:Ext.getBody() }); win.show(); wingroup.register(win);//把窗體對象註冊給EindexManger } var btn1=Ext.create('Ext.button.Button',{ text:'全部隐藏', renderTo:Ext.getBody(), handler:function(){ wingroup.hideAll();//隱藏所有被管理額window組件 } }); var btn2=new Ext.Button({ text:'全部显示', renderTo:Ext.getBody(), handler:function(){ wingroup.each(function(cmp){ cmp.show(); }); } }); var btn3=new Ext.Button({ text:'把第3个窗口显示最前端', renderTo:Ext.getBody(), handler:function(){ wingroup.bringToFront('win_3'); } }); var btn4=new Ext.Button({ text:'第5个窗口显示在最末端', renderTo:Ext.getBody(), handler:function(){ wingroup.sendToBack('win_5'); } }); });效果：
Ext基础架构
定义一个类并实例化：
Ext.onReady(function(){//在Ext中如何定义一个类：Ext.define(className,properties);/*传统的javascrit写法：function Person(name,age){this.name=name;this.age=age;};*/Ext.define('Person',{//这里是对这个类的配置信息//config就是配置当前类的属性内容，并且会加上get和set方法config:{name:'张三',age:20},say:function(){alert('我是方法...');},//给当前定义的类加一个构造器constructor:function(config){var me=this;me.initConfig(config);}});var p=Ext.create('Person',{name:'王五',age:25});alert(p.getName());alert(p.getAge());p.say();});Ext.apply();为对象扩展属性或方法的:
应用代码：
Ext.onReady(function(){//Ext.js//Ext.apply();为对象扩展属性或方法的var src={name:'潘掌柜',age:20};var config={name:'佐酒先生',sex:'男'};Ext.apply(src,config);//name:潘掌柜 20 男for(var attr in src){alert(attr+ ":" +src[attr]);}});注意：apply与applyIf：
apply():为对象扩展属性或方法的
applyif():如果当前对象存在属性，就不copy，如果不存在，就copy
typeof()的用法：
Ext.typeOf():传回变量的类型var str='111';var num=20;alert(Ext.typeOf(str));alert(Ext.typeOf(num));
isArray()：枚举
//Ext.isArray()var arr=[1,2,3,4];Ext.iterate(arr,function(item){alert(item);});Ext.override:
用给定的值重写指定target的成员。
//Ext.override():用给定的值重写指定target的成员。Ext.define('User',{say:function(){alert('我是say......');}});var user=Ext.create('User');Ext.override(user,{say:function(){alert('我是覆盖的方法');}});user.say();
native还未看 ，以后补上
动态的创建窗口：
Ext.onReady(function(){//window/*Ext.create('Ext.Window',{title:'我是窗口',height:300,width:400,constrain:true,modal:true,html:'我是窗体的内容',renderTo:Ext.getBody()}).show();*///Ext MVC//先建一个模板Ext.define('Mywindow',{ //自己定义的类'Mywindow'extend:'Ext.window.Window',//继承Ext的window类title:'我是窗口',height:300,width:400,constrain:true,//modal:true,html:'我是窗体的内容',renderTo:Ext.getBody()});//创建模板的实例var w1=Ext.create('Mywindow',{title:'我是窗口1'});var w2=Ext.create('Mywindow',{title:'我是窗口2'});var w3=Ext.create('Mywindow',{title:'我是窗口3'});w1.show();w2.show();w3.show();});动态加载js
//第一步：js/extjs/添加文件夹(ux)
//第二步：在ux下建自己的组件对应相应的js
//第三步：启用extjs动态加载的机制并设置要加载的路径
//第四步：创建类的实例并使用
Mywindow.js代码如下：
//define的类名一定要严格按照包层次路径去编写Ext.define('js.extjs.ux.Mywindow',{extend:'Ext.window.Window',//继承Ext的window类title:'我是动态加载进来的组件',height:300,width:400,constrain:true,modal:true,html:'我是动态加载进来的组件',renderTo:Ext.getBody()});jsp中编辑如下：//动态加载js//第一步：js/extjs/添加文件夹(ux)//第二步：在ux下建自己的组件对应相应的js//第三步：启用extjs动态加载的机制并设置要加载的路径Ext.onReady(function(){Ext.Loader.setConfig({enabled:true,path:{myux:'js/extjs/ux'}});//第四步：创建类的实例并使用Ext.create('js.extjs.ux.Mywindow').show();});
2 0
