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 字符串函数收集
Mar 29 PHP
php 数据库字段复用的基本原理与示例
Jul 22 PHP
谨慎使用PHP的引用原因分析
Sep 06 PHP
php笔记之:有规律大文件的读取与写入的分析
Apr 26 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
Jun 21 PHP
php生成静态页面的简单示例
Apr 17 PHP
zend framework框架中url大小写问题解决方法
Aug 19 PHP
PHP编写登录验证码功能 附调用方法
May 19 PHP
PHP实现创建微信自定义菜单的方法示例
Jul 14 PHP
PHP远程连接oracle数据库操作实现方法图文详解
Apr 11 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
Sep 12 PHP
Laravel基础-关于引入公共文件的两种方式
Oct 18 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 file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
matplotlib设置legend图例代码示例
2017/12/19 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python的re模块使用方法详解
2019/07/26 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
十八届三中全会报告学习材料
2014/02/17 职场文书
大学生实习证明范本
2014/09/19 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS