ch06_ExtJs 4 中的数据操作
ExtJs4学习（八）数据代理Proxy
ExtJs4学习（⼋）数据代理ProxyExtJs数据代理我们介绍常⽤的四种，但会着重介绍ajax代理，因为⽇常开发中，这个最为常⽤Ext.data.proxy.AjaxAjaxProxy(Ajax数据代理类)是你的应⽤程序中使⽤最⼴泛的获取数据的⽅式. 它使⽤AJAX请求来从服务器获取数据, 然后通常将它们放⼊Store中. 让我们来看⼀个典型的配置. 这⾥我们为⼀个Store设置⼀个AjaxProxy代理. ⾸先我们准备好⼀个Model:Ext.define('User', {extend: 'Ext.data.Model',fields: ['id', 'name', 'email']});//⼀个包含AjaxProxy代理的Store, 使⽤参数⽅式绑定.var store = Ext.create('Ext.data.Store', {model: 'User',proxy: {type: 'ajax',url : 'users.json'}});store.load();store.on('load',function(store,records){store.each(function(record){console.log(record.get('name'));});})这⾥说明下官⽹的例⼦是直接使⽤store.each ⽅法，但那是没⽤的store 中each()⽅法的使⽤应在load完使⽤，确切的说应该在on('load')事件中使⽤，切记我们的例⼦将会把user数据加载到Store中, ⾸先我们定义⼀个Model, Model包含的字段(fields)即为从服务器返回数据的相应字段. 接下来我们定义⼀个Store, 它包含了⼀个proxy配置项. 此配置项将会⾃动转换为⼀个 Ext.data.proxy.Ajax类的实例, 此实例包含了我们定义的url参数. 这等效于下⾯这段代码new Ext.data.proxy.Ajax({url: 'users.json',model: 'User',reader: 'json'});这⾥出现了两个额外的参数 - model和reade. 这些参数在通过Store来创建proxy实例时是默认指定的 - Store中已经定义了 Model,并且Proxy的默认Reader为JsonReader.最后我们调⽤store.load(), 触发执⾏AjaxProxy的action, 向配置的url发送请求(本⽰例为'users.json'). 由于我们执⾏的是数据读取, 所以讲发送⼀个GET⽅式的请求.(请求⽅式的定义参见actionMethods - 默认所有读数据请求（read）的⽅式为GET, ⽽所有写请求（create、update、destroy）的⽅式为POST)配置项actionMethods: {create : 'POST',read : 'GET',update : 'POST',destroy: 'POST'}限制配置Reader和WriterAjaxProxy可以配置任意类型的Reader来解读服务器端的响应. 如果不显式指定Reader, 将默认使⽤JsonReader. 可以使⽤简单属性对象的⽅式来配置Reader,代理将⾃动将其转换为Reader类的实例:var proxy = new Ext.data.proxy.Ajax({model: 'User',reader: {type: 'xml',root: 'users'}});proxy.getReader(); //返回⼀个XmlReader的实例.⽣成UrlAjaxProxy会⾃动将排序,过滤,翻页和分组参数添加到⽣成的url中. 可以使⽤下⾯这些属性来配置这些参数:- 控制如何向服务器发送页数(同样参见startParam和limitParam)- 控制如何向服务器发送排序信息- 控制如何向服务器发送分组信息- 控制如何向服务器发送过滤信息每个AjaxProxy发出的请求对象由⼀个Operation对象来描述. 为了说明我们是如何⽣成⾃定义url的, 让我们看看下⾯这个Operation:var operation = new Ext.data.Operation({action: 'read',page : 2});然后我们⽤此Operation来发布请求, 通过调⽤:var proxy = new Ext.data.proxy.Ajax({url: '/users'});proxy.read(operation); //GET /users?page=2很简单吧 - Proxy代理类只需要复制Operation中的page值即可. 我们还能⾃定义如何向服务器发送page数据:var proxy = new Ext.data.proxy.Ajax({url: '/users',pageParam: 'pageNumber', //默认page});proxy.read(operation); //GET /users?pageNumber=2还有另⼀个⽅案, 可以配置Operation来发送start和limit参数代替page:var operation = new Ext.data.Operation({action: 'read',start : 50,limit : 25});var proxy = new Ext.data.proxy.Ajax({url: '/users'});proxy.read(operation); //GET /users?start=50&limit;=25同样地我们可以⾃定义startParam limitParamvar proxy = new Ext.data.proxy.Ajax({url: '/users',startParam: 'startIndex',//默认startlimitParam: 'pageSize'//默认limit});proxy.read(operation); //GET /users?startIndex=50&pageSize;=25AjaxProxy还会向服务器发送排序和过滤信息. 让我们来看看如何使⽤Operation来表⽰:var operation = new Ext.data.Operation({action: 'read',sorters: [new Ext.util.Sorter({property : 'name',direction: 'ASC'}),new Ext.util.Sorter({property : 'age',direction: 'DESC'})],filters: [new Ext.util.Filter({property: 'eyeColor',value : 'brown'})]});当使⽤⼀个包含sorters和filters参数的来加载数据时, 就会在内部⽣成上⾯这样的对象. 默认情况下, AjaxProxy 会对sorters和filters进⾏JSON转换, 从⽽得到如下结果(注意url发送前会被加密, 这⾥为便于阅读使⽤未加密的串):var proxy = new Ext.data.proxy.Ajax({url: '/users'});proxy.read(operation); //GET /users?sort=[{"property":"name","direction":"ASC"},{"property":"age","direction":"DESC"}]&filter;=[{"property":"eyeColor","value":"brown"}]同样地我们能够⾃定义这些参数项. 假设我们的服务器读取排序信息的格式是"sortBy=name#ASC,age#DESC". 我们可以像这样配置AjaxProxy来提供这种格式:var proxy = new Ext.data.proxy.Ajax({url: '/users',sortParam: 'sortBy',filterParam: 'filterBy',//我们⾃定义实现排序信息转码⽅法 - 将sorters转换为"name#ASC,age#DESC"encodeSorters: function(sorters) {var length = sorters.length,sortStrs = [],sorter, i;for (i = 0; i < length; i++) {sorter = sorters[i];sortStrs[i] = sorter.property + '#' + sorter.direction}return sortStrs.join(",");}});proxy.read(operation); //GET /users?sortBy=name#ASC,age#DESC&filterBy;=[{"property":"eyeColor","value":"brown"}]同样我们还能够通过⾃定义实现⽅法来对filters信息进⾏转码Ext.data.proxy.JsonP<script src="/users?callback=someCallback"></script>在我们注⼊了上⾯这个标签后, 浏览器就会向这个url发送⼀个请求. 通过url中的callback, 我们通知domainB的服务器: 当结果返回时请调⽤此回调函数并传⼊返回的数据. 只要服务器将响应结果组成如下格式, 调⽤就成功了:Ext.regModel("User",{fields:[{name:'name',type:'string'}],proxy:{type:'jsonp',//跨域交互的代理url:'/extjs/person.php'}});var person = Ext.ModelManager.getModel('User');person.load(1,{scope:this,success:function(model){alert(model.get('name'));}});Ext.data.proxy.LocalStorageLocalStorageProxy使⽤最新的HTML5本地数据库API, 将数据保存在本地客户端. HTML5本地数据库是⼀个键值对存储(例如不能存储像JSON这样的复杂对象), 因此LocalStorageProxy在保存和读取数据时, ⾃动进⾏序列化和反序列化.本地数据库在保存⽤户个⼈信息时⾮常有⽤, 从⽽不再需要在服务端建⽴数据结构.Ext.define('User', {fields: ['id', 'name'],extend: 'Ext.data.Model',proxy: {type: 'localstorage'}});var store = new Ext.data.Store({model:'User'});store.add({name:'somnus'});// 保存数据store.sync();// 读取数据store.load();store.each(function(record){(record.get('name'));});Ext.data.proxy.Memory内存代理. 此代理使⽤简单的本地变量进⾏数据的存储/读取, 所以其内容将在每次页⾯刷新时被清除.通常此代理并不直接使⽤, ⽽是作为Store的辅助服务对象, 为其在加载数据时提供reader对象. 例如, 假设我们有⼀个 User Model和Store, 以及⼀些我们想要加载的内部数据, 但是这些数据的格式并不是很合适: 这时我们就可以⽤⼀个带有JsonReader的MemoryProxy 来为Store读取这些数据://我们将在store中使⽤的model对象Ext.define('User', {extend: 'Ext.data.Model',fields: [{name: 'id', type: 'int'},{name: 'name', type: 'string'},{name: 'phone', type: 'string', mapping: 'phoneNumber'}]});//数据字段不是按照model中定义排列的 - 字段'phone'在此称为'phoneNumber'var data = {users: [{id: 1,name: 'Ed Spencer',phoneNumber: '555 1234'},{id: 2,name: 'Abe Elias',phoneNumber: '666 1234'}]};//请注意我们是如何通过设置reader的'root'来满⾜上⾯的数据结构的.var store = Ext.create('Ext.data.Store', {autoLoad: true,model: 'User',data : data,proxy: {type: 'memory',reader: {type: 'json',root: 'users'}}});var memoryProxy = Ext.create("Ext.data.proxy.Memory",{data:data,model:'User'})data.push({name:'sunday',age:1});memoryProxy.update(new Ext.data.Operation({action:'update',data:data}),function(result){},this);memoryProxy.read(new Ext.data.Operation(),function(result){var datas = result.resultSet.records;Ext.each(datas,function(model){(model.get('name'));});var totalRecords = result.resultSet.total;alert('读取内存数据，记录总是：' + totalRecords); });。
ExtJS 4 官方指南：数据 Data 简体中文版
ExtJS 4 官方指南翻译：数据Data 数据包加载并保存您的应用程序中的所有数据。
它包括41类，但其中有三个，比其他的都, Store和有些支持的卫星类：1模型和存储Models and Stores让我们看看怎么创建一个Model：Ext.define('User',{extend:'Ext.data.Model',fields:[{ name:'id', type:'int'},{ name:'name', type:'string'}]});Models通常会用到Store，Store基本上是Models实例的一个集合。
建立一个Store和加载其数据很简单：Models are typically used with a Store, which is basically a collection of Model instances. Setting up a Store and loading its data is simple:Ext.create('Ext.data.Store',{model:'User',proxy:{type:'ajax',url :'users.json',reader:'json'},autoLoad:true});我们配置Store使用Ajax Proxy，告诉它加载数据的URL，并用一个Reader解析数据。
在这种情况下，我们的服务器返回JSON，所以我们创建一个JSON Reader来读取响应。
Store 从URL users.json中自动加载User model实例集合。
users.json URL应该返回一个JSON 字符串，看起来像这样：We configured our Store to use an Ajax Proxy, telling it the url to load data from andthe Reader used to decode the data. In this case our server is returning JSON, so we've set up a Json Reader to read the response. The store auto-loads a set of User model instances from the url users.json. The users.json url should return a JSON string that looks something like this:{success:true,users:[{ id:1, name:'Ed'},{ id:2, name:'Tommy'}]}Simple Store例子里有现场演示。
Extjs4GridPanel的主要配置参数详细介绍
Extjs4GridPanel的主要配置参数详细介绍主要配置项：store：表格的数据集columns：表格列模式的配置数组，可⾃动创建ColumnModel列模式autoExpandColumn：⾃动充满表格未⽤空间的列，参数为列id，该id不能为0stripeRows：表格是否隔⾏换⾊，默认为falsecm、colModel：表格的列模式，渲染表格时必须设置该配置项sm、selModel：表格的选择模式，默认为Ext.grid.RowSelectionModelenableHdMenu：是否显⽰表头的上下⽂菜单，默认为trueenableColumnHide：是否允许通过标题中的上下⽂菜单隐藏列，默认为trueloadMask：是否在加载数据时显⽰遮罩效果，默认为falseview：表格视图，默认为Ext.grid.GridViewviewConfig：表格视图的配置对象autoExpandMax：⾃动扩充列的最⼤宽度，默认为1000autoExpandMin：⾃动扩充列的最⼩宽度，默认为50columnLines：是否显⽰列分割线，默认为falsedisableSelection：是否禁⽌⾏选择，默认为falseenableColumnMove：是否允许拖放列，默认为trueenableColumnResize：是否允许改变列宽，默认为truehideHeaders：是否隐藏表头，默认为falsemaxHeight：最⼤⾼度minColumnWidth：最⼩列宽，默认为25trackMouseOver：是否⾼亮显⽰⿏标所在的⾏，默认为true主要⽅法：getColumnModel()：取得列模式getSelectionModel()：取得选择模式getStore()：取得数据集getView()：取得视图对象reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )：使⽤⼀个新的数据集和列模式重新配置表格组件主要配置项：id：列idheader：表头⽂字dataIndex：设置列与数据集中数据记录的对应关系，值为数据记录中的字段名称。
Extjs 4 chart 的使用
Ext chart 的使用Ext.onReady(function(){var data=[{name:'张三',age:30,sex:'男',score:60,ot:30},{name:'李四',age:10,sex:'男',score:50,ot:40},{name:'王五',age:33,sex:'女',score:78,ot:100},{name:'赵六',age:20,sex:'男',score:90,ot:56},{name:'刘七',age:23,sex:'女',score:100,ot:67}];var data1=[{name:'TOM',age:34,sex:'男',score:78,ot:30},{name:'JIM',age:23,sex:'男',score:12,ot:30},{name:'KA TE',age:45,sex:'女',score:78,ot:30},{name:'KING',age:65,sex:'男',score:45,ot:30},];var store=Ext.create('Ext.data.Store',{fields:['name','age','sex','score','ot'],autoLoad:true,proxy:'memory',data:data})function loaddata(){if(store.data.length==5){store.loadData(data1)}else{store.loadData(data)}}var chart3=Ext.create('Ext.chart.Chart',{ animate:true,store:store,width:400,height:230,legend: {position: 'right'},series:[{legend: {position: 'right'},type:'pie',highlight:{segment:{margin:5}},field:'age',showInLegend: true,label: {field: 'name',display: 'rotate',contrast: true,font: '18px Arial'}}]})var chart0=Ext.create('Ext.chart.Chart',{ animate:true,store:store,width:400,height:230,axes:[{type:'Numeric',fields:['age','score'],title:'年龄',position:'left',minimum:0,grid:{odd:{fill:'#ccc'}}},{type:'Category',position:'bottom',fields:['name'],title:'姓名',grid:true,label: {rotate: {degrees: 315}}}],series:[{axis:'left',type:'line',xField:['name'],yField:['age'],fill:true,style:{opacity:.5}, markerConfig:{type:'cross','fill':'blue',}},{axis:'left',type:'line',xField:['name'],yField:['score'],style:{opacity:.5}},{axis:'left',type:'scatter',xField:['name'],yField:['ot'],markerConfig:{'fill':'red',size:10,radius:10},style:{opacity:.5}}]})var chart=Ext.create('Ext.chart.Chart',{ animate:true,store:store,width:400,height:230,axes:[{type:'Numeric',fields:['age','score'],title:'年龄',position:'left',minimum:0,grid:{odd:{fill:'#ccc'}}},{type:'Category',position:'bottom',fields:['name'],title:'姓名',grid:true,label: {rotate: {degrees: 315}}}],series:[{axis:'left',type:'area',xField:['name'],yField:['age','score'],style:{opacity:.5}}]})var chart2=Ext.create('Ext.chart.Chart',{animate:true,store:store,width:400,height:230,axes:[{type:'Numeric',fields:['age'],title:'年龄',position:'left',minimum:0,grid:true},{type:'Category',position:'bottom',fields:['name'],title:'姓名',grid:true}],series:[{axis:'left',type:'column',xField:['name'],yField:['age',]}]})var panel=Ext.create('Ext.panel.Panel',{renderTo:Ext.getBody(),title:'chart',layout:'column',width:810,height:800,tbar:[{text:'LONG---',handler:function(){loaddata()}}], items:[chart3,chart0,chart,chart2]})})。
Ext4详解 (1)
Extjs4布局详解(三)—accordion布局2012-02-08来源：mhzg作者：mhzg(共0条评论)accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。
其中每个面边都支持展开和折叠。
accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。
其中每个面边都支持展开和折叠。
注意：只有Ext.Panels和所有Ext.panel.Panel 子项，才可以使用accordion布局。
示例代码：1.Ext.create('Ext.panel.Panel',{2.title:'Accordion Layout',3.width:300,4.height:300,5.x:20,6.y:20,yout:'accordion',8.defaults:{9.bodyStyle:'padding:15px'10.},youtConfig:{12.titleCollapse:false,13.animate:true,14.activeOnTop:true15.},16.items:[{17.title:'Panel1',18.html:'Panel content!'19.},{20.title:'Panel2',21.html:'Panel content!'22.},{23.title:'Panel3',24.html:'Panel content!'25.}],26.renderTo:Ext.getBody()27.});Extjs4布局详解(二)—border布局2012-02-05来源：mhzg作者：mhzg(共0条评论)border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。
Extjs教程 第四章 按钮、菜单和工具栏(2)
第四章按钮、菜单和工具栏（2）Shortcuts（快捷方式）：Ext有很多shortcuts，使得编码变的更快了。
shortcuts就是一个或者连个字符组成的用来做显示控制的配置对象。
如下，十一哥标准的工具栏filler(就是之前的fill)配置：{xtype: ‘tbfill’}它的shortcuts就是“->”。
不是所有的快捷方式都能在文档中查到，你可以参看源码，找到你需要的。
这里列出几种常用的shortcuts：图标按钮：标准的图标按钮就是你在文本编辑器里看到的使字体加粗或者倾斜的那些按钮。
建立图标按钮需要两步——定义被用作图标的图片和适当的CSS类。
{xtype: 'tbbutton',cls: 'x-btn-icon',icon: 'images/bomb.png'}可以让图标和文字共存，只要调整CSS类并且让添加text配置项：{xtype: 'tbbutton',cls: 'x-btn-text-icon',icon: 'images/bomb.png',text: 'Tha Bomb'}按钮操作函数(handler)——点击我！按钮不仅需要好看而且还要能完成和用户的交互。
这就是操作函数(handler)为什么会被引入进来。
一个handler是一个在按钮被单击后调用的函数。
handler配置项就是我们加入自己函数的地方：{xtype: 'tbbutton',text: 'Button',handler: function(){Ext.Msg.alert('Boo', 'Here I am');}}这段代码会在按钮单击后弹出警告窗口。
有些时候，我们需要在单击后改变按钮的状态，所以每个按钮的handler都会传递按钮本身作为函数的参数。
ExtJs4.1用store装载本地的数据以及装载服务端的数据
ExtJs4.1用store装载本地的数据以及装载服务端的数据//下面是用来装载本地的数据（就是自定义的数据）Ext.onReady(function () {Ext.regModel("user", {fields: [{ name: "name", type: "string" }, { name: "age", type: "int"}]});var data = [{ name: "likeshan1", age: 1 }, { name: "likeshan2", age: 2}];var store = Ext.create("Ext.data.Store", {model: "user",data: data,autoLoad: true //这个默认的是false，要制定其为true});store.each(function (model) {alert(model.get("name"));}, this);});//当然我们也可以不适用model，而直接在store里面定以fields，如下所示Ext.onReady(function () {Ext.define("user", {extend: "Ext.data.Model",fields: [{ name: "name", type: "string" }, { name: "age", type: "int"}]});var data = [{ name: "liudehua", age: 20 }, { name: "zhangxueyou", age: 25}];var store = new Ext.data.Store({fields: [{ name: "name", type: "string" }, { name: "age", type: "int"}], //这个是用来代替model，在这里定义了这个fields之后，就会自动创建一个匿名的model来使用的data: data,autoLoad: true});store.each(function (model) {alert(model.get("name"));}, this);});//从服务端加载数据Ext.onReady(function () {Ext.define("user", {extend: "Ext.data.Model",fields: [{ name: "username", type: "string" }, { name: "age", type: "int"}]});var store = Ext.create("Ext.data.Store", {model: "user",proxy: {type: "ajax",url: "test2.aspx", //Response.Write("[{username:'likeshan',age:20},{username:'liud ehua',age:50}]");reader: {type: "json"}}//,//autoLoad:true//在使用ajax的时候最好不要使用自动加载，因为我们有的时候需要自己手动加载，这样就可以真正地操作我们需要的数据，否则会加载两次});store.load(function (records, operation, success) {//注意这里的records是指从服务端下载过来的对象数组，并不是针对存入store 中的model类型进行操作// records.each(function (model) {//因此这样是无法取到数据的// alert(model.get("name"));// });// Ext.Array.each(records, function (item) {//单个的item是一个model// alert(item.get("username"));// });store.filter("username", "liudehua"); //liudehua过滤出来sto。
Extjs4分享手册
Extjs布局
Extjs布局分为容器布局和组件布局两大类。 容器布局：
组件布局：Dock、Tool、Field、TriggerField
容器布局
一、Auto layout 说明：组件在容器中原样排列
二、Anchor layout 说明：组件通过anchor属性，out 说明：继承自Anchor布局，可以同通过x、y 属性设置组件同容器左上角的距离。
如下页面：
获取id为text1的html控件：Ext.getDom(“text1”) 获取第一个input控件：Ext.query("input")[0] 获取id为text2的ext元素：Ext.get(“text2”) 获取id为textfield1的ext元素：Ext.get("textfield1") 获取id为textfield2的ext组件：Ext.getCmp(“textfield2”) 获取第一个textfield组件：ponentQuery.query(“textfield”)*0+ 获取textfiled1相邻的textfield2：Ext.getCmp("textfield1").next("textfield") 获取textfieldchild1的父panel：Ext.getCmp(“textfieldchild1”).up(“panel”) 获取panel下面的第一个textfield组件： ponentQuery.query("panel[title=Extjs控件]")[0].down("textfield")
Chapter：
Ext.define ('Chapter', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'number', type: 'int'}, {name: 'title', type: 'string'}, {name: 'bookId', type: 'int'} ] }); 说明：hasMany有以下的配置项 model ：关联对象的model名称 name:：关联的模型别名，用来获取关联对象数据，如果没有，默认为model名称加上“s” primaryKey ：主键，主对象用于关联的属性名称，默认为id foreignKey：外键，关联对象用于关联的属性名称，默认为关联对象model名称加上“_id” filterProperty ：过滤数据，只需要指定数据关联
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
ExtJs 4 中的数据操作讲师：风舞烟目录：1.Ext.Ajax2.Ext.data.Proxy3.Ext.data.Model4.Ext.data.Store5.综合示例内容：1.Ext.Ajaxajax几个常用的参数如下:success Function 指定当Ajax请求执行成功后执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request方法时的options对象。
failure Function指定当请求出现错误时执行的回调函数，传递给回调函数两个参数，第一个参数response表示执行Ajax请求的XMLHttpRequet对象，第二个参数表示执行request 方法时的options对象。
scope Object 指定回调函数的作用域，默认为浏览器window。
form Object/String 指定要提交的表单id或表单数据对象。
isUpload Boolean 指定要提交的表单是否是文件上传表单，默认情况下会自动检查。
headers Object 指定请求的Header信息。
xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
jsonData Object/String 指定需要发送给服务器端的JSON数据。
如果指定了该属性则其它的地方设置的要发送的参数值将无效。
disableCaching Boolean 是否禁止cache。
例1通过客户端向服务端发送Ajax请求，可以“直接”调用MVC的action方法，并传递参数，action返回值可以是普通字符串，也可以是json对象。
请求可以添加自定义头信息Ext.onReady(function() {new Ext.Button({renderTo: "div1",text: "后台Ajax提交",handler: function() {Ext.Ajax.request({url: 'Ajax_Func1',headers: {'userHeader': 'userMsg' },params: { a: 10, b: 20 },method: 'GET',success: function(response, options) {Ext.MessageBox.alert('成功', '从服务端获取结果: ' +response.responseText);},failure: function(response, options) {Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);}});},id: "bt1" });});后台返回的数据如：{success:true,msg:"ok"}例2异步请求，返回json结果Ext.onReady(function() {new Ext.Button({renderTo: "div1",text: "后台Ajax提交方式2返回JSON",handler: function() {Ext.Ajax.request({url: 'Ajax_Func2',params: { n: 10 },method: 'POST',callback: function(options, success, response) {if(success) {var responseJson = Ext.JSON.decode(response.responseText);Ext.Msg.alert("成功", options.params.n + "的平方是：<font color='red'>" + responseJson.n1 + "</font><br />"+ options.params.n + "的累加是：<fontcolor='red'>" + responseJson.n2 + "</font>");} else{Ext.Msg.confirm('失败','请求超时或网络故障,错误编号：[' +response.status + ']是否要重新发送？', function(btn) {if (btn == 'yes') {Ext.Ajax.request(options);}});}}});}});});服务端返回数据形如：{ success:true,n1:100,n2:20}例3异步请求事件。
当发起ajax请求之前，可以监听beforerequest事件，本例每当发起ajax事件时，都会把计算器+1：var ajaxCount = 0;//每当Ajax请求发起时触发：Ext.Ajax.on('beforerequest', function (){ Ext.get("span1").update(++ajaxCount) }, this);例4.Ext.Ajax处理xml数据核心代码：//在此添加ExtJS代码<script type="text/javascript">Ext.onReady(function(){callback=function(o,s,r){console.log(r);console.log(s);var html=[];html.push("<p>success："+s);var doc=r["responseXML"];if(doc){var t="";if(doc.xml)t=Ext.htmlEncode(r["responseXML"].xml);elset=Ext.htmlEncode((newXMLSerializer()).serializeToString(doc));html.push("<p>response[\"responseXML\"]："+t); }Ext.getDom("ajaxinfo").innerHTML=html.join("");// var doc2 = r.responseXML;//alert(doc2.childNodes[0].childNodes[1].innerHTML);}Ext.fly("button2").on("click",function(){Ext.Ajax.request({url:"data/test.xml",callback:callback})});});</script></head><body><input type="button" value="button2" id="button2"/><span id="ajaxinfo"></span></body>Test.xml<?xml version="1.0" encoding="UTF-8"?><data><success>true</success><message>ok</message></data>ponentLoader示例：Ext.onReady(function(){//在此添加ExtJS代码var panel=Ext.create("Ext.Panel",{renderTo:Ext.getBody(),layout:"auto",height:500,width:400,autoLoad:{url:"Component.js",renderer:"component"},tbar:[{text:"加载组件",scope:panel,handler:function(){panel.loader.load({url:"Component1.js",renderer:"component"})}},{text:"加载组件(removeAll)",scope:panel,handler:function(){panel.loader.load({url:"Component1.js",renderer:"component",removeAll:true})}}]});});Component.js{xtype:'panel',height:100,width:200,html:"原有的组件"}Component1.js{xtype:'panel',height:100,width:90,html:"新增的组件"}二、Ext.data.Proxy使用Proxy的目的，很简单，就是为了分层示例：（核心代码）使用Ajax处理数据的代理：示范Ext.data.proxy.Rest方式详见代码示范Direct方式服务端代码: Ext.data.proxy.Server详见代码3.Ext.data.ModelExt.data.Model 是ExtJS4中引入的一个新的概念，替代之前的Record对象，它与Record 对象的主要区别是引入了关联，验证等新的内容简单点说，一个数据模型实例相当于是数据库里的一条记录，它由字段组成，通过数据模型，可以添加记录，删除记录，编辑记录和更新记录等示例参考/kf/201206/136071.html4、Ext.data.StoreExt.data.Store 作用：为什么要使用Store? 为了使数据与UI分离一般来说，Model的实例就是一条记录，而Store对象就是这个Model实例的集合实例参考如下/luluping/archive/2009/07/21/1527471.html 5、综合示例：。