ext-js基础
javascript的关键字
关键字（keywords)
var 在类或方法不使用，将变量会变成全局变量
基本数据类型
Number(数字类型）
1、整形常量
2、实际常量
特殊数据NaN、Infinity、isNaN()、isFinite()--(是否无穷)
Boolean(布乐值）
String字符串
null常量
undwfined常量（未定义）
方法名修饰为静态成员方法
火狐在firedug提供了console方法，它的console.dir(对象/方法名)列出所有属性和方法;
使用addEventListener或者attachEvent
w3c Dom标准
IE中独有的事件监听方法：
访问一个对象的构造函数，使用constructor
函数申明：
闭包示例的：
作用或与this
提供了类似于数组属性下标的方式访问
在类型下添加prototype所有的对象都有这个方法
继成
多态
打字游戏
ajax同步传输与异步传输
指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
默认true，是异步传输，它不会等待服务器响应的结果，同步时，会一直等待响应，直到有结果时程序才继续向下执行。
如果用post方法时，必须设置请求头，如：xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
返回xml时通过responseXML返回，而不是responseText
通过返回JSON时，例如：将头文件改成text/json,{"code":"dfj","msg":"jfkdjk"},在js获得var msg = eval("("+xml.responseText+")"); code = msg.code;msg=msg.msg;
当回调函数需要传入参数时，要写一个匿名函数，在匿名函数中调用这个带参数的函数
例如：callback函数中添加两个属性可以
function(){handler(name,age);}
开始ExtJS
引入extjs样式文件
引入extjs的脚本库(一个是驱动adapte,另外一个ext-all.js)
ext应用代码，使用Ext.onReady来调用ExtJS组件
如果添加其它框架，要添加驱动相应adapte，及框架使用
第一个Hello world程序
显示一棵树
关键字（keywords)
引用
break else new case finally return void catch for switch while continue function this with default if throwdelete in try do instancesof typeof
var 在类或方法不使用，将变量会变成全局变量
基本数据类型
Number(数字类型）
1、整形常量
2、实际常量
特殊数据NaN、Infinity、isNaN()、isFinite()--(是否无穷)
Boolean(布乐值）
String字符串
null常量
undwfined常量（未定义）
方法名修饰为静态成员方法
火狐在firedug提供了console方法，它的console.dir(对象/方法名)列出所有属性和方法;
fuction getEvent(e){
e=e||event;
alert(e); //兼容IE火狐
}
window.onload=function(){
document.ElementById("test").onclick=getEvent;
}
使用addEventListener或者attachEvent
w3c Dom标准
引用
[Object].addEventLister("name_of_event",fnHandler,bCapture); //bCapture是否传播true/false冒泡
[Object].removeEventLister("name_of_event",fnHandler,bCapture);
[Object].removeEventLister("name_of_event",fnHandler,bCapture);
IE中独有的事件监听方法：
引用
[Object].attachEvent("name_of_event",fnHandler);
[Object].detachEvent("name_of_event",fnHandler);
[Object].detachEvent("name_of_event",fnHandler);
if(document.all){
//IE
document.ElementById("test").attachEvent("onclick",test);
}else{//Ff
document.ElementById("test").addEventListener("click",test,false);
}
//鼠标阻止右键事件
<script type="text/javascript">
window.onload=function(){
document.oncontextmenu=function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false; //IE
}
}
}
</script>
//默认事件
<script type="text/javascript">
$(a).click=function(){
document.oncontextmenu=function(e){
e = e || event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false; //IE
}
}
}
</script>可变参数：arguments
function sum(){
var s=0;
for(var i=0;i<arguments.length;i++){
s+=arguments[i];
}
return s;
}
访问一个对象的构造函数，使用constructor
var a=1; alert(a.constructor); alert(typeof a); var d1=[122,123]; //数组 alert(typeof d1 == "object" && d1.constructor==Array);
函数申明：
function s1(){
return 111;
}
alert(s1());
var s1=function(){
return 111;
}
alert(s1());
var s2=new Function("alert(123);");
s2();
闭包示例的：
function f1(){
var dd=0;
var f2=function(){
dd++;
alert(dd);
}
return f2;
}
var f3=f1();
f3();
f3();
f3();
作用或与this
var obj = new Object();
obj.v ="this test";
相当于 var obj2={v:"this test"};
//作用或
var b1 = {v:"this is b1"}
var b2 = {v:"this is b2"}
function b(d,r){
alert(this.v+d+r);
}
b("11","22"); //输出undefined
window.b("23","erer"); //输出undefined;
b.call(); //调用一个函数b();===b.call();
b.call(b1,"13","35"); //输出：this is b1
b.apply(b2,["121","ewre"]); //输出：this is b2
var b3={v:"this is b3",sayHello:function(){
alert(this.v);
}}
b3.sayHello(); //输出this is b3
b3.sqyHello.call(b1);//输出this is b1
提供了类似于数组属性下标的方式访问
b3.v="23323";
b3["v"]="wewre";
for(var key in b3){
alert(key+":"+b3[key]);//alert(key+":"+b3.key);
}
delete b3.v; // 删除属性
alert(b3.v); //输出undefined
类的扩展，修改
var b=new Number(2);
b.add=function(b){
return this+b;
}
alert(b.add(3));
在类型下添加prototype所有的对象都有这个方法
Number.prototype.add=function(b){
return this+b;
}
alert(b.add(2)); //正常输出
var c=100;
alert(c.add(100).add(200).add(300));
构造一个数组：
Array.prototype.indexOf=function(v){
for(var i=0;i<this.length;i++){
if(this[i]==v) return i;
}
return -1;
}
var ddd=[1,2,3];
alert(ddd.indexOf(2));
继成
function classA(name){
this.name = name;
this.showName=function(){alert(this.name)};
}
function classB(name){
//方法一
this.newMethod = classA;
this.newMethod(name);
delete this.newMethod;
/**方法二**/
classA.call(this,name);
//方法三
classA.apply(this,[name]);
}
function classC(name){
this.name = name;
}
obj = new classA("hello");
objb = new classB("by");
//方法四 原形链
classC.prototype=objb;
obj.showName();
objb.showName();
alert(objb.name);
var objc=new classC("obj c");
objc.showName();
多态
var a =[12,44,"hfhj",new Date()];
for(var s in a){
alert(a[s].toString());
}
打字游戏
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 打字游戏 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
var keys = [], currentKeys = [], gameTimer,maxNum=0,rightNum=0;
for ( var i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) {
keys.push(String.fromCharCode(i));
}
function beginGame() {
/*var div=document.getElementById("div1");
moveLetter(div);*/
gameTimer = setInterval(createLetter, 1000);
}
function stopGame() {
if (gameTimer)
clearInterval(gameTimer);
var s="总字符数："+maxNum+";正确的次数："+rightNum;
var msg=document.createElement("div");
msg.innerHTML = s;
document.body.appendChild(msg);
}
function moveLetter(div) {
function moveNext() {
var top = parseInt(div.style.top);
if (top > (screen.availHeight - 240)) {
clearInterval(timer);
if(div.timeId)
div.parentNode.removeChild(div);
var ks=[];
for(var i=0;i<currentKeys.length;i++){
if(currentKeys[i]!=div){
ks.push(currentKeys[i]);
}
}
currentKeys=ks;
} else {
div.style.top = (top + 30) + "px";
}
}
var timer = setInterval(moveNext, 500);
div.timeId = timer; //添加一个属性
}
function createLetter() {
/*var div=document.createElement("div");
div.style.top="30px";
div.style.left=((screen.width-100)*Math.random())+"100px";
div.style.position="absolute";
div.innerHTML="<font size=\"18\"><b>A</b></font>";
*/
var le = document.getElementById("div1");
var div = le.cloneNode(true);
var keyIndex = Math.floor(Math.random() * 26);
div.innerHTML = "<font size=\"18\"><b>" + keys[keyIndex]
+ "</b></font>";
div.style.left = ((screen.width - 100) * Math.random()) + "100px";
div.style.display = "";
document.body.appendChild(div);
moveLetter(div);
div.keyCode = keys[keyIndex]; //添加一个keyCode属性。
currentKeys.push(div);
maxNum ++;
}
function checkInputKey(e) {
e = e || event;
var ks = [];
for ( var i = 0; i < currentKeys.length; i++) {
if (currentKeys[i].keyCode === String.fromCharCode(e.keyCode)) {
currentKeys[i].parentNode.removeChild(currentKeys[i]);
clearInterval(currentKeys[i].timeId);
rightNum ++;
delete currentKeys[i].timeId;
} else {
ks.push(currentKeys[i]);
}
}
currentKeys = ks;
}
if (document.attachEvent) {
document.attachEvent("onkeydown", checkInputKey);
} else {
document.addEventListener("keydown", checkInputKey, false);
}
//document.onkeypress=function(e){
//alert(e);
//}
</script>
</HEAD>
<BODY>
<a href="javascript:beginGame()">开始游戏</a> <a href="javascript:stopGame()">结束游戏</a> <a href="javascript:createLetter()">创建新的节点</a>
<div id="div1" style="position:absolute;top:30px;left:100px;width:50px;height:50px;display:none;"><font size="18"><b>A</b></font></div>
</BODY>
</HTML>
ajax同步传输与异步传输
指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
默认true，是异步传输，它不会等待服务器响应的结果，同步时，会一直等待响应，直到有结果时程序才继续向下执行。
function createXMLHttpRequest() {
var objXMLHttp = null;
//对于Mozilla、Firefox、Opera等浏览器
try {
objXMLHttp = new XMLHttpRequest();
}
//对于Internet Explorer浏览器
catch (e) {
var MSXML = [ 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ];
for ( var n = 0; n < MSXML.length; n++) {
try {
//创建XMLHttpRequest对象
objXMLHttp = new ActiveXObject(MSXML[n]);
break;
} catch (e) {
}
}
}
return objXMLHttp;
}
事件监听流程：
function checkUser(user){
var username = user.value;
var xml = createXMLHttpRequest();
xml.open("get","checkUser.jsp?name="+username);
xml.send(null);
xml.onreadystatechange = function(){
//alert("readyState:"+xml.readyState+"\t\r"+"status:"+xml.status);
if(xml.readyState==4){
if(xml.status==200 || xml.status==304){
alert(xml.responseText);
}
}
}
}
如果用post方法时，必须设置请求头，如：xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
返回xml时通过responseXML返回，而不是responseText
通过返回JSON时，例如：将头文件改成text/json,{"code":"dfj","msg":"jfkdjk"},在js获得var msg = eval("("+xml.responseText+")"); code = msg.code;msg=msg.msg;
当回调函数需要传入参数时，要写一个匿名函数，在匿名函数中调用这个带参数的函数
例如：callback函数中添加两个属性可以
function(){handler(name,age);}
开始ExtJS
引入extjs样式文件
引入extjs的脚本库(一个是驱动adapte,另外一个ext-all.js)
ext应用代码，使用Ext.onReady来调用ExtJS组件
如果添加其它框架，要添加驱动相应adapte，及框架使用
第一个Hello world程序
Ext.onReady(function(){
var win = new Ext.Window({
width:500,
height:400,
title:"第一个窗口",
buttons:[{text:"确定"},{text:"取消"}]
});
win.show();
});
显示一棵树
var tree=new Ext.tree.TreePanel({
title:"小树一棵",width:200,height:200,
root:new Ext.tree.AsyncTreeNode({text:"树根",children:[{text:"叶子1",leaf:true},{text:"叶子2",leaf:true}]})
});