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

Etxjs

2015-11-18 19:32 531 查看

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  cancel
console.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(){
//number
var num1=10;
var num2=10.5;
var num3=.6;//0.6
var num4=070;//66
var 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="https://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) {
//一上一級組件的形式去查找ownerCt
alert(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) {
//一上一級組件的形式去查找ownerCt
alert(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();

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航