1 get.phpを作成します get.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=> コードは次のとおりです: ; スクリプト> <br>< スクリプトタイプ="text/javascript"> <br>Ext.onReady(function() { <br>reader:new Ext.data.ArrayReader({},[ / /配列をメタデータ オブジェクトに読み込みます <br>{name:'id'}, <br>{name:'name'}, <br>{name:'password'} <br>]) <br>}); /バックグラウンド転送のフォアグラウンド データの読み取り<br>url: 'get.php', <br>method:'get', <br>success:function(response, opts){ <br>var obj= Ext.decode(response.responseText);//obj は応答データ<br> store.proxy = new Ext.data.PagingMemoryProxy(obj),//PagingMemoryProxy() はデータを一度に読み取ります<br>store.load({params:{start:0,limit:5}});//press 5 レコードの配布 <br>}, <br>failure: function(){Ext.Msg.alert("failure");} <br>}); <br>var Grid=new Ext.grid.GridPanel({ <br>store:store,//ストアをロード) <br>モード:'リモート'、<br>幅:450、<br>高さ:200、<br>applyTo:'グリッド'、<br>フレーム:true、<br>列:[ <br>{ヘッダー:"数値"、幅:50、データインデックス:'id' ,sortable :true}, <br>{header:"name",width:80,dataIndex:'name',sortable:true}, <br>{header:"password",width:80,dataIndex:'password',sortable:true } <br> ], <br>tbar:new Ext.PagingToolbar({//ツールバー <br>pageSize:5, <br>store:store, <br>displayInfo:true, <br>displayMsg:'{0} から {1} レコードまで、すべてのレコードは {2次のように: <br><br> <br>Ext.onReady(function() { <br>Ext.QuickTips.init(); <br>var root=new Ext.tree.TreeNode({ <br>text:'Simpleツリー', <br>expanded:true <br>}) <br>var user=(new Ext.tree.TreeNode({ <br>text:'user', <br>expanded:true <br>}) <br>) <br>var user1=new Ext.tree.TreeNode( { <br>text:'User1' <br>} ) <br>var user2=new Ext.tree.TreeNode({ <br>text:'User2', <br>}) <br>root.appendChild(user); </div>user.appendChild(user1); .appendChild(user2); <br>/ /ルートノードの作成 <br>vartree=new Ext.tree.TreePanel({ <br>width:180, <div class="codetitle">height:300, <span style="CURSOR: pointer" onclick="doCopy('code11652')">root:root <u>}) </u>//中間エリア </span>var tabPanel = new Ext.TabPanel({ </div>region : 'center', <div class="codebody" id="code11652">enableTabScroll : true, <br>activeTab :0, <br>margins:'5 5 5 5', <br>items : [{ <br>id : 'homePage', <br>title : 'ホーム', <br>autoScroll : true, <br> html:'<div style="position:absolute;top:40%;left:40%>ホームページへようこそ!</div>' <br>}] <br>}); <br>function TreeClick(){ <br>tabPanel .add({ <br>title:'user', <br>id:'1', <br>activeTab:1, <br>closable:true, <br>autoLoad:{ <br>url:'grid.html', <br> scripts:true <br>} <br>}) <br>} <br>user1.on("click",treeClick); <br>//インターフェイス表示 <br>new Ext.Viewport({ <br>title:'Ext.Viewport の例', <br>layout:'border' , <br>items:[ <br>{ <br>地域:'west', <br>layout:'fit', <br>width:200, <br>collapsible:true, <br>margins:'5 0 5 5', <br>items:tree <br>},{ <br> region:'center', <br>width :200, <br>layout:'fit', <br>margins:'5 0 5 5', <br>items:tabPanel <br>}] <br>}) <br><br> <br>5 r01.php を作成します。 <br>r01.php=> <br> <br><br><br>コードをコピーします<br><br> コードは次のとおりです:<br><div class="codebody" id="code51173"><html> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gbk"> <br><title> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext/resources/css/ext-all.css" /> text/javascript" src="http://www.cnblogs.com/ext/adapter/ext/ext-base.js">