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 相关文章推荐
Php+SqlServer实现分页显示
Oct 09 PHP
DedeCMS dede_channeltype表字段注释
Apr 07 PHP
使用php实现快钱支付功能(涉及到接口)
Jul 01 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
Aug 19 PHP
深入理解PHP内核(一)
Nov 10 PHP
PHP记录页面停留时间的方法
Mar 30 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
Jun 13 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
Jul 28 PHP
php使用正则表达式去掉html中的注释方法
Nov 03 PHP
php提交表单时保留多个空格及换行的文本样式的方法
Jun 20 PHP
ThinkPHP3.2框架操作Redis的方法分析
May 05 PHP
thinkPHP+LayUI 流加载实现功能
Sep 27 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数据集构建JSON格式及新数组的方法
2012/11/07 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP查询分页的实现代码
2017/06/09 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python 提取文件的小程序
2009/07/29 Python
17个Python小技巧分享
2015/01/23 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python scatter函数用法实例详解
2020/02/11 Python
基于python图像处理API的使用示例
2020/04/03 Python
python+requests接口自动化框架的实现
2020/08/31 Python
装饰资料员岗位职责
2013/12/30 职场文书
培训研修方案
2014/06/06 职场文书
初二学生评语大全
2014/12/26 职场文书
抢劫罪辩护词
2015/05/21 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android