Ext.data.PagingMemoryProxy implementation code for paging and reading data at one time

Home

Backend Development

PHP Tutorial

Ext.data.PagingMemoryProxy implementation code for paging and reading data at one time_PHP tutorial

Jul 21, 2016 pm 03:39 PM

Disposable code Pagination accomplish Establish data of read

1 Create get.php
get.php=>

Copy code The code is as follows:

 
<?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 Download Search PagingMemoryProxy.js in extjs and put it in a folder with get.php
3 Create the file grid.html
grid.html=>

Copy Code The code is as follows:

 
<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({},[ //read array to 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 response data
store.proxy = new Ext.data.PagingMemoryProxy(obj),//PagingMemoryProxy() reads the data in one go
store.load({ params:{start:0,limit:5}});//Distributed by 5 records
}, 
failure: function(){Ext.Msg.alert("failure");} 
 }); 
var grid=new Ext.grid.GridPanel({ 
store:store,//Load 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({//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> 

4 Create file r01.js
r01.js=>

Copy code The code is as follows:

 
Ext.onReady(function() { 
Ext.QuickTips.init(); 
var root=new Ext.tree.TreeNode({ 
text:'Simple tree', 
expanded:true 
}) 
var user=(new Ext.tree.TreeNode({ 
text:'User', 
expanded :true 
}) 
) 
var user1=new Ext.tree.TreeNode({ 
text:'User1' 
}) 
var user2=new Ext.tree. TreeNode({ 
text:'User2', 
}) 
root.appendChild(user); 
user.appendChild(user1); 
user.appendChild(user2); 
//Create the root node
var tree=new Ext.tree.TreePanel({ 
width:180, 
height:300, 
root:root 
}) 
// Middle region
var tabPanel = new Ext.TabPanel({ 
region : 'center', 
enableTabScroll : true, 
activeTab :0, 
margins:'5 5 5 5', 
items : [{ 
id : 'homePage', 
title : 'Home', 
autoScroll : true, 
html:'<div style="position:absolute;top:40 %;left:40%>Welcome to the homepage!</div>' 
}] 
}); 
function treeClick(){ 
tabPanel.add({ 
title :'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 example', 
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 Create r01.php
r01.php=>

Copy code The code is as follows:

 
<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 Enter http://localhost/register_01/r01/r01.php in the browser

7 Summary
Tree listening event: tree.on
Ext.data.ArrayReader reads the array into a metadata object

Copy code The code is as follows:

 
function(response, opts){ 
var obj= Ext.decode(response.responseText);// obj stores the response data
store.proxy = new Ext.data.PagingMemoryProxy(obj),//PagingMemoryProxy() reads the data at one time
store.load({params:{start:0,limit:5 }});//Distributed by 5 records
}//Basic paging application

Ext.PagingToolbar basic application
extjs related help documents: http://www.extjs. com/deploy/dev/docs/

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn