继续其读书笔记
1 ext js事件绑定方式
var button = Ext.get('btn');
button.addListener('click',hello1);//绑定事件处理函数
button.addListener('click',hello2);
可以支持多事件绑定，执行顺序固定，支持延迟调用等优点
2 自定义事件
//创建Person类
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.sayNum = 0;
this.say = function(){
if(this.sayNum < 2){
this.sayNum += 1;
alert('I am '+name);
}else{
this.sayNum = 0;//触发自定义事件后计数器归零
this.fireEvent('onSay',this);//激发自定义事件
}
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
alert('发生了自定义事件');
});
</script>
上面点第3次后，触发了自定义事件
3 EXT JS的事件执行过程：添加事件（addevent),拦截事件（capture),激发事件（fireevent)
4 addevents,fireevent,addlistener
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
//为自定义事件绑定处理函数
per.addListener('onSay',function(name){
alert("I'am " + name);
});
</script>
</HEAD>
<BODY>
<input type='button' value='say' onclick='per.say()'>
</BODY>
5 capture例子
//继承自Ext.util.Observable
var Person = Ext.extend(Ext.util.Observable,{
constructor : function(name){
this.name = name;
this.say = function(){
this.fireEvent('onSay',this.name);//激发自定义事件
}
this.addEvents({//加入自定义事件
"onSay" : true
});
}
});
var per = new Person('tom');//创建对象
per.addListener('onSay',handler);//为自定义事件绑定处理函数
function handler(){//事件处理函数
alert('发生了自定义事件');
}
//为per对象添加拦截器
Ext.util.Observable.capture(per,captureFunction);
//拦截函数
function captureFunction(eventName){
if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行
alert("拦截事件：“"+eventName+"”。");
return false;
}
return true;
}
会输出：拦截事件：onsay;
6 addmanagerlistener事件监听器
function createFn(){
alert('新建');
}
function openFn(){
alert('打开');
}
function saveFn(){
alert('保存');
}
Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
renderTo: Ext.getBody(),
bodyPadding: 5,
width:300,
items : [
{text:'新建',id:'createBtn',iconCls:'newIcon'},
{text:'打开',id:'openBtn',iconCls:'openIcon'},
{text:'保存',id:'saveBtn',iconCls:'saveIcon'},
{text:'销毁新建按钮',handler : function(){
//销毁新建按钮
Ext.getCmp('createBtn').destroy();
}}
]
});
var createBtn = Ext.getCmp('createBtn');
createBtn.on('click',createFn);
//以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁
//了则事件绑定同时解除。
createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);
7 relayevents
<script type="text/javascript">
//创建Employee工人类
var Employee = Ext.extend(Ext.util.Observable,{
constructor : function(config){
this.name = config.name;
this.eat = function(){
this.fireEvent('startEat',this);//激发开始吃饭事件
this.fireEvent('finishEat',this);//激发结束吃饭事件
}
this.addEvents({//加入自定义事件
"startEat" : true,//开始吃饭事件
"finishEat" : true//结束吃饭事件
});
Employee.superclass.constructor.call(this, config)
}
});
//定义Waiter服务员类
var Waiter = Ext.extend(Ext.util.Observable,{
constructor : function(config){
Waiter.superclass.constructor.call(this, config);
}
});
//创建员工对象
var emp = new Employee({name:'tom'});
//为自定义事件绑定处理函数
emp.addListener('startEat',function(){
alert(this.name + '开始吃饭了。');
});
emp.addListener('finishEat',function (){
alert(this.name + '吃完饭，可以收拾盘子了。');
});
//创建服务员对象
var waiter = new Waiter();
//使服务员对象与员工对象的finishEat事件进行关联
//也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，
//然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。
waiter.relayEvents(emp, ['finishEat']);
waiter.on('finishEat',function(){
alert('服务员开始收拾盘子。');
});
</script>
8 ext.eventobject对象
var btn = Ext.get('buttonTest');
btn.addListener('click',handler);//为click事件绑定处理函数
function handler(e){//事件处理函数
//获取事件发生时的x坐标
var x = e.getPageX();
//获取事件发生时的y坐标
var y = e.getPageY();
var msg = '事件发生坐标 : x='+x+' y='+y;
alert(Ext.EventManager.getPageXY(e));
alert(msg);
}
9 EVENTMANAGER
Ext.onReady(function(){
Ext.EventManager.addListener('btn','click',handler);//绑定处理函数
function handler(){//事件处理函数
alert('hello');
}
});
10 EXT.AJAX.REQUEST示例
1） 简单示例
Ext.onReady(function(){
var requestConfig = {
url :'loginServer.jsp',//请求的服务器地址
params : {userName : 'tom',password : '123'},//请求参数
customer : '自定义属性',//附加属性
callback : function(options,success,response){//回调函数
var msg = ["请求是否成功：" ,success,"\n",
"服务器返回值：",response.responseText,
"本地自定义属性：",options.customer];
alert(msg.join(''));
}
}
Ext.Ajax.request(requestConfig);//发送请求
2） 异步表单
function login(){
var requestConfig = {
url :'loginServer.jsp',//请求的服务器地址
form : 'loginForm',//指定要提交的表单id
callback : function(options,success,response){//回调函数
var msg = ["请求是否成功：" ,success,"\n",
"服务器返回值：",response.responseText];
alert(msg.join(''));
}
}
Ext.Ajax.request(requestConfig);//发送请求
3）提交JSON对象
function login(){
var requestConfig = {
url :'loginServerJson.jsp', //请求的服务器地址
jsonData : getJson(), //发送json对象
callback : function(options,success,response){ //回调函数
var msg = ["请求是否成功：" ,success,"\n",
"服务器返回值：",response.responseText];
alert(msg.join(''));
}
}
Ext.Ajax.request(requestConfig); //发送请求
}
//生成json对象
function getJson(){
var name = document.forms['loginForm'].userName.value; //获取表单中的用户名信息
var pwd = document.forms['loginForm'].password.value; //获取表单中的密码信息
var jsonObj = { //创建包含用户名信息和密码信息的JSON对象
userName : name,
password : pwd
}
return jsonObj; //将JSON对象返回
}
服务端jSP
<%
BufferedReader in = request.getReader();
StringBuffer jsonStr = new StringBuffer();
String str = "";
while((str=in.readLine())!=null){
jsonStr.append(str);
}
JSONObject jsonObj = JSONObject.fromObject(jsonStr.toString());
String userName = jsonObj.getString("userName");
String password = jsonObj.getString("password");
String msg = "";
if(userName.equals("tom") && password.equals("123")){
msg = "登陆成功'json方式'";
}else{
msg = "登陆失败'json方式'";
}
response.getWriter().write(msg);
%>
11 ext.elemntloader：提供一个AJAX风格的更新操作。
1）简单加载
Ext.onReady(function(){
//得到元素的加载器对象（Ext.ElementLoader）
var loader = Ext.get('content-div').getLoader();
var btns = Ext.select('input');//选择页面中的所有input组件
btns.addListener('click',function(e,btn){//成批绑定click事件
var contentUrl = '9-5-'+btn.value+'.html';
load(contentUrl);//调用加载函数
});
//定义更新函数
function load(contentUrl){
loader.load({//调用元素加载器的load方法，更新页面元素
url : contentUrl,
loadMask : '正在加载数据请稍后...'
});
}
})
<div id="content-div" style="width:200px; height:100px; border:2px solid #ccc"></div>
<input type=button value='page1'>
<input type=button value='page2'>
2）自定义函数更新
Ext.onReady(function(){
var btns = Ext.get('updateBtn');//选择页面中id为updateBtn的元素
btns.on('click',update);//绑定单击事件
//得到元素的加载器对象（Ext.ElementLoader）
var loader = Ext.get('content-div').getLoader();
//定义更新函数
function update(){
loader.load({//调用更新器的update方法，更新页面元素
url : 'timeServer.jsp',
//自定义渲染函数
renderer : function(loader,response,request){
var time = Ext.getDom('serverTime');
//获取响应数据
time.value = response.responseText;
}
});
}
});
</script>
<BODY STYLE="margin: 10px">
<div id="content-div" style="width:200px; height:100px; border:2px solid #ccc">
<table width=100%>
<tr><td width=150>服务器时间：</td></tr>
<tr><td><input id='serverTime' type='text'/></td></tr>
<tr><td colspan=2><input type=button value='更新时间' id='updateBtn'></td></tr>
</table>
</div>
</BODY>
3） 自动定时更新
Ext.onReady(function(){
//得到元素的加载器对象（Ext.ElementLoader）
var loader = Ext.get('serverTime').getLoader();
Ext.get('startAutoBtn').on('click',startAutoUpdate);
Ext.get('stopAutoBtn').on('click',stopAutoUpdate);
function startAutoUpdate(){
//开始定时自动刷新
loader.startAutoRefresh(1000,{
url : 'timeServer.jsp'
});
}
function stopAutoUpdate(){
//停止定时自动刷新
loader.stopAutoRefresh();
}
})
12 EXT.template
1) Ext.onReady(function(){
var tpl = new Ext.Template(//定义模板
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',
'<tr><td>年龄</td><td>{1}</td></tr>',
'<tr><td>性别</td><td>{2}</td></tr>',
'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',['小王',25,'男']);
});
2) Ext.template.overwrite JSON对象方式
Ext.onReady(function(){
var tpl = new Ext.Template(//定义模板
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90>姓名</td><td width=90>{name}</td></tr>',
'<tr><td>年龄</td><td>{age}</td></tr>',
'<tr><td>性别</td><td>{sex}</td></tr>',
'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});
});
//注意这里是使用了jSON方式了
3) 模版中使用格式化函数
Ext.onReady(function(){
//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template([
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90>员工姓名</td>',
//{userName:capitalize}使用标准字符串格式化函数，字符串首字母大写
'<td width=120>{userName:capitalize}</td></tr>',
'<tr><td width=90>工作日期</td>',
//{WorkDate:this.cusFormat()}使用自定义格式化函数
'<td width=120>{WorkDate:this.cusFormat()}</td></tr>',
'</table>'
]);
//定义模板数据
var tplData = {
userName : 'tom',
WorkDate : new Date(2002,7,1)
}
//模板的自定义格式化函数
tpl.cusFormat = function(date,o){
return Ext.Date.format(date,'Y年m月d');
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
});
4) 自定义格式解析多层函数
Ext.onReady(function(){
//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td>',
'<td width=120>{name}</td></tr>',
'<tr><td width=90 >年龄</td>',
'<td width=120>{age}</td></tr>',
'<tr><td width=90 >身高</td>',
'<td width=120>{stature:this.parseJson}</td></tr>',
'</table>'
);
//定义模板数据
var tplData = {
name : 'tom',
age : 24,
stature : {
num : 170,
unit : 'cm'
}
}
//通过自定义格式化函数解析json对象
tpl.parseJson = function(json){
return json.num + json.unit;
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
});
13 Ext.xtemplate高级
1) 在其中使用for
Ext.onReady(function(){
//定义模板，使用tpl标签和for运算符
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',
'<tpl for=".">',
'<tr><td>{name}</td><td>{age}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = [
{name:'张三',age:20},
{name:'李四',age:25},
{name:'王五',age:27},
{name:'赵六',age:26}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
});
2) 在子模版中访问父模版数据
Ext.onReady(function(){
//定义模板，使用parent在子模板中访问父对象
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td><td width=90 >年龄</td><td width=90 >公司</td></tr>',
'<tpl for="emps">',
'<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = {
companyName : 'ACB公司',
emps:[
{name:'张三',age:20},
{name:'李四',age:25},
{name:'王五',age:27},
{name:'赵六',age:26}
]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
3) 还可以使用逻辑判断条件
'<tpl if="wage > 1000">',
4) 在模版中执行任意代码
Ext.onReady(function(){
//定义模板，在模板中执行任意代码
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0 class=title>',
'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td><td width=90 >奖金
</td></tr>',
'<tpl for="emps">',
'<tr class="{[xindex % 2 == 0 ? "even" : "odd"]}">',
'<td>{[xindex]}</td><td>{[values.name]}</td>',
'<td>{[values.wage * parent.per]}</td>',
'<td>{[Math.round(values.wage * parent.per / xcount)]}</td></tr>',
'</tpl>',
'<tr><td>发薪时间</td><td colspan=3>{[fm.date(new Date,"Y年m月d日")]}</td></tr>',
'<tr><td>工资总计</td><td colspan=3>{[this.avgWage(values)]}</td></tr>',
'</table>'
);
//模板的自定义格式化函数，用于计算工资总计
tpl.avgWage = function (o) {
var sum = 0;
var length = o.emps.length;
for(var i = 0 ; i <length ; i++){
sum += o.emps[i].wage;
}
return sum * o.per;
}
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = {
per : 0.9,
emps : [
{name : '张三',wage : 1000},
{name : '李四',wage : 1200},
{name : '王五',wage : 900},
{name : '赵六',wage : 1500}
]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
});
5) 使用模版成员函数
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0 class=title>',
'<tr><td width=90 >姓名</td><td width=90 >工资</td></tr>',
'<tpl for=".">',
'<tpl if="this.check(wage)">',
'<tr><td>{name}</td>',
'<td>{[this.format(values.wage)]}</td>',
'</tpl></tpl>',
'</table>',
{
//定义模板成员函数
check : function(wage) {
if(wage > 1000){
return true;
}else {
return false
}
},
//定义模板成员函数
format : function(wage) {
if(wage > 1300){
return '<font color=red>'+wage+'</font>';
}else {
return '<font color=blue>'+wage+'</font>';
}
}
}
);
14 EXT.VIEW视图
使用Xtemplate作为内置模版将与ext.data.store绑定,STORE的变化会反映在视图中
//产品数据视图
var productView = Ext.create('Ext.view.View',{
store: productStore, //数据源
tpl: productTpl, //视图
deferEmptyText : false,
itemSelector:'div.thumb-wrap',
emptyText: '请录入商品'
});