Ext.data.PagingMemoryProxy分頁一次性讀取數據的實現代碼
更新時間：2010年04月07日 15:02:12 作者：
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),
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);
//建立根節(jié)點
var tree=new Ext.tree.TreePanel({
width:180,
height:300,
root:root
})
//中間區(qū)域
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" />
<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
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/
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);
//建立根節(jié)點
var tree=new Ext.tree.TreePanel({
width:180,
height:300,
root:root
})
//中間區(qū)域
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" />
<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 總結
樹形監(jiān)聽事件: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/
相關文章
偽靜態(tài)是SEO重要的方法，通過重定向來實現，并且可以通過重定向來隱藏網站的技術，過濾異常訪問。本課分為兩部分，前半部分詳細介紹Apache重定向的基礎知識，后半部分通過多個實際案例再次加深對重定向的理解，并且會演示各種重定向設置后的實際效果。2017-02-02
PHP生成月歷代碼...2007-06-06
本篇文章是對php中反射的應用進行了詳細的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要為大家詳細介紹了PHP與Go語言中基礎數據類型的對比,以及使用時常見的坑,文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下2023-09-09
這篇文章主要介紹了詳解WordPress中給鏈接添加查詢字符串的方法,依靠add_query_arg()函數來實現,需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄斦凱HP中的密碼安全性Password Hashing。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
相對路徑轉化成絕對路徑...2007-04-04
這篇文章主要介紹了PHP中類的成員變量在4種方式下的獲取速度對比,并詳細分析了其中的原因,需要的朋友可以參考下2014-02-02
本文主要介紹了php數組指針操作。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了PHP中防止SQL注入方法詳解,需要的朋友可以參考下2014-12-12