1. Zeigen Sie die Tabelle
http://img.blog.csdn.net/20140622133941015?watermark/2/text/AHR0CDOVL2JSB2CUY3NKBI5UZXQVY WRHBV93ENM =/FONT/5A6L5L2T/FONTSIZE/400/FILL/I0JBQKFCMA ==/DISTSOLVE/70/GRAVITY/SOUTHEAST <%@ Page Language = "java" import = "java.util. href = "./ extjs4.1/ressourcen/css/ext-all.css"> <script type = "text/javaScript" src = "./ extjs4.1/ext-all-debug.js"> </script> <script type = "text/javaScript" Src = ". type="text/javascript"> Ext.onReady(function() { // Define the table var grid = new Ext.grid.Panel({ columns : [ { text : 'Line Number' }, { text : 'Student Number' }, { text : 'Name' }, { text : 'Class' }, { text : 'Chinese' }, { text : 'Mathematics' }, { text : 'English'}]}); // windows window.show () anzeigen; }); </script> </head> <body> TABLE Show <br> </body> </html>2. Zeigen Sie lokale Daten an
<%@ page Language = "java" import = "java.util. type = "text/css" href = "./ extjs4.1/ressourcen/css/ext-all.css"> <script type = "text/javaScript" src = "./ extjs4.1/ext-all-debug.js"> </script> <script type = "text/javascript" " src="./extjs4.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { // Custom data model var myModel = Ext.define("studentInfo", { extend : 'Ext.data.Model', fields : [ { name : 'stuNo', type : 'string' }, { name : 'stuName', type : 'string' }, { name : 'stuClass', type : 'string' }, { name : 'chScore', type : 'number' }, { name : 'maScore', type : 'number' }, { name : 'enScore', type : 'number' }, { name : 'enScore', type : 'number' } ] }); 4 ', 99, 27, 19], [' No5 ',' Wangzs5 ',' Klasse 5 ', 23, 97, 99], [' No6 ',' Wangzs6 ',' Klasse 6 ', 34, 67, 99]; var mystore = ext.create ("ext.data.store", {model: 'studentInfo', Daten: mydata}); // Table var myGrid = new Ext.grid.Panel({ columns : [ { xtype : 'rownumberer', text : 'line number' }, { text : 'stunumber', dataIndex : 'stuNo' }, { text : 'name', dataIndex : 'stuName' }, { text : 'class', dataIndex : 'stuClass' }, { text : 'Chinese', dataindex: 'chScore'}, {text: 'mathematics', dataindex: 'mascore'}, {text: 'englisch', dataindex: 'Enscore'}], Store: mystore}); // Fenster var window = ext.create ("ext.window.window", {Titel: 'Student Grade Table', Breite: 600, Höhe: 400, Elemente: MyGrid, Layout: 'Fit'}); window.show (); }); </script> </head> <body> lokale Daten zeigen <br> </body> </html>3.. Zeigen Sie Cross-Domain-JSONP-Daten anzeigen
<%@ page Language = "java" import = "java.util. type = "text/css" href = "./ extjs4.1/ressourcen/css/ext-all.css"> <script type = "text/javaScript" src = "./ extjs4.1/ext-all-debug.js"> </script> <script type = "text/javascript" " src="./extjs4.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { // Custom data model var jsonpModel = Ext.define("jsonpModel", { extend : 'Ext.data.Model', fields : [ { name : 'userid', type : 'String'}, {Name: 'Benutzername', Typ: 'String'}, {Name: 'Dateline', Typ: 'String'}, {name: 'title', type: 'string'}}); Proxy: {type: 'jsonp', url: 'http://www.sencha.com/forum/topics-browse-remote.php', reader: {TotalProperty: 'TotalCount', root: 'topics'}}, autoload: true // automatisch Ladedaten}); // Table var myGrid = new Ext.grid.Panel({ columns : [ { xtype : 'rownumberer', text : 'line number' }, { text : 'userid', dataIndex : 'userid' }, { text : 'username', dataIndex : 'username' }, { text : 'timeline', dataIndex : 'dateline' }, { text : 'title', dataindex: 'title'}], store: mystore, bbar: {// paging am Ende der Tabelle XTYPE: 'PagingToolbar', Store: myStore, displayInfo: true}}); // Fenster var window = ext.create ("ext.window.window", {Titel: 'Student Grade Table', Breite: 600, Höhe: 400, Elemente: MyGrid, Layout: 'Fit'}); window.show (); }); </script> </head> <body> Zeigen Sie Cross-Domain-JSONP-Daten <br> </body> </html> an