Ext. Data. PagingMemoryProxy paging one time implementation code to read data

2020-03-31 20:32:00
OfStack

1 establish the 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. Search for pagingmemoryproxy.js in the downloaded extjs, and place it in a folder with get.php
Create file grid.html
The 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({},[ //Group the readings into a metadata object
{name:'id'}, 
{name:'name'}, 
{name:'password'} 
]) 
}); 
Ext.Ajax.request({ //Read the data passed from the background to the foreground
url: 'get.php', 
method:'get', 
success:function(response, opts){ 
var obj= Ext.decode(response.responseText);//Obj stores the data for the response
store.proxy = new Ext.data.PagingMemoryProxy(obj),//PagingMemoryProxy() reads the data in one go
store.load({params:{start:0,limit:5}});//Distribution by 5 records
}, 
failure: function(){Ext.Msg.alert("failure");} 
}); 
var grid=new Ext.grid.GridPanel({ 
store:store,//Load the 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({//The toolbar
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>

Create file r01.js
R01. Js = >

 
Ext.onReady(function() { 
Ext.QuickTips.init(); 
var root=new Ext.tree.TreeNode({ 
text:' Simple tree ', 
expanded:true 
}) 
var user=(new Ext.tree.TreeNode({ 
text:' The user ', 
expanded:true 
}) 
) 
var user1=new Ext.tree.TreeNode({ 
text:' The user 1' 
}) 
var user2=new Ext.tree.TreeNode({ 
text:' The user 2', 
}) 
root.appendChild(user); 
user.appendChild(user1); 
user.appendChild(user2); 
//Establish the root node
var tree=new Ext.tree.TreePanel({ 
width:180, 
height:300, 
root:root 
}) 
//Middle area
var tabPanel = new Ext.TabPanel({ 
region : 'center', 
enableTabScroll : true, 
activeTab :0, 
margins:'5 5 5 5', 
items : [{ 
id : 'homePage', 
title : ' Home page ', 
autoScroll : true, 
html:'<div style="position:absolute;top:40%;left:40%> Welcome to the home page !</div>' 
}] 
}); 
function treeClick(){ 
tabPanel.add({ 
title:' The user ', 
id:'1', 
activeTab:1, 
closable:true, 
autoLoad:{ 
url:'grid.html', 
scripts:true 
} 
}) 
} 
user1.on("click",treeClick); 
//Interface display
new Ext.Viewport({ 
title:'Ext.Viewport The sample ', 
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 establish 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>

Type http://localhost/register_01/r01/r01.php in the browser

< img Alt = "" border = 0 height = 541 SRC =" / / files.jb51.net/file_images/article/201004/2010040715055820.jpg "width = 665 >

< img Alt = "" border = 0 height = 493 SRC =" / / files.jb51.net/file_images/article/201004/2010040715055821.jpg "width = 667 >
7 summary
Tree listening event :tree.on
Ext.data.arrayreader reads the array into a metadata object

 
function(response, opts){ 
var obj= Ext.decode(response.responseText);//Obj stores the data for the response
store.proxy = new Ext.data.PagingMemoryProxy(obj),//PagingMemoryProxy() reads the data in one go
store.load({params:{start:0,limit:5}});//Distribution by 5 records
}//Paging basic application

Ext.PagingToolbar basic application
Extjs related documentation: http://www.extjs.com/deploy/dev/docs/