1 Establishment of get.php
Get.php=>
Copy Code code 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 (Ten, "Gaoxin", 234),
Array (one, "Ximi", 1234),
Array ("suoming", 1234)
);
echo Json_encode ($data);
?>
2 Search for pagingmemoryproxy.js in downloaded ExtJS, and get.php in a folder
3 Establish file grid.html
Grid.html=>
Copy Code code as follows:
<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 ({},[//reading group to a metadata object
{name: ' ID '},
{name: ' Name '},
{name: ' Password '}
])
});
Ext.Ajax.request ({//Read background passes to foreground data
URL: ' get.php ',
Method: ' Get ',
Success:function (response, opts) {
var obj= ext.decode (response.responsetext);//obj Store response data
Store.proxy = new Ext.data.PagingMemoryProxy (obj),//pagingmemoryproxy () read data once
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,//Loading 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>
<body>
<div id= "Grid" ></div>
</body>
4 Establish file R01.js
R01.js=>
Copy Code code 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: ' Users ',
Expanded:true
})
)
var user1=new Ext.tree.TreeNode ({
Text: ' User 1 '
})
var user2=new Ext.tree.TreeNode ({
Text: ' User 2 ',
})
Root.appendchild (user);
User.appendchild (user1);
User.appendchild (User2);
Establish 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 ',
Autoscroll:true,
HTML: ' <div style= ' position:absolute;top:40%;left:40%> Welcome to Home!</div> '
}]
});
function Treeclick () {
Tabpanel.add ({
Title: ' Users ',
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 Establishment of R01.php
R01.php=>
Copy Code code as follows:
<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>
<body>
</body>
6 Enter http://localhost/register_01/r01/r01.php in browser
7 Summary
Tree Listener event: Tree.on
Ext.data.ArrayReader reads an array to a metadata object
Copy Code code as follows:
function (response, opts) {
var obj= ext.decode (response.responsetext);//obj Store response data
Store.proxy = new Ext.data.PagingMemoryProxy (obj),//pagingmemoryproxy () read data once
Store.load ({Params:{start:0,limit:5}});//distribution by 5 records
Basic application of}//paging
Basic application of Ext.pagingtoolbar
ExtJS related Help documentation: http://www.extjs.com/deploy/dev/docs/
