继续其读书笔记


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' οnclick='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: '请录入商品'

 });