使用Store ajax的方式来获取数据

    <div id="grid1">    </div>
<script>
Ext.onReady(function() {
var store = new Ext.data.JsonStore({
storeId: 'myStore',
// autoLoad: true,//加上这个配置 就无需手动的写store.load()
proxy: {
type: 'ajax',
url: 'getImage.php',
reader: {
type: 'json',
root: 'images', //getData的函数最先触发
//这里配置过getData就相当于把数据取走了
//后面on事件 函数就不能通过records取到数据了 还是可以通过store.getProxy().getReader().rawData去到数据
// afterRequest 则根本取不到数据
// getData: function(data){
// console.log('getData in reader');
// console.log(data);
// }
}
// ,
// afterRequest: function(req, res) {
// console.log("After Request!", req.operation.response);
// }
}, //alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
fields: ['name', 'url', {
name: 'size',
type: 'float'
}, {
name: 'lastmod',
type: 'date'
}]
});
store.on({
'load': function(store, records, success, opts) {
console.log('on1');
console.log(success);
//records 是 []
console.log(records);
//PS rawData是一个{}
console.log(store.getProxy().getReader().rawData);
}
}, this, {single:true});
store.on('load', function(store, records, success, eOpts ){
console.log('on2');
console.log(success);
console.log(records);
console.log(store.getProxy().getReader().rawData);
});
//这个就是手动load 只是在store.load()的基础上传入了一个config
store.load({
callback: function(records, opts, success) {
console.log('load');
console.log(success);
console.log(records);
}
});
console.log(store);
var grid = new Ext.grid.Panel({
renderTo: 'grid1',
store: store,
columns: [{
header:'NAME',
dataIndex: 'name'
}, {
header:'URL',
dataIndex: 'url'
}, {
header: 'SIZE',
dataIndex:'size'
}, {
header: 'LASTMOD',
dataIndex:'lastmod'
}]
})
}); </script>

响应

<?php
echo '{"images":[{"name":"Image one","url":"/GetImage.php?id=1","size":46.5,"lastmod":"2007-11-28T16:00:00.000Z"},{"name":"Image Two","url":"/GetImage.php?id=2","size":43.2,"lastmod":"2007-11-29T16:00:00.000Z"}]}';
?>

PS 动态添加列

        var fields = ['name', 'url', {
name: 'size',
type: 'float'
}, {
name: 'lastmod',
type: 'date'
}];
var columns = [{
header: 'NAME',
dataIndex: 'name'
}, {
header: 'URL',
dataIndex: 'url'
}, {
header: 'SIZE',
dataIndex: 'size'
}, {
header: 'LASTMOD',
dataIndex: 'lastmod'
}];
var store = new Ext.data.JsonStore({
storeId: 'myStore',
// autoLoad: true,//加上这个配置 就无需手动的写store.load()
proxy: {
type: 'ajax',
url: 'getImage.php',
reader: {
type: 'json',
root: 'images',
},
afterRequest: function(req, res) {
console.log("After Request!", req.operation.response);
}
},
fields: fields
});
var grid = new Ext.grid.Panel({
renderTo: 'grid1',
store: store,
columns: columns
})
var column = Ext.create('Ext.grid.column.Column', {
text: 'New Column',
dataIndex:'newColumn'
});
var field = new Ext.data.Field({
name:'newColumn'
});
fields.push(field);
grid.getStore().model.setFields(fields);
grid.getStore().reload();
grid.headerCt.insert(grid.columns.length, column);
grid.getView().refresh();

不过对于Ext4.0.7版本 则没有 setFields 方法

                    newCols.forEach(function(item){
fields.push(item.dataIndex);
_columns.push({
header: item.header,
dataIndex: item.dataIndex
});
});
var storeNew = new Ext.data.Store({
fields: fields,
data: result.data,
reader: {
root: 'data',
totalProperty: 'total'
}
});
grid.reconfigure(storeNew, _columns);
grid.setLoading(false);

使用JsonP的Proxy

    Ext.onReady(function() {

        var columns = [{
header: '编号',
dataIndex: 'id'
}, {
header: '名称',
dataIndex: 'name'
}, {
header: '描述',
dataIndex: 'descn'
}]; //JsonP有两种实现方式
var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.mossle.com/data.json',
// reader: new Ext.data.JsonReader({
// totalProperty: "totalProperty",
// root: "root",
// id: "id"
// }),
// 这两种reader的写法都可以
reader:{
totalProperty: "totalProperty",
root: "root",
id: "id"
}
}),
fields: [{
name: 'id'
}, {
name: 'name'
}, {
name: 'descn'
}]
}); var store = new Ext.data.Store({
proxy:{
type:'jsonp',
url: 'http://www.mossle.com/data.json',
reader: {
totalProperty: "totalProperty",
root: "root",
id: "id"
},
callbackKey: 'callback' //也可以不写 因为默认这个key就是 callback
},
fields: [{
name: 'id'
}, {
name: 'name'
}, {
name: 'descn'
}]
}) var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width: 350,
height: 150,
loadMask: true,
store: store,
columns: columns
});
store.load(); });

响应

Ext.data.JsonP.callback1({"id":0,"totalProperty":5,"successProperty":true,"root":[{"id":"1","name":"name1","descn":"descn1"},{"id":"2","name":"name1","descn":"descn1"},{"id":"3","name":"name1","descn":"descn1"},{"id":"4","name":"name1","descn":"descn1"},{"id":"5","name":"name1","descn":"descn1"}]})

Ext Store Proxy Ajax的更多相关文章

  1. Extjs6设置Store、Ajax、form的请求方式(GET、POST)

    Extjs6 设置Store.Ajax.form的请求方式(GET.POST) Ajax请求和Form的submit方法设置请求方式和原来一样,使用method : 'POST'设置 // 表单提交 ...

  2. Ext修改所有Ajax的timeout

    Ext修改所有Ajax的timeout stackoverflow上的解决方案 //需要在初始化viewport时执行 //方法一重写 Ext.Ajax.timeout= 60000; Ext.ove ...

  3. MVVM模式下 修改 store的ajax请求url。

    MVVM模式下 修改 store的ajax请求url. view.down('Pro').getViewModel().getStore('xx_store').proxy.url = "s ...

  4. EXT.JS6中的model,store,proxy的一些用法

    //one-to-one Ext.define('Address', { extend: 'Ext.data.Model', fields: [ 'address', 'city', 'state', ...

  5. 【翻译】Ext JS 4——Ajax和Rest代理处理服务器端一场和消息的方法

    原文:EXTJS4 - Handle Server-side exceptions and message from an Ajax or Rest proxy 作者:Raja 可能要处理的情况:su ...

  6. Sencha Touch 2.2 Store Proxy 异常监控

    移动端到服务端通信往往会发生很多莫名的异常情况,如何有效的监控proxy异常,给用户友好的用户体验呢? Proxy给我提供了异常exception的监听事件,只需要监控该项目即可. Sencha To ...

  7. Ext.store.load callback

    var paramsReceivable = {};                paramsReceivable.querytext = Ext.getCmp('hiddquerytext').g ...

  8. Ext 怎么发ajax请求

    Ext3.3完整包 Ext3.3中文文档 数据表的结构是:数据表table  > 记录record > 字段 store的结构是:  Ext.data.Store > Ext.dat ...

  9. ExtJS笔记 Proxy

    Proxies are used by Stores to handle the loading and saving of Model data. Usually developers will n ...

随机推荐

  1. XML CDATA(Mybatis mapper and XML)

    Tip:must be followed by either attribute specifications, ">" or "/>". 所有 X ...

  2. NSThread 的用法

    一.线程的注意点: 1.不要同时开太多的线程(最多不要超过5条,其中包括主线程) 2.线程概念 2.1.主线程:UI 线程,显示.刷新 UI 界面,处理 UI 控件的事件 2.2.子线程:后台线程,异 ...

  3. OC字符串的常用方法

    网上写的关于字符串常用方法的博客很多,这里我简单做了下总结!不喜勿喷哦! 一.创建字符串 #import <Foundation/Foundation.h> //NSString //创建 ...

  4. FAQ:win7和win8 64位注册ocx控件方法

    win7/win8 问题所在: 64位的系统一般都是可以安装32位程序的, 执行         C:\Windows\SysWOW64\regsvr32.exe 而不是 C:\Windows\Sys ...

  5. Linux学习之tail命令

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...

  6. 学习python 一些错误记录

    1. TypeError: 'unicode' object is not callable当遇到这样的错误时候, 一般是属性当做方法调用了,比如,selenium 脚本, driver.title ...

  7. 5 Logistic回归(一)

    首次接触最优化算法.介绍几个最优化算法,并利用它们训练出一个非线性函数用于分类. 假设现在有一些数据点,我们利用一条直线对这些点进行拟合(该直线为最佳拟合直线),这个拟合过程称作回归. 利用Logis ...

  8. Python中文显示问题

    默认pyhon使用ASCII码来解释程序的,默认不支持中文,需要在程序的第一行或者第二行声明编码. 官方解决方案:https://www.python.org/dev/peps/pep-0263/ T ...

  9. MySql: Column 'XXXX' in field list is ambiguous 错误

    [Err] 1052 - Column 'XXXX' in field list is ambiguous 例如: SELECT id, a.name, price, `describe`, scho ...

  10. 数据库合并数据sql

    1.sql2000中只能用自定义的函数解决 )) , 'aa') , 'bb') , 'aaa') , 'bbb') , 'ccc') go )) ) as begin ) select @str = ...