extjs学习
- 格式：docx
- 大小：39.73 KB
- 文档页数：16
1、纯javascript声明//类的声明就是一个functionfunction user() {//相当于java的public = "zhangsan";this.age = 22;var email = "heh@";//java的privatethis.Email = function(){return email;}}var u = new user();alert(u.Email());var person = {name:"zhangsan",age:23}alert( + " " + person['age']); 2.使用extjs创建window窗体Ext.onReady(function(){var win = new Ext.window.Window({width:400,height:300,title:"hehe"});//使窗体渲染到页面中win.show();3.为某个按钮添加事件//1.获取要添加事件的按钮//2.为按钮添加事件//3.点击的时候调用对象win的show（）方法Ext.get("myb").on("click",function(){ win.show();4.使用Ext.create创建窗体（推荐使用）var win = Ext.create("Ext.window.Window",{width:400,height:300,title:"hehe"});5，使用define自定义窗体可以更改窗体的属性值Ext.define("mywin",{extend:'Ext.window.Window',width:400,height:300,newtitle:"enen",mySetTitle:function(){this.title=this.newtitle;},title:"haha",initComponent:function(){this.mySetTitle();this.callParent(arguments);}});Ext.create('mywin',{title:"hehe"}).show();6.使用js分开时为使页面更加整洁，通常不通过直接引用的方法引用js而使用命名空间的方式引用Ext.Loader.setConfig({enabled:true,paths:{//声明命名空间myapp:"ux"}});在create方法中加入requires属性Ext.create('ux.mywin',{title:"hehe",requires:['ux.mywin']}).show();});其中requires：[名字必须与define的名字相同]7.使用config自动生成配置项的set和get方法8.当一个类中没有实现一个功能而又需要时这时使用minxins（extend：只能是一个）方法混合进来，Ext.define('say', {canSay: function() {alert("hello")}});Ext.define('sing',{sing:function(){alert('sing hello 123');}});Ext.define('user', {//extend:say,mixins: {say: 'say',sing:'sing'}});var u = Ext.create('user',{});u.canSay();u.sing();二、數據模型1、普通molde的创建数据模型对真是世界中对事物在系统中的反应 extjs4.0中的modle相当于DB中的table 或JAVA中的classExt.onReady(function(){Ext.define("person",{extend:'Ext.data.Model',fields: [{name: 'name', type: 'string'},{name: 'age', type: 'int'},{email:'email',type:'auto'}],});//MVC中的model一定是M层Ext.regModel("person",{fields: [{name: 'name', type: 'string'},{name: 'age', type: 'int'},{email:'email',type:'auto'}],});//实例化person类//1、new 关键字var p = new person({name:'zhangsan',age:'23',email:'heskelk@'});//Ext.MessageBox.alert(p.get('name'));//2中var p1 = Ext.create("person",{name:'zhangsan',age:'23',email:'heskelk@'});alert(p1.get('age'));});2.使用validation 校验validations : [{type : 'length',field : 'name',min : 2,max:6},]var errors =p.validate();var errorInfo = [];errors.each(function(v){//使用push（）方法输出errorInfo.push(v.field + "," + v.message);});alert(errorInfo.join("\n"));3、自定义验证或扩展（validations）使用Ext.apply（）Ext.apply(Ext.data.validations,{age:function(config,value){参考ext4sAPI 的方法4、简单的数据代理Proxy 完成我们数据的crudExt.onReady(function(){Ext.define('person',{extend:'Ext.data.Model',fields:[{name:'name',type:"auto"},{age:'age',type:'int'},{email:'email',type:'auto'}],proxy:{type:'ajax',url:'person.jsp'}});var p = Ext.ModelManager.getModel("person");p.load(1, {scope: this,failure: function(record, operation) {//do something if the load failed},success: function(record, operation) {alert();},callback: function(record, operation) {//do something whether the load succeeded or failed}});数据代理proxy数据代理proxy是进行数据读写的主要途径，通过代理操作数据进行crud（增删改查）每一步操作都会得到一个唯一的Ext.data.Operation实例它也包含了所有的请求参数数据代理proxy目录结构Ext.data.proxy.Proxy 代理类的根类（分为客户端（Client）代理和服务器代理（Server）Ext.data.proxy.Client 客户端代理Ext.data.proxy.Memory 普通的内存代理（重点）Ext.data.proxy.WebStorage 浏览器客户端存储代理Ext.data.proxy.SessionStorage 浏览器级别代理【重点】Ext.data.proxy.LocalStorage 本地化的级别代理（不能跨浏览器）【重点】Ext.data.proxy.Server 服务器端代理Ext.data.proxy.Ajax 异步加载的方式【重点】Ext.data.proxy.Rest 一种特殊的AjaxExt.data.proxy.JsonP 跨域交互的代理—[重点] 跨域有严重的安全隐患的extjs的跨域也是需要服务器端做相应的配合Ext.data.proxy.Direct 命令3+方式的代理1.普通的内存（memory）代理模式Ext.onReady(function(){Ext.regModel('user',{fields:[{name:'name',type:'string'},{name:'age',type:'int'}]});//不利用create创建，直接使用proxy创建var userData = [{name:'zhangsan',age:23},{name:'zhangsan123',age:24},];//创建model的代理类var data =Ext.create('Ext.data.proxy.Memory',{ model:'user',data:userData});//更新userData.push({name:'lisi',age:11});data.update(new Ext.data.Operation({action:'update',data:userData}),function(result){},this);//查找data.read(new Ext.data.Operation(),function(result){ var datas = result.resultSet.records;Ext.Array.each(datas,function(model){alert(model.get('name'));});});});2.localStorage代理Ext.regModel('user',{fields:[{name : 'name',type : 'string'} ],proxy : {type : 'localstorage',id : 'twitter-Searches'}});//利用store初始化数据var store = Ext.create('Ext.data.Store',{ model:user});//使用add方法添加数据store.add({name:'zhangsan'});//使用sync方法异步加载store.sync();store.load();var msg = [];store.each(function(rec){msg.push(rec.get('name'));});alert(msg.join("\n"));});3.服务器端 ajax的代理模式（异步代理）Ext.regModel('person',{fields:[{name:'name',type:'string'},{age:'age',type:'int'},{email:'email',type:'string'}]});var ajaxProxy = new Ext.data.proxy.Ajax({url: 'person.jsp',model: 'person',reader: 'json'});ajaxProxy.doRequest(new Ext.data.Operation({ action:'read',limit:10,start:1,sorters:[new Ext.util.Sorter({property:'name',direction:'ASC'})]}),function(o){var text = o.response.responseText;alert(Ext.JSON.decode(text)['name']);});使用jsonP可以实现跨域4.Reader ：主要用于将proxy数据代理读取的数据按照不同的规则进行解析，将解析好的数据保存到modle中结构图:Ext.data.reader.Reader 读取器的根类Ext.data.reader.Json JSON格式的读取器Ext.data.reader.Array 扩展JSON的Array读取器Ext.data.reader.Xml XML格式的读取器5.Writer结构图：Ext.data.writer.WriterExt.data.writer.Json 对象被解释成JSON的形式传到后台Ext.data.writer.Xml 对象呗解析成XML的形式传到后台· 1.读取JSONExt.onReady(function(){var userData = {//total:200,count:250,user:{userId:'1',name:'zhangsan',orders:[{id:'1',name:'pen'},{id:'2',name:'book'}]}}Ext.regModel('user',{fields:[{name:'userId',type:'string'},{name:'name',type:'string'}],//model的一对多hasMany: {model: 'order'}});Ext.regModel('order',{fields:[{name:'id',type:'string'},{name:'name',type:'string'}],//多对一belongsTo:{type: 'belongsTo', model: 'user' } });var mproxy = Ext.create('Ext.data.proxy.Memory',{ model:user,data:userData,reader:{type:'json',root:'user',implicitIncludes:true,totalProperty:'count'}});mproxy.read(newExt.data.Operation(),function(result){var datas = result.resultSet.records;alert(result.resultSet.total);Ext.Array.each(datas,function(model){alert(model.get('name'));});var user = result.resultSet.records[0];var orders = user.orders();orders.each(function(order){alert(order.get('name'));});});·});· 2.使用xml读取Ext.onReady(function(){Ext.regModel('user',{fields:[{name:'name'},{name:'id'}],proxy:{type:'ajax',url:'js/users.xml',reader:{type:'xml',record:'user'}}});var user = Ext.ModelManager.getModel('user');user.load(1,{success:function(model){alert(model.get('name'));}});3.使用Array二维数组读取Ext.onReady(function(){Ext.regModel('person',{fields:[{name:'name'},{name:'age'}],proxy:{type:'ajax',url:'person.jsp',reader:{type:'array'}}});var person = Ext.ModelManager.getModel('person');person.load(1,{success:function(model){alert(model.get('name'));}});});4.writer写入Ext.onReady(function(){Ext.regModel('person', {fields : [ {name : 'name'}, {name : 'age'} ],proxy : {type : 'ajax',url : 'person.jsp',writer : {type : 'json'}}});Ext.ModelMgr.create({name:'hhhhhhhh',age:'23'},'person').save();});Ext.data.Store：Ext.onReady(function(){//使用define创建person对象// Ext.define('person',{// extend:'Ext.data.Model',// fields:[// {name:'name',type:'string'},// {name:'age',type:'int'}// ],// proxy:{// type:'memory',// }// });var s = new Ext.data.Store({//当不使用model时，使用fields 会自动创建对象modelfields:[{name:'name',type:'string'},{name:'age',type:'int'}],// data:[// {name:"hehe",age:22},// {name:'haha',age:23}// ],//使用ajax代理模式代理proxy:{type:'ajax',url:'person.jsp'}//model:person,//autoLoad:true});// s.each(function(model){// alert(model.get('name'));// });//不使用autoload 而使用load（）方法s.load(function(records, operation, success) {Ext.Array.each(records,function(model){alert(model.get('name'));});当使用memory内存代理时，使用autoLoad自动加载，当使用ajax代理时使用load加载Event事件1.扩展自己需要的监听器Ext.define('children',{extend:'Ext.util.Observable',constructor:function(){this.state='hungry',this.setMilk = function(milk){this.fireEvent('hungry',milk);}this.addEvents('hungry',true);this.addListener('hungry',function(milk){if(this.state == 'hungry'){this.drink(milk);}else{alert('我不饿');}}),this.drink = function(milk){alert('我喝了一瓶'+milk + "牛奶");}}});var children = Ext.create('children',{});children.setMilk('三鹿');3.addManagedListener收管制的监听它是调用的组建管理的，当组建执行了销毁命令的时候所有被组建管制的事件全部销毁Ext.onReady(function(){var tbar = Ext.create('Ext.toolbar.Toolbar',{renderTo: Ext.getBody(),width:500,items:[{xtype:'button',id:'create',text:'create'},{xtype:'button',id:'delete',text:'delete'},{xtype:'button',text:'销毁删除按钮',handler:function(){var c = Ext.getCmp('delete');if(c){c.destroy();}}}]});var deleteB = Ext.getCmp("delete");deleteB.addManagedListener(Ext.getCmp('create'),'click ',function(){alert('添加操作');});4.relayEvents 事件放到分发和传播（控制实现事件在不同空间或对象内的传播）5.事件对象Ext.EventObject不是一个单例，不能被直接new出来，他会存活在事件处理的函数中6.事件管理器Ext.EventManager它可以更方便飞为页面元素绑定事件处理函数方法：addListener 为元素增减事件Ajax的请求Request对象Ext.onReady(function(){Ext.Ajax.request({url:'person.jsp',params:{id:'01'},method:'POST',success:function(response,options){alert(eval(response.responseText)[0].name);},failure:function(response,options){alert(response.responseText+" " + options);});提交表单Ext.onReady(function(){Ext.get('b').on('click',function(){Ext.Ajax.request({url:'person.jsp',params:{id:'01'},method:'POST',form:'form',success:function(response,options){alert(eval(response.responseText)[0].name);},failure:function(response,options){alert(response.responseText+" " + options);}});Ext.ElementLoaderExt.get('b1').on('click',function(){var time = Ext.get('time').getLoader();time.load({method:'POST',url:'TimeAction.do',renderer:function(loader,response,request){var time = response.responseText;Ext.getDom('time').value = time;}});});startAutoRefresh()。
