Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
<?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>
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
}]
})
});
<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
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/
相关推荐
-
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
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),
-
Android之ListView分页加载数据功能实现代码
什么是ListView分页加载数据功能呢?在现在的大数据时代,我们不可能把某些数据全部展示到界面,好比我们经常会看的QQ空间一样,当你看动态的时候,系统不可能会把所有好友的动态都展示在上面,你能看到的一般都是最新好友更新的动态,假如你要看非最新的好友动态,通常你都会手指向上滑动屏幕然后去查看,当界面下滑到一定数量的时候,就会看到一个"查看更多",然后突然停顿一下,系统会通过网络去给你刷新其他动态信息,这样的功能我们一般叫做数据下拉刷新功能,也就是我们的分页加载功能,具体的实现是怎样的呢
-
Ajax初试之读取数据篇实现代码
是的,今天我们要实现的效果是．在不刷新网页的情况下读取并显示服务端的数据． 拿出来我们上次准备好的东西． 1:XMLHTTPRequest对象的函数． 2:Asp输出xml格式的文件．你可以点击查看该文件内容 复制代码 代码如下: <% '出自:http://Www.Web666.Net '作者:康董 '如需转载请务必保留以上信息 '定义一个变量,来保存xml数据 dim xml xml = "<?xml version='1.0' encoding='gb2312'?><
-
C#简单嵌套flash读取数据的实现代码
效果: 说明:此效果只是简单的嵌套flash读取数据库中某两个字段的数据.([js下载地址:http://xiazai.jb51.net/201311/yuanma/FusionCharts(jb51.net).js] [swf下载地址:http://pan.baidu.com/s/1b2O9Q] ) 事件:初始化加载. 代码部分: HTML: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head
-
微信小程序云开发实现分页刷新获取数据
本文实例为大家分享了微信小程序云开发分页刷新获取数据的具体代码,供大家参考,具体内容如下 利用云函数调用数据库,在云函数中分页调取数据.再在js中不断将新的数据拼接到旧数据中,在前端显示.初始只显示5条记录,下拉刷新即可获取更多. 首先在JS中,调用云函数,获取到后端的数据: /** * 从数据库获取数据 */ getData(num=5,page=0){ wx.cloud.callFunction({ name:"dairyGetlist", //云函数
-
Android实现ListView分页加载数据
本文实例为大家分享了ListView分页加载数据的具体代码,供大家参考,具体内容如下 FenyeActivity package com.example.myapplication.fenye; import androidx.appcompat.app.AppCompatActivity; import android.app.ListActivity; import android.os.Bundle; import android.os.Handler; import android.ut
-
Ajax读取数据之分页显示篇实现代码
我觉得还是有必要把我的ajax分页呈现给大家．我先讲一下这个ajax分页的实现核心,然后我们再看实例效果．所谓的ajax分页与传统的数据分页,在服务端的代码基本上是一样的．我们主要做的是使用ajax在不刷新的情况下,将请求的页码,和每页要显示的条数发送给服务端的处理网页．大家点击这个网址就可以看到要请求的数据:"ajax_page.asp?action=read&pagecount=3 & current_page=1" 在这段URL里,pagecount代表每页要显示
-
基于PHP和Mysql相结合使用jqGrid读取数据并显示
jqGrid可以动态读取和加载外部数据,本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示,以及可以通过输入关键字查询数据的ajax交互过程. 下面给大家展示效果图,喜欢的朋友可以阅读全文哦. jqGrid本身带有search和edit表格模块,但是这些模块会使得整个插件体积显得有点庞大,而且笔者认为jqGrid的搜索查询和编辑/添加功能不好用,所以笔者放弃jqGrid自有的search和edit表格模块,借助jquery利器来完成相关功能,符合项目的实际应用. XHTML
-
Tensorflow中使用tfrecord方式读取数据的方法
前言 本博客默认读者对神经网络与Tensorflow有一定了解,对其中的一些术语不再做具体解释.并且本博客主要以图片数据为例进行介绍,如有错误,敬请斧正. 使用Tensorflow训练神经网络时,我们可以用多种方式来读取自己的数据.如果数据集比较小,而且内存足够大,可以选择直接将所有数据读进内存,然后每次取一个batch的数据出来.如果数据较多,可以每次直接从硬盘中进行读取,不过这种方式的读取效率就比较低了.此篇博客就主要讲一下Tensorflow官方推荐的一种较为高效的数据读取方式--tfre
-
java从文件中读取数据的六种方法
目录 1.Scanner 2.Files.lines (Java 8) 3.Files.readAllLines(java8) 4.Files.readString(JDK 11) 5.Files.readAllBytes() 6.经典管道流的方式 本文主要介绍了java从文件中读取数据的六种方法,分享给大家,具体如下: Scanner(Java 1.5) 按行读数据及String.Int类型等按分隔符读数据. Files.lines, 返回Stream(Java 8) 流式数据处理,按行读取