************************************************************************************************
快捷键： general-->Keys-->Command-->Content Assist
************************************************************************************************
修改ExtJS 字体大小
ext-all.css -->replace all(11px-->12px)
************************************************************************************************
003--001.js
Ext.onReady(function(){
/*Ext.MessageBox.alert('提示信息！','hello world!',function(){
console.info(this);
alert('我是回调函数！');
},this);*/
// Ext.Msg.alert('提示信息！','hello world!');
//确认框
/* Ext.Msg.confirm('提示信息','确认删除该条记录吗',function(op){
if(op=='yes'){
alert('confirm!');
}else{
alert('cancel!');
}
});*/
//确认框
/*Ext.Msg.prompt('我是标题','请输入姓名',function(op,val){
//op ok cancal
console.info(op);
console.info(val);
},this,true,'zhangsan');*/
//等待框
/*Ext.Msg.wait('提示信息','我是内容',{
interval: 400, //循环定时的间隔
duration: 2000,//总时长
increment: 3,//执行进度条的次数
text: '更新中...',
scope: this,
fn: function(){
alert('Done!');
},
animate:true
});*/
//show
Ext.Msg.show({
title: 'Address',
msg: 'Please enter your address:',
width: 300,
height:300,
buttons: Ext.Msg.YESNOCANCEL,
// multiline: true,
// fn: saveAddress,
// animateTarget: 'addAddressBtn',
icon: Ext.window.MessageBox.INFO //INFO ERROR QUESTION WARNING
});
});
************************************************************************************************
004--002-js01.js
Ext.onReady(function(){
var num6 = window.parseInt("dadaa"); //NaN
var date = new Date();
var arr = new Array();
var obj = {name:'bjsxt',age:10};
//alert(obj.hasOwnProperty('name'));
var result = obj.toSource();
//alert(typeof result); //string
obj.toString();
//Undefined 变量声明了，但是没有被赋值，其实也等同于Null
alert(undefined == null); //true
alert(undefined === null); //false
alert(typeof null); //Object 空对象的引用
//Function
function fun(){
console.info('fun....');
}
alert(typeof fun); //function
var arr = [1,2,3,4,5];
arr.forEach(function(item){
alert(item);
});
var newarr = arr.filter(function(item){
if(item>20){
return true;
}else{
return false;
}
});
alert(newarr);
});
************************************************************************************************
005--002-js02.js
//Function 函数
//前两种创建函数的主要区别:function语句形式 ,javascript解释器 直接回去找 , 其他的代码就从上到下顺序执行
//fun1();
//alert(fun2);
//fun2();
//1: function语句形式
//function fun1(){
// alert('fun1...');
//};
////2: 函数直接量的形式
//var fun2 = function(){
// alert('fun2...');
//};
//
////第三种构造函数形式 ，它具有的作用域与前两种不同，它具有*作用域
////3: 构造函数形式
//var fun3 = new Function('x','y','return x+y;');
////alert(fun3(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对象
//function test(x,y){
// // 第一个作用:接受函数的实际参数
// alert(arguments.length); // len = 3
// alert(arguments[2]); // val = 3
//};
//test(1,2,3);
// 第二个作用: 通常用于递归操作
// arguments.callee 表示引用当前函数本身
function fact(number){
if(number <= 1){
return 1 ;
} else {
return number*arguments.callee(number-1);
}
};
//alert(fact(5));
var fact2 = fact ;
fact = null ;
alert(fact2(5));
************************************************************************************************
006--闭包--002-js03.js
//This 关键字 在javas里 的使用
/*var x = 5; //window.x = 5;
function test(){
alert(this.x);
}
test.x = 10;
//alert(test.x); //10
window.test(); //undefined
*/
//call apply 主要作用域是绑定作用域
/*var color = 'red';
var obj = {color:'yellow'};
//alert(obj.color);
function showColor(x,y,z){
alert(x+y+z);
alert(this.color);
}
showColor();//red
*/
//call apply 绑定一个函数 作用域
/*showColor.call(window,10,20,30);//red
showColor.call(obj,10,20,30);//yellow
showColor.apply(obj,[2,3,4]);*/
//块的概念
(function(){
alert('zhixing..');
})();
/*function test(){
for(var i =1 ;i<=5;i++){
alert(i);
}
alert(i);//6
}
test();*/
/*function test(){
(function(){
for(var i =1 ;i<=5;i++){
alert(i);
}
})();
alert(i);//6
}*/
//test();
//闭包
//函数碰到return 直接返回，没有return 返回结果undefi
/*function test(){
return function(){
alert('我是闭包体代码');
}
}
var f= test();
//alert(typeof f);
f();
*/
/*var i=1;
function test(){
alert(i++);
}
*/
//闭包
/*var inp = (function(){
var i = 0;
return {
getCount:function(){
alert(++i);
}
}
})();*/
************************************************************************************************
007--闭包单体--002-js04.js
Ext.onReady(function(){
//var obj= new Object();
/*var obj = {name:'z3',age:20};
ob.sex = '男';
obj.age = 25;
delete obj.name;
//枚举对象内置属性的循环
for(var attr in obj){
alert(attr + ":" + obj[attr]);
}*/
/* var Person = function(name,age){
this.name = name;
this.age = age;
//private
var _sex = '男';//js的私有属性
this.getSex = function(){
return _sex;
};
this.setSex = function(){
_sex = sex;
}
};*/
// Person.prototype.id = 10;
// Person.prototype.method = function(){
// alert(this.age);
// }
//原型对象的构造器总是指向当前对象的模板
/* Person.prototype = {
constructor:Person,
id:10,
method:function(){
alert('method...');
}
}
var p = new Person('张三',30);
alert(p.name);
alert(p.id);
p.method();*/
//单体模式:
/*var SXT = {};
SXT.Array = {
each:function(){
alert('each...');
},
filter:function(){
alert('filter...');
}
};
SXT.staticMethod = function(){
alert('我是单体下的静态方法');
};
SXT.Array.each();
SXT.staticMethod();*/
//单体模式: 闭包单体
var SXT = (function(){
var Array = {
each:function(){
alert('each...');
}
};
return {
arrayEach:function(){
Array.each();
}
};
})();
SXT.arrayEach();
});
************************************************************************************************
008--window--003-window01.js
Ext.onReady(function(){
Ext.create('Ext.window.Window', {
title: '我的第一个组件,window',
height: 300,
width: 400,
layout: 'fit',
renderTo:Ext.getBody(),
modal:true,
plain:true,
x:50,
y:50,
icon:'js/extjs/icons/used/browser_window.png',//图片路径
//iconCls:bb,//样式
autoScroll:true,
html:'<div style=width:200px;height:200px>我是一个div</div><div style=width:200px;height:200px>我是一个div</div>',
constrain:true
//constrainHeader:true,
/*items: { // Let's put an empty grid in just to illustrate fit layout
xtype: 'grid',
border: false,
columns: [{header: 'World'}], // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
}*/
}).show();
});
************************************************************************************************
009--window--003-window02-ex001.js
Ext.onReady(function(){
//ex001
//第一种实现
//var btn = $('#btn'); var dombtn = btn.get(0);
//var btn = Ext.get('btn');//这是经过EXT包装的一个Ext的Dom对象
//alert(btn.dom.value);
/* btn.on('click',function(){
if(!Ext.getCmp('mywin')){
Ext.create('Ext.window.Window',{
id:'mywin',
title:'新窗体',
height:300,
width:400,
//modal:true,
renderTo:Ext.getBody()
}).show();
}
});*/
//第二种实现
var win = Ext.create('Ext.window.Window',{
id:'mywin',
title:'新窗体',
height:300,
width:400,
//modal:true,
renderTo:Ext.getBody(),
closeAction:'hide'//destroy
});
Ext.get('btn').on('click',function(){
win.show();
});
});
************************************************************************************************
010--组件--003-window03-ex002.js
Ext.onReady(function(){
//ex002 :在组件中添加子组件，并进行组件的一系列针对组件的操作
/* var win = new Ext.window.Window({
title:'添加子组件实例',
width:'40%',
height:400,
draggable:false,
resizable:false,
closable:false,
collapsible:true,
bodyStyle: 'background:#ffc; padding:10px;',
html:'html....',
items:[{
//Ext的组件给我们提供一个简单的写法
xtype:'panel',
width:'50%',
height:100,
html:'html2... '
},
new Ext.button.Button({
text:'我是按钮',
handler:function(btn){
alert('我被点击了');
alert(btn.text);
}
})
{
xtype:'button',
text:'我是按钮',
handler:function(btn){
alert('我被点击了');
alert(btn.text);
}
}],
renderTo:Ext.getBody()
});
win.show();*/
var win = new Ext.Window({
id:'mywin',
title:'操作组件的形式',
width:500,
height:300,
tbar:[{ //bbar(bottom) lbar(leftbar) rbar(rightbra) fbar(footbar)
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);
}
}],
renderTo:Ext.getBody()
});
win.show();
});
************************************************************************************************
011--003-window04-ex003.js
Ext.onReady(function(){
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);//把窗体对象注册给Zindexmanager
}
var btn1 = Ext.create('Ext.button.Button',{
text:'全部隐藏',
renderTo:Ext.getBody(),
handler:function(){
wingroup.hideAll();
}
});
var btn2 = new Ext.button.Button({
text:'全部显示',
renderTo:Ext.getBody(),
handler:function(){
wingroup.each(function(cmp){
cmp.show();
});
}
});
var btn3 = new Ext.button.Button({
text:'置前',
renderTo:Ext.getBody(),
handler:function(){
wingroup.bringToFront('win_3');
}
});
var btn4 = new Ext.button.Button({
text:'置末',
renderTo:Ext.getBody(),
handler:function(){
wingroup.sendToBack('win_5');
}
});
});
************************************************************************************************
012--004-base01-define.js
************************************************************************************************
013--004-base01-define.js
************************************************************************************************
014--004-base01-define.js
Ext.onReady(function(){
//第12讲： config.constructor
//在Ext中如何如定义一个类：Ext.define(className,properties,callback);
/*Ext.define('Person',{
//配置信息
config:{
name:'z3',
age:20
},
//自己定义的方法
say:function(){
alert('method....');
},
//给当前定义的类加一个构造器
constructor:function(config){
var me = this;
for(var attr in config){
alert(attr + ":" + config[attr]);
}
me.initConfig(config);//真正初始化传递进来的信息
}
});*/
/* var p = new Person({
name:'李四',
age:25
});
alert(p.name);
alert(p.age);
alert(p.getName());
p.say();*/
//Ext.create 实例化一个对象
/*var p = Ext.create('Person',{
name:'wangwu',
age:30
});*/
//alert(p.getName());
//alert(p.getAge());
//p.say();
//第13讲：extend
/* Ext.define('Person',{
config:{
name:'bjsxt'
},
constructor:function(config){
var me = this;
me.initConfig(config);
}
});
Ext.define('Boy',{
extend:'Person',
config:{
sex:'男',
age:20
}
});
var b= Ext.create('Boy',{
name:'zhangsan',
age:30
});
alert(b.name);
alert(b.sex);
alert(b.age);*/
//javascript: prototype(原型) :所有类的实例对象所共享
/*function Person(name){ //1
this.name = name;
this.sayName = function(){
alert(this.name);
}
};*/
/*function Person(name){
this.name = name;
//this.sayName = sayName();
};
function sayName(){ //2
alert(this.name);
}
Person.prototype.sayName = function sayName(){ //3
alert(this.name);
};
var p1 = new Person('张三');
p1.sayName();
var p2 = new Person('李四');
p2.sayName();
alert(p1.sayName == p2.sayName); //1--false 2--true 3--true
*/
//javascript: prototype :实现继承
/* var Person = function(name){
this.name = name;
};
//alert(Person.prototype.constructor); //原型对象的构造器,默认是当前的模板
//SupClass prototype object
Person.prototype = {
constructor:Person,
id:100
}
//subClass
var Boy = function(name,sex,age){
//借用构造函数继承的方式
Person.call(this,name);
this.sex = sex;
this.age = age;
}*/
//实现原型继承 : 继承里父类 模板和父类 的原型对象
/* //Boy.prototype = new Person();//--多继承父类模板两遍，影响效率
//自己实现 extend 的方法
function myextend(sub,sup){
var F = function(){}, //定义一个空函数作为中转函数
subclassProto, //子类的原型对象
superclassProto = sup.prototype; //把父类的原型对象交给了superclassProto变量
F.prototype = superclassProto; //做中转的位置，把父类的原型对象 赋值给了F这个空函数的原型对象
subclassProto = sub.prototype = new F();//进行原型继承
subclassProto.constructor = sub; //还原构造器
sub.sup = superclassProto; //做了一个保存，保存了父类的原型对象
if(superclassProto.constructor === Object.prototype.constructor){
superclassProto.constructor() = sup;
}
}
myextend(Boy,Person);
//var b = new Boy('张三'，'男',30);
var b = new Boy('李四','男',25);
alert(b.name);
alert(b.sex);
alert(b.id);*/
//第14讲：Ext.define
//别名 备用名
/*Ext.define("User",{
config:{
name:'bjsxt',
age:100
},
alias:'uu',//起别名 底层代码在Ext.ClassManager
alternateClassName:'uuu',//给当前类一个备用名 底层代码在Ext.ClassManager
constructor:function(config){
var me = this;
me.initConfig(config);
}
});
var u = Ext.create('uu');
alert(u.name);
alert(u.age);*/
//statics（子类不能被继承） inheritableStatics（子类可以被继承） 给当前类定义静态方法或属性
Ext.define('Person',{
config:{
name:'我是父类'
},
statics:{ //静态的方法或者属性
static_id:'我是perison的id，不能被子类继承'
},
inheritableStatics:{
inheritableStatics_id:'我是inheritableStatics的id，可以被子类继承'
},
constructor:function(config){
var me = this;
me.initConfig(config);
}
});
// var p = Ext.create('Person');
// alert(p);
// alert(p.static_id); //实例对象是无法使用静态方法和属性的
//用类名去使用静态属性。。。。
/*alert(Person.static_id);
alert(Person.inheritableStatics_id);*/
/* Ext.define('User',{
extend:'Person',
config:{
age:20
}
});
alert(User.static_id);
alert(User.inheritableStatics_id);
*/
//mixins混合的配置项，可以多继承的配置
/*Ext.define("Sing",{
canSing:function(){
alert('cansing.....');
}
});
Ext.define("Say",{
canSay:function(){
alert('cansay.....');
}
});
Ext.define("User",{
mixins:{
sing:"Sing",
say:"Say"
}
});
var u = Ext.create("User");
u.canSing();
u.canSay();*/
//requires uses
/* Ext.define('MyComponet',{
//可能需要Ext或者其他 的类型支持
//requires加载需要的类时机是:当前类初始化之前被加载
//requires:['Ext.window.Window','Ext.button.button']
//uses 加载需要的类时机是:当前类初始化之后被加载
//uses:['Ext.window.Window','Ext.button.button']
singleton:true //当前的类就被当成一个单例对象
});*/
});
************************************************************************************************
015--004-base02-ext.js
Ext.onReady(function(){
//apply && applyIf
//Ext.apply():就是为对象扩展属性或方法的
/*var src = {name:'张三',age:20};
var config = {name:'李四',sex:'男'};
//Ext.apply(src,config);
Ext.applyIf(src,config); //如果当前对象存在属性，不进行复制，如果不存在就进行copy
for(var attr in src){
alert(attr + ":" + src[attr]);
}*/
//Ext.extend
//Ext.typeOf 和原生的javascript typeof
/*var str = '111';
var num = 20;
alert(Ext.typeOf(str));
alert(Ext.typeOf(num));*/
//Ext.isArray();
/*var arr = [1,2,3,4];
Ext.iterate(arr,function(item){
alert(item);
});*/
//Ext.override()
/*Ext.define('User',{
say:function(){
alert('say...');
}
});
var user = Ext.create('User');
Ext.override(user,{
say:function(){
alert('我是覆盖的方法。。');
}
});
user.say();*/
//Ext-more.js
Ext.getBody();
});
************************************************************************************************
016--004-base03-native.js
************************************************************************************************
017--004-base03-native.js
Ext.onReady(function(){
//Ext对于原生javascript对象的扩展
//Ext.Object
//1:chain 把当前传入的对象当成新创建对象的原型
// var obj = {
// name:'bjsxt',
// age:10
// };
// var result = Ext.Object.chain(obj);
// alert(result.name);
// alert(result.age);
// alert(result.hasOwnProperty('name')); //false
//2:each 变量当前对象 然后会调函数中暴露出三个属性key value self 如果回调函数返回false 则停止迭代
/*
var obj = {
name:'张三',
age:20,
sex:'男'
}；
Ext.Object.each(obj,function(key,value){
alert(key + ':' + value);
if(age == 20){
return false;
}
});
*/
//3 : fromQueryString
/*
var str = "name=bjsxt&age=10";
var obj = Ext.Object.fromQueryString(str);
alert(Ext.encode(obj));
*/
//4 toQueryString
/*
var obj = {
name:'张三',
age:20
};
var str = Ext.Object.toQueryString(obj);
alert(str);
*/
//5 toQueryObjects
/*
var obj = {
name:'张三',
age:20,
fav:{
fav1:'sleep',
fav2:'play',
fav3:'eat'
}
var arr = Ext.Object.toQueryObjects('user',obj,true);
console.info(arr);
};
*/
//Ext.Number
//constrain
//alert(Ext.Number.constrain(21,1,20); //20
//alert(Ext.Number.randomInt(1,100);
//alert(Ext.Number.toFixed(3.1415926,3);
//Ext.String
//alert(Ext.String.capitalize('bjsxt'));
//alert(Ext.String.ellipsis('www.bjsxt.com',8));
//Ext.Array
//clear
/*var arr = [1,2,null,3,''];
alert(Ext.Array.clean(arr));*/
//difference
/*var arr1 = [1,2,3];
var arr2 = [2,5,6];
alert(Ext.Array.difference((arr1,arr2)));
*/
//each
/*var arr = [1,2,3,4];
Ext.Array.each(arr,function(item){
if(item == 4){
return false;
}
alert(item);
});*/
//当函数内部返回false时会停止迭代
//erase
/*var arr = [1,2,3,4,5];
alert(Ext.Array.erase(arr,2,2));
*/
//every
/*var arr = [1,2,5,6,9,10];
var flag = Ext.Array.every(arr,function(item){
if(item <=7){
return false;
}else{
return true;
}
});
alert(flag);*/
//filter
/*var arr = [1,2,3,4,10,18,23];
var newarr = Ext.Array.filter(arr,function(item){
if(item>10){
return false;
}else {
return true;
}
});
alert(newarr);*/
//include
/*var arr = [1,2,3,4];
Ext.Array.include(arr,20);
alert(arr);
*/
//uniqiue
/*var arr = [1,2,3,4,5,5,6,3,2,1,21,23,3,3,4];
//alert(Ext.Array.unique(arr));
//利用js对象的特性去掉数组的重复项 obj的key是不能城府重复的
var obj = {};
for(var i = 0,len = arr.length;i<len;i++){
obj[arr[i]] = true;//去掉数组的重复项了
}
//alert(Ext.encode(obj));
var uniquearr = [];
for(var i in obj){
if(obj.hasOwnProperty(i)){
uniquearr.push(i);
}
}
alert(uniquearr);*/
//Ext.Function alias bind defer
//alias 起别名
/*var obj = {
name:'bjsxt',
say:function(){
alert(this.name);
}
};
var objsay = Ext.Function.alias(obj,'say');
objsay();*/
//bind 绑定作用域的 相当于 call apply
/*var color = 'red';
var obj = {
color:'blue'
};
function showColor(){
alert(this.color);
}
Ext.Function.bind(showColor,obj)();*/
//defer //window.setTimeout
/*function task(){
alert('执行');
};
Ext.Function.defer(task,3000);*/
//Date
//between
//alert(Ext.Date.between(new Date(2013,07,15),new Date(2013,07,03),new Date(2013,07,08)));
//format
//alert(Ext.Date.format(new Date(),'Y-m-d H:i:s'));
//parse
//alert(Ext.Date.parse('2010-07-05 21:22:22','Y-m-d H:i:s').toLocaleString());
//Ext.Error
//Ext.Error.raise('you are wrong ...');
});
************************************************************************************************
018--004-base04-dynamic.js
Ext.onReady(function(){
//window
/* Ext.create('Ext.window.Window',{
title:'我是一个窗口',
height:300,
width:400,
constrain:true,
modal:true,
html:'我是窗体的内容',
renderTo:Ext.getBody()
}).show();*/
//Ext MVC
//自己定义一个类
/* Ext.define('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');
var w2 = Ext.create('MyWindow',{
title:'我是W2'
});
var w3 = Ext.create('MyWindow',{
title:'我是W3'
});
w2.show();*/
//动态加载一个js文件
//第一步 在js/extjs/添加一个文件夹(ux)
//在这个ux文件夹下建立自己的组件所对应的js文件
//第二步: 在js/extjs/ux 下编写自己的扩展组件
//第三步: 启用ext动态加载的机制并设置要加载的路径
Ext.Loader.setConfig({
enabled:true,
paths:{
myux:'js/extjs/ux'
}
});
//第四步: 创建类的实例并使用
Ext.create('js.extjs.ux.MyWindow').show();
});
************************************************************************************************
019--005-base05-dom1.jsp
Ext.onReady(function(){
//Ext.dom.Element
//Ext.get 使用了缓存机制来提升获取Dom节点的效率
//get方法的描述:
/**
* 1 首先去Ext.cache缓存里去查找, 如果缓存里有，直接返回即可
* 2 如果缓存里没有，那再去页面上查找,如果页面里没有，返回null
* 3 如果页面里有，则把当前内容加入到缓存里，{ id:{data/events/dom} }
* 4 Ext.addCacheEntry加到缓存里的方法
*
*/
/* var d1 = Ext.get('d1'); //Ext.Element
alert(d1.dom.innerHTML);
*/
//Ext.fly
/**
* fly :使用javascript经典的享元模式来提升效率，从而节约内存
* 返回的对象：Fly对象，当然你可以理解成为返回的就是Ext封装好的Ext.Element对象
* 注意点 ： fly由于内部使用了享元模式，所有只适合一次下使用
*/
/*var d2 = Ext.fly('d2');
d2.dom.innerHTML = 'AAA';
var d3 = Ext.fly('d3');
d3.dom.innerHTML = 'BBB';*/
//Ext.getDom
var dom = Ext.getDom('d3');//HTMLElement
dom.innerHTML ="cccc";
});
************************************************************************************************
020--004-base06-dom2.js
************************************************************************************************
021--004-base06-dom2.js
************************************************************************************************
022--004-base06-dom2.js
************************************************************************************************
023_Ext基础架构_dom（五） 04-base07-dom3.js
024_Ext基础架构_dom（六）
webstorm8 --添加Extjs4.1提示
file--》setting--》JavaScript--》libraries--》Name:ExtJS4.2--》点击“+”号，导入下载的ExtJS4.2的三个文件：bootstrap.js,Ext-all.js,ext-all-debug.js---》点击“Specify”,会有Extjs默认API网址----》点击“OK”----》若是只应用于本项目选择progect,所有项目，选择Global(在第一个框框上方)-----》点击下方“Apply”---》点击“OK”-----》新建项目----》新建HTML，JS等文件时即会有Ext提示（可以新建JS文件，输入Ext打点，后方提示有标识出ExtJS4.2则表明配置成功）
Ext.onReady(function(){
Ext.create( 'Ext.panel.Panel',{
title: '我的面板',
width: '100%',
height:400,
renderTo:Ext.getBody(),
html: '<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></div><input id=inp value = 123/><form id=f1><input name=unname value=bhx/><input name=pwd value=123 /></form>'
});
//查询系最常用的方法
//Ext.dom.Element get fly getDom
var d1 = Ext.get('d1' );
var sp = Ext.get('sp' );
//第20讲: 查询系方法:
//1: contains:判断元素是否包含另一个元素
//alert(d1.contains(sp));
//alert(d1.contains('sp'));
//2:child: 从元素的直接子元素中选择与选择符匹配的元素(返回一个元素，不能返回数组)
/*var ch = d1.child('span'); //Ext.dom.Element
var ch2 = d1.child('span',true); //Ext.dom.Element 返回的是原生的 html元素
alert(ch.dom.innerHTML);
alert(ch2.innerHTML);*/
//3. down : 选择与选择符匹配的元素的子元素 //findParentNode up :查找与简单元素符的父元素
/*var ch1 = d1.down('#d2');
alert(ch1.dom.innerHTML);*/
//4. first ： 选择元素第一个元素 //last:选择元素的最后一个元素
/*var f1 = d1.first('div');
alert(f1.dom.innerHTML);
*/
//5. findParent: 查找与简单选择符匹配的元素符父元素//parent:返回元素的父元素
/*var parent = sp.findParent('div');
alert(parent.innerHTML);
*/
//6: is :判断元素是否匹配选择符
//alert(d1.is('div'));
//7: next:选择元素同层的下一个元素 // prew：选择元素同层的下一个元素
/*var next = sp.next();
alert(next.dom.nodeName);*/
//8. Ext.query : 根据选择符获取元素(Ext.dom.Element.query)
/*var arr = Ext.query('span','d1');//HTMLElement[]
Ext.Array.each( arr,function(item){
alert(item.innerHTML);
});
*/
//9. Ext.select/Ext.dom.Element.select: 根据选择符获取元素集合
//返回的都是元素集合: /Ext.dom.CompositeElementLite(HTMLElement)/Ext.dom.CompositeElement(Ext.dom.Element)
//参数说明：3个参数
// 1：selector选择器（不要用id选择器）
// 2:返回的集合对象(boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement)
// 3: 指定的根节点开始查找
/*var list1 = Ext.select('span',false,'d1');//Ext.dom.CompositeElementLite
Ext.Array.each(list1.elements,function(el){
alert(el.innerHTML);
});
var list2 = Ext.select('span',true,'d1');//Ext.dom.CompositeElementLite
Ext.Array.each(list2.elements,function(el){
alert(el.dom.innerHTML);
});*/
//第21讲:
//操作dom系的方法
//1: appendTo: 将当前元素追加到指定的指定元素中
//sp.appendTo(Ext.get('d2'));
//sp.appendTo('d2');
//2: appendChild: 在当前元素中追加元素
//sp.appendChild('d2');
//3. createChild: 在元素中插入DomHelper对象创建的元素
/*sp.createChild({
tag:' ol', //orderlist unorderlist
children:[
{tag:' li',html :'item1'},
{tag:' li',html :'item2'}
]
});*/
//4： innerAfter:将元素插入到指定的元素之后
//5： innerBefore:将元素插入到指定的元素之前
//6： innerSibling:将当前元素前或后插入（或创建）元素（同层）
//7： innerHtml:将当前元素内插入HTML代码
//8: replace:使用当前元素替换指定元素
//9: replaceWith: 使用创建的元素替换当前的元素
//10：remove 移除当前元素
//sp.remove();
//11. wrap: 创建一个元素，并将当前元素包裹起来
//sp.wrap('<h1></h1>');
//操作样式系的方法
//1： addCls: 增加CSS样式的元素，重复的样式会自动过滤
//sp.addCls('red');
//2: applyStyles:设置元素的style属性
//sp.applyStyles('backgroundColor:blue');
//sp.applyStyles({backgroundColor:'yellow'});
//3: setStyle:为元素设置样式
//sp.setStyle('backgroundColor','green');
//sp.setStyle('fontSize','40');
//4.getStyle：返回当前样式和计算样式
//alert(sp.getStyle('fontSize'));
//alert(Ext.encode(sp.getStyle(['fontSize','backgroundColor'])));
//5.getSyleSize:返回元素的样式尺寸
//alert(Ext.encode(sp.getStyleSize()));
//6. setOpacity:设置不透明度
/*var d2 = Ext.get('d2');
d2.setStyle('backgroundColor','red');
d2.setStyle('width','200px');
d2.setStyle('height','200px');
d2.setOpacity(.3);
*/
//7. addClsOnClick添加样式当点击该元素的时候
//var d2 = Ext.get('d2');
//d2.addClsOnClick('red');
//8. addClsOnOver添加样式当点击该元素的时候
//var d2 = Ext.get('d2');
//d2.addClsOnOver('red');
//9. getMargin: 返回值具有top left right bottom 属性的对象，属性值为响应元素的margin值
//var d2 = Ext.get('d2');
//alert(d2.getMargin('r'));// r l t b
//alert(Ext.encode(d2.getMargin()));
//10：removeCls:删除元素的样式
/*var d2 = Ext.get('d2');
d2.addCls('red'); //String/String[] className
d2.removeCls('red'); //String/String[] className
*/
//11:尺寸 、定位
//var d2 = Ext.get('d2');
//alert(Ext.encode(d2.getSize()));
//alert(d2.getX());
//alert(Ext.encode(d2.getXY()));
//sp.moveTo(100,100);
//第22讲
//一: 为元素添加事件
//1. addKeyMap 为元素创建一个可以·KeyMap对象
/*var inp = Ext.get(' inp');
inp.addKeyMap({ //Ext.util.KeyMap ===>Class
key:Ext.EventObject.A,
ctrl:true,
fn:function(){
alert('按 ctrl + A,执行1');
},
scope:this
});*/
//2. addKeyListener :为keyMap绑定事件
/*var inp = Ext.get(' inp');
inp.addKeyListener({
key:Ext.EventObject.X,
ctrl:true
},
function(){
alert('执行了。。。。');
},
this);
*/
//二：元素绑定常用事件
/*var inp = Ext.get(' inp');
inp.on('click',function(){
alert('执行了....');
});
inp.un('click');
inp.focus();*/
//三：重要且常用的方法
var inp = Ext.get('inp' );
//1:center：使元素居中
//inp.center('d1');
//2:clean清理空白的 文本节点
//3:createShim:为元素创建一个 iframe垫片保证选择或者其他对象跨域时可见
//4:getLoader:返回ElementLoader对象
//11: load 直接调用ElementLoader方法为元素加载内容
/*var loader = inp.getLoader();
loader.load({
url:'base/004_base06_dom2_loader.jsp',
renderer:function(loader,response){
//把对象转换成字符串表示形式:Ext.encode
//把一个字符串转换成 javascript对象:Ext.decode
var obj = Ext.decode(response,responseText);
Ext.getDom(' inp').value = obj.name;
}
});*/
//5:highlight 高亮显示特效
//sp.highlight();
//6: show hide 显示隐藏元素
/*var d2 = Ext.get('d2');
d2.setStyle('width','100px');
d2.setStyle('height','100px');
d2.setStyle('backgroundColor','red');*/
//d2.show({duration:2000});
//d2.hide({duration:2000});
//7: ghost 元素移动特效
//d2.ghost('r',{duration:2000}); //r 右边
//8: slideIn slideOut 向上向下淡滑动
//d2.slideIn('r',{duration:2000});
//d2.slideOut('r',{duration:2000});
//9: getValue 如果元素有value属性，返回其值
//alert(inp.getValue());
//10: normalize:把CSS属性中连接符号去掉，例如将"font-size"转为fontSize
//11:mask遮罩当前元素，屏蔽用户操作， unmask：移除遮罩
// Ext.getBody().mask('请稍等...');
// /*window.setTimeout(function(){
// Ext.getBody(). unmask();
// }, 2000);*/
// Ext.defer(function(){
// Ext.getBody(). unmask();
// },2000);
//12:repaint 强迫浏览器重新绘画元素
//13: serializeForm 序列化为URL编码的字符串
//alert(Ext.dom.Element.serializeForm('f1'));
//14:update 更新元素的innerHTML属性
//15: unselectable 禁用文本选择
inp.unselectable();
});
Ext.onReady(function(){
Ext.create( 'Ext.panel.Panel',{
title: 'DomHelper-元素生成器的使用' ,
width: '90%',
height:400,
renderTo:Ext.getBody(),
html: '<div id="d1">我是d1</div>'
});
//DomHelper
//1:createHtml或者markup方法
//配置项说明
//tag 元素的说明
//children/cn 表示子元素
//cls 表示样式
//html 文本内容
// var html = Ext.DomHelper.createHtml({
// tag:' ol',
// cn:[
// {tag:' li',html :'item1'},
// {tag:' li',html :'item2'}
// ]
// });
// console.info( html);
// var html = Ext.DomHelper.createHtml({
// tag:' div',
// children:[
// {tag:'a', html:'bjsxt 网站',href:'www.bjsxt.cn'},
// {tag:'input',value:'点击',type:'button'}
// ]
// });
// console.info( html);
//2: createDom方法，这个方法是生成原生的 dom节点，不推荐使用
/* var dom = Ext.DomHelper.createDom({
tag:' div',
html:'我是div'
});
// console.info( dom);
alert(dom.nodeName);*/
//3：append方法
/*Ext.DomHelper.append('d1',{
tag:'u1',
cn:[{tag:'li ',html:'1111'},{tag:' li',html :'2222'}]
});*/
// Ext.DomHelper.append('d1','<span>我是span内容</span>');
//4: insertHtml方法 //这个方法就是为了操作原生的node节点的
//参数说明：String where, HTMLElement/TextNode e1,String html
// Ext.DomHelper.insertHtml('beforeBegin',Ext.getDom('d1','<h1>我是标题！</h1>'))
//5:overwrite 方法
// Ext.DomHelper.overwrite('d1',{tag:'span', html:'我是覆盖的span'});
// Ext.DomHelper.overwrite('d1',' aaa');
//6:createTemplate方法
// var tp = Ext.DomHelper.createTemplate('<h1>{text}</h1><h2>{text2}</h2>'); //return Ext.Template
// tp.overwrite('d1',{text:'我是被替换的内容!!',text2:'我也是替换的内容'});
//7:applyStyles方法
Ext.DomHelper.applyStyles( 'd1',{
width: '100px',
height: '100px',
backgroundColor: 'green'
});
});
************************************************************************************************
Ext.onReady(function(){
//Ext.DomQuery
Ext.create('Ext.Panel',{
title: 'Ext.DomQuery示例',
width:500,
height:400,
renderTo:Ext.getBody(),
html: '<ul><li>item1</li><li>item2</li></ul><div id =d1><span id = sp>我是sp内容</span><span class="mycolor">我是第二个span</span></div>'
});
// Ext.DomQuery.select ==Ext.query //返回内容：HTMLElement[]
//Ext.DomQuery.jsSelect:根据选择符选择元素
//基本选择器 id选择器 css的类选择器 标签选择器（简单选择器）
//属性选择器
//伪类选择器
//Ext.query('span') 返回整个文档的span标签
//1 Ext.query('span','root') 根据根节点进行查询
/*var arr = Ext.query('span','d1');
Ext.Array.each( arr,function(e1){
alert(e1.innerHTML);
});*/
//2 Ext.query('#id') 根据id进行查询，但返回数组
/* var arr = Ext.query('#d1');
Ext.Array.each( arr,function(e1){
alert(e1.innerHTML);
});*/
//3 Ext.query('.class') 根据样式进行查询，返回数组
/*var arr = Ext.query('.mycolor');
Ext.Array.each( arr,function(e1){
alert(e1.innerHTML);
});*/
//Ext.query('*') 匹配所有元素
//alert(Ext.query('*'));
//复杂选择器
//1 Ext.query('div span') 根据标签进行包含选择器过滤
/* var arr = Ext.query('div[id=d1] span');
Ext.Array.each( arr,function(e1){
alert(e1.innerHTML);
});*/
//1 Ext.query('div>span')
//1 Ext.query('div/span')
//2 Ext.query('E(attr= val)']
/* var arr = Ext.query('div[id^=panel');
Ext.Array.each( arr,function(e1){
alert(e1.id);
});*/
//3 伪类选择器
//E:first-child
/*var arr = Ext.query('li:first-child');
Ext.Array.each( arr,function(e1){
alert(e1.innerHTML);
});*/
//Ext.DomQuery其他方法
//1: compile:将选择符或者xpath 编译成一个可重复使用的函数
/* var fn = Ext.DomQuery.compile('span');
//alert( fn);
var arr = fn(Ext.getDom('d1'));
//alert( arr);
Ext.Array.each( arr,function(e1){
alert(e1.innerHTML);
});*/
//2: filter：使用简单选择符过滤元素数组
/*var arr = document.getElementsByTagName('div ');
var filterarr = Ext.DomQuery.filter( arr,'div [id=d1]',false);
Ext.Array.each( filterarr,function(e1){
alert(e1.id);
});*/
//is:判断元素是否是简单选择符
alert(Ext.DomQuery.is(Ext.getDom( 'd1'),'div[id]' ));
});
************************************************************************************************
025_Ext基础架构_event（一）--/EasyExt/WebRoot/base/04-base09-event1.js
//0级dom模型，不能添加多个函数
/*
window.onload = function(){
var inp = document.createElement('input');
inp.id = 'inp1';
inp.value = '点击';
inp.type = 'button';
inp.onclick = function () {
alert("....aa00");
};
document.body.appendChild( inp);
};*/
//2级dom模型
//element.addEventListener(type,listener,useCapture);
//element.removeEventListener(type,listener,useCapture);
function test1() {alert(this == window);}
function test2() {alert(22);}
//window.onload = function(){
///* var inp = document.createElement('input');
// inp.id = 'inp1';
// inp.value = '点击';
// inp.type = 'button';
// //type:事件类型 listener:这个事件的绑定函数 useCapure(boolean):(事件传播：true=捕获/false = 冒泡)
// inp.addEventListener('click',test1,false);
// inp.addEventListener('click',test2,false);
// // inp.removeEventListener('click',test1,false);
// document.body.appendChild( inp);*/
//
// //IE浏览器 attachEvent();detachEvent();只支持冒泡
//
// var inp = document.createElement('input');
// inp.id = 'inp1';
// inp.value = '点击';
// inp.type = 'button';
// inp.attachEvent(' onclick',test1);
// inp.attachEvent(' onclick',test2);
// document.body.appendChild( inp);
//};
//对于事件的传播机制：w3c: 1 捕获 2 目标（命中） 3 冒泡
window.onload = function(){
var inp = document.createElement( 'input');
inp.id = 'inp1';
inp.value = '点击';
inp.type = 'button';
inp.addEventListener( 'click',function (event){
alert( 'input执行。。。。' );
//event.stopPropagation();
},false);
var div = document.createElement( 'div');
div.addEventListener( 'click',function (){
alert( 'div执行。。。' );
},false);
document.body.addEventListener( 'click',function (){
alert( 'body执行。。。' );
},false);
div.appendChild(inp);
document.body.appendChild(div);
};
************************************************************************************************
026-/EasyExt/WebRoot/base/04-base10-event2.js
//观察者模式
var Observable = function(){
this.events = ['start' ,'stop' ];
this.listeners = {
};
};
Observable.prototype.addEvents = function(eventname){
this.events.push(eventname);
};
Observable.prototype.addListener = function (eventname,fn){
if(this .events.indexOf(eventname) == -1){
this.addEvents(eventname);
}
var arr = this.listeners[eventname];
if(!arr){
arr = [fn];
} else{
if(arr.indexOf(fn) == -1){
arr.push(fn);
}
}
this.listeners[eventname] = arr;
};
Observable.prototype.removeListener = function (eventname,fn){
if(this .events.indexOf(eventname)==-1){
return;
}
var arr = this.listeners[eventname];
if(!arr){
return ;
}
if(arr.indexOf(fn) != -1){
arr.splice(arr.indexOf(fn),1);
}
};
Observable.prototype.fireEvent = function(eventname){
if(!eventname || (this.events.indexOf(eventname) == -1)){
return ;
}
var arr = this.listeners[eventname];
if(!arr){
return ;
}
for(var i = 0, len = arr.length;i<len;i++){
var fn = arr[i];
fn.call(fn, this);
}
};
Observable.prototype.on = Observable.prototype.addListener;
Observable.prototype.un = Observable.prototype.removeListener;
Observable.prototype.fr = Observable.prototype.fireEvent;
var ob = new Observable();
var fn1 = function(){
alert( 'fn1...');
};
ob.on('start',fn1);
var fn2 = function(){
alert( 'fn2...');
};
//ob.on('stop',fn2);
ob.on('start',fn2);
ob.un('start',fn1);
ob.fr( 'start');
//ob.fr('stop');
ob.on( 'run',function (){
alert( 'run...');
});
ob.fr( 'run');
************************************************************************************************
027--/EasyExt/WebRoot/base/04-base11-event3.js
//Ext.EventManager:封装浏览器自带的事件，并且解决了浏览器的差异问题
var MyExt = {};
MyExt.EventManager = {
addListener: function (e1, ename, fn, useCapture) {
if (e1.addEventListener) {
e1.addEventListener(ename, fn, useCapture);
} else if (eq.attachEvent) {
e1.attachEvent( 'on' + ename, fn);
}
},
removeListener: function (e1, ename, fn, useCapture) {
if (e1.removeEventListener) {
e1.removeEventListener(ename, fn, useCapture);
} else if (eq.attachEvent) {
e1.detachEvent( 'on' + ename, fn);
}
}
};
MyExt.EventManager.on = MyExt.EventManager.addListener;
MyExt.EventManager.un = MyExt.EventManager.removeListener;
window.onload = function(){
var btn = document.getElementById( 'btn');
MyExt.EventManager.on(btn, 'click',function (){
alert( '我执行了。。。。' );
},false);
MyExt.EventManager.on(btn, 'click',function (){
alert( '我又执行了。。。。' );
},false);
};
//Ext.EventManager
//Ext.util.Observable
************************************************************************************************
028--/EasyExt/WebRoot/base/04-base12-event4.js
Ext.onReady(function(){
//Ext.EventManage：把浏览器的自带的事件做个封装，目的是屏蔽浏览器之间的差异问题
//on 添加事件监听，un移除事件监听
var inp = document.createElement('input'); //Ext.DomHelper.createDom
inp.type = 'button';
inp.id = 'inp1';
inp.value = '点击';
document.body.appendChild(inp);
var einp = Ext.get('inp1');
// Ext.EventManager.on(einp,'click',function(){
// alert('我执行了。。。');
// });
// Ext.EventManager.on(einp,'click',function(){
// alert('我又执行了。。。。');
// });
// Ext.EventManager.on(einp,{
// 'click':function(){alert('单击！');},
// 'mouseout': function () {alert('移除');
//
// }
//
// });
//不推荐
Ext.EventManager.on(einp,{
'click':{
fn:function(){
alert('执行1');
}
},
'mouseout':{
fn:function(){
alert('执行2');
}
}
});
});
************************************************************************************************
29--/EasyExt/WebRoot/base/04-base13-event5.js
Ext.onReady(function(){
//web300: ex005 为Ext的UI组件绑定事件
//1:直接在组件内部添加listeners配置项即可
/* var win = Ext.create('Ext.Window',{
title:'UI组件的事件示例一',
width:400,
height:300,
renderTo:Ext.getBody(),
tbar:[{text:'点击我',id:'aa'}],
listeners:{ //在这个配置项对象中加入事件即可
show: function () {
alert('我展示出来了。。。。');
},
close:function(){
alert('我被关闭了。。。。');
},
render:function(){
alert('组件渲染的时候执行的方法');
},
click:{
element:'body',
fn:function(){
alert('click body');
}
}
}
});*/
//2.使用组件的引用为组件添加方法
var win = Ext.create('Ext.Window' ,{
title: 'UI组件的事件示例一' ,
width:400,
height:300,
renderTo:Ext.getBody()
});
// win.on('show',function(){
// alert('我展示出来了。。');
// });
win.on({
'show':function (){
alert( 'show...');
},
'close':function (){
alert( 'close....');
},
'render':function (){
alert( 'render...');
}
});
win.show();
});
************************************************************************************************
30--/EasyExt/WebRoot/base/04-base14-event6.js
Ext.onReady(function(){
//Ext.util.Observable 自定义事件类
/* //1.最简单的自定义事件
var win = Ext.create('Ext.Window',{
title:'简单的自定义事件',
width:400,
height:300,
renderTo:Ext.getBody(),
listeners:{
show:function(){
//3:触发自定义事件的时机
win.fireEvent('myEvent');
}
}
});
//1：添加事件类型
win.addEvents('myEvent');
//2:添加事件的监听
win.on('myEvent',function(){
alert('my...event..');
});
win.show();*/
//2:为自己定义的类去添加事件的支持
/* Ext.define('Employee',{
mixins:{
observable:'Ext.util.Observable'
},
constructor:function( config){
this.mixins.observable.constructor.call(this, config);
this.addEvents(
'fired',
'quit'
)
}
});
var newEmplyee = new Employee({
name:employeeName,
listeners:{
quit:function(){
alert('has quit!');
}
}
});
newEmplyee.fireEvent('quit');*/
//ex007: 单次运行监听器的使用，single配置项在组件中用途
/* var win = Ext.create('Ext.Window',{
title:'单次运行监听器的使用',
width:300,
height:200,
renderTo:Ext.getBody(),
listeners:{
render:function(){
alert('把组件渲染到body上，整个过程只有一次');
},
single:true, //当前这个事件监听执行一次之后就自动销毁了
delay:3000
}
});
win.show();*/
//ex008:对于事件挂起和恢复实例
/*var btn1 = Ext.create('Ext.button.Button',{
text:'挂起',
renderTo:Ext.getBody(),
handler:function(){
btn3.suspendEvents();
}
});
var btn2 = Ext.create('Ext.button.Button',{
text:'恢复',
renderTo:Ext.getBody(),
handler:function(){
btn3.resumeEvents();
}
});
var btn3 = Ext.create('Ext.button.Button',{
text:'按钮',
renderTo:Ext.getBody(),
listeners:{
' mouseover':function(){
alert('执行了。。。');
}
}
});*/
//ex009: 事件的转发机制
var win = Ext.create( 'Ext.Window',{
title: '事件的转发' ,
width:400,
height:300,
renderTo:Ext.getBody(),
listeners:{
myEvent: function(){
alert( '我是自己定义的事件。。。' );
}
}
});
var btn = Ext.create( 'Ext.Button',{
text: '按钮',
renderTo:Ext.getBody(),
handler: function(){
btn.fireEvent( 'myEvent');
}
});
win.show();
//事件的转发机制，1转发给的对象 2 转发的事件类型数组
win.relayEvents(btn,[ 'myEvent']);
});
************************************************************************************************