Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码


Posted in PHP onApril 07, 2010

1 建立get.php
get.php=>

<?php 
$data=array( 
array(1,"yixing",123), 
array(2,"chenlin",13), 
array(3,"lixin",123), 
array(4,"liumei",344), 
array(5,"qiuye",343), 
array(6,"zhangli",231), 
array(7,"chenggong",1234), 
array(9,"linmei",123), 
array(10,"gaoxin",234), 
array(11,"ximi",1234), 
array(12,"suoming",1234) 
); 
echo json_encode($data); 
?>

2 在下载的extjs中搜索到PagingMemoryProxy.js,与get.php放在一个文件夹中
3 建立文件grid.html
grid.html=>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
<script type="text/javascript" src="PagingMemoryProxy.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function() { 
store=new Ext.data.Store({ 
reader:new Ext.data.ArrayReader({},[ //读数组到一个元数据对象 
{name:'id'}, 
{name:'name'}, 
{name:'password'} 
]) 
}); 
Ext.Ajax.request({ //读取后台传递于前台数据 
url: 'get.php', 
method:'get', 
success:function(response, opts){ 
var obj= Ext.decode(response.responseText);//obj储存响应的数据 
store.proxy = new Ext.data.PagingMemoryProxy(obj),//PagingMemoryProxy() 一次性读取数据 
store.load({params:{start:0,limit:5}});//按5条记录分布 
}, 
failure: function(){Ext.Msg.alert("failure");} 
}); 
var grid=new Ext.grid.GridPanel({ 
store:store,//装载store 
mode:'remote', 
width:450, 
height:200, 
applyTo:'grid', 
frame:true, 
columns:[ 
{header:"number",width:50,dataIndex:'id',sortable:true}, 
{header:"name",width:80,dataIndex:'name',sortable:true}, 
{header:"password",width:80,dataIndex:'password',sortable:true} 
], 
tbar:new Ext.PagingToolbar({//工具栏 
pageSize:5, 
store:store, 
displayInfo:true, 
displayMsg:'From {0} To {1} records,all records are {2} ', 
emptyMsg:"no records" 
}), 
viewConfig:{ 
forceFit:true 
} 
}) 
}); 
</script> 
</head> 
<body> 
<div id="grid"></div> 
</body> 
</html>

4 建立文件r01.js
r01.js=>
Ext.onReady(function() { 
Ext.QuickTips.init(); 
var root=new Ext.tree.TreeNode({ 
text:'简单树形', 
expanded:true 
}) 
var user=(new Ext.tree.TreeNode({ 
text:'用户', 
expanded:true 
}) 
) 
var user1=new Ext.tree.TreeNode({ 
text:'用户1' 
}) 
var user2=new Ext.tree.TreeNode({ 
text:'用户2', 
}) 
root.appendChild(user); 
user.appendChild(user1); 
user.appendChild(user2); 
//建立根节点 
var tree=new Ext.tree.TreePanel({ 
width:180, 
height:300, 
root:root 
}) 
//中间区域 
var tabPanel = new Ext.TabPanel({ 
region : 'center', 
enableTabScroll : true, 
activeTab :0, 
margins:'5 5 5 5', 
items : [{ 
id : 'homePage', 
title : '首页', 
autoScroll : true, 
html:'<div style="position:absolute;top:40%;left:40%>欢迎来到首页!</div>' 
}] 
}); 
function treeClick(){ 
tabPanel.add({ 
title:'用户', 
id:'1', 
activeTab:1, 
closable:true, 
autoLoad:{ 
url:'grid.html', 
scripts:true 
} 
}) 
} 
user1.on("click",treeClick); 
//界面显示 
new Ext.Viewport({ 
title:'Ext.Viewport示例', 
layout:'border', 
items:[ 
{ 
region:'west', 
layout:'fit', 
width:200, 
collapsible:true, 
margins:'5 0 5 5', 
items:tree 
},{ 
region:'center', 
width:200, 
layout:'fit', 
margins:'5 0 5 5', 
items:tabPanel 
}] 
}) 
});

5 建立r01.php
r01.php=>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
<title>Insert title here</title> 
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext/resources/css/ext-all.css" /> 
<script type="text/javascript" src="http://www.cnblogs.com/ext/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="http://www.cnblogs.com/ext/ext-all.js"></script> 
<script type="text/javascript" src="r01.js"></script> 
</head> 
<body> 
</body> 
</html>

6 浏览器中输入http://localhost/register_01/r01/r01.php

Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码 

Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
7 总结
树形监听事件:tree.on
Ext.data.ArrayReader读取数组到一个元数据对象

function(response, opts){ 
var obj= Ext.decode(response.responseText);//obj储存响应的数据 
store.proxy = new Ext.data.PagingMemoryProxy(obj),//PagingMemoryProxy()一次性读取数据 
store.load({params:{start:0,limit:5}});//按5条记录分布 
}//分页基本应用

Ext.PagingToolbar基本应用
extjs相关帮助文档:http://www.extjs.com/deploy/dev/docs/
PHP 相关文章推荐
ftp类(myftp.php)
Oct 09 PHP
加强版phplib的DB类
Mar 31 PHP
PHP similar_text 字符串的相似性比较函数
May 26 PHP
在wamp集成环境下升级php版本(实现方法)
Jul 01 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
Nov 24 PHP
php在apache环境下实现gzip配置方法
Apr 02 PHP
php curl 上传文件代码实例
Apr 27 PHP
CodeIgniter中使用Smarty3基本配置
Jun 29 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
Dec 11 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
Jun 27 PHP
thinkPHP框架动态配置用法实例分析
Jun 14 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
Feb 10 PHP
用PHP实现读取和编写XML DOM代码
Apr 07 #PHP
php session和cookie使用说明
Apr 07 #PHP
DedeCMS dede_channeltype表字段注释
Apr 07 #PHP
php抓取https的内容的代码
Apr 06 #PHP
php中几种常见安全设置详解
Apr 06 #PHP
PHP 检查扩展库或函数是否可用的代码
Apr 06 #PHP
php下关于中英数字混排的字符串分割问题
Apr 06 #PHP
You might like
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
js禁止表单重复提交
2017/08/29 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python内存动态分配过程详解
2019/07/15 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Python json格式化打印实现过程解析
2020/07/21 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
企业承诺书格式
2014/05/21 职场文书
阅兵口号
2014/06/19 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
颐和园导游词400字
2015/01/30 职场文书
员工升职自荐信
2015/03/27 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
python基础之//、/与%的区别详解
2022/06/10 Python