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 相关文章推荐
Wordpress php 分页代码
Oct 21 PHP
让PHP支持断点续传的源码
May 16 PHP
PHP 中检查或过滤IP地址的实现代码
Nov 27 PHP
逆序二维数组插入一元素的php代码
Jun 08 PHP
php中的注释、变量、数组、常量、函数应用介绍
Nov 16 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
May 09 PHP
ThinkPHP缓存方法S()概述
Jun 13 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
Jul 22 PHP
php调用shell的方法
Nov 05 PHP
解决nginx不支持thinkphp中pathinfo的问题
Jul 21 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
Nov 30 PHP
PHP关键特性之命名空间实例详解
May 06 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
ip签名探针
2006/10/09 PHP
深入了解php4(1)--回到未来
2006/10/09 PHP
PHP中基本符号及使用方法
2010/03/23 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
利用python将json数据转换为csv格式的方法
2018/03/22 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
顶岗实习计划书
2014/01/10 职场文书
法制报告会主持词
2014/04/02 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
先进党支部申报材料
2014/12/24 职场文书
行为规范主题班会
2015/08/13 职场文书
合作意向书范本
2019/04/17 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
Python数据分析之pandas读取数据
2021/06/02 Python