关闭

Etxjs

623人阅读 评论(0) 收藏 举报

Extjs

环境搭配:(详见笔记——张海主讲)

1,spket集成到myeclipse,解压文件,把文件放到myeclipse中的dropins文件夹中:

2,在myeclipsewindows->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="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) {
					//一上一級組件的形式去查找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();
	
});



2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14466次
    • 积分:519
    • 等级:
    • 排名:千里之外
    • 原创:38篇
    • 转载:3篇
    • 译文:0篇
    • 评论:3条
    最新评论