1. Muestra la mesa
http://img.blog.csdn.net/20140622133941015?watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvy Wrhbv93enm =/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma ==/disolver/70/gravity/sudeste <%@ Page lenguaje = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! DocType html público "-// w3c // dtd html 4.01 transitional // en"> <html> <Head> <title> my jsp 'index.jsp' inicial de la página </bitle> <link rel = "styles types" href = "./ extjs4.1/recursos/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-zh_cn.js >js> <script> <script> <script <strike <script <strike <script <strike <strike <strike <strike <strike <strike <strike <strike <script <script. type = "text/javaScript"> ext.onready (function () {// Define la tabla var grid = new Ext.Grid.Panel ({columns: [{text: 'line número'}, {text: 'número de estudiante'}, {text: 'name'}, {text: 'class'}, {text: 'chino'}, {text: 'matemática'}, {text: {text: 'class'}, {text: 'chino'}, {text: 'Mathematics'}, {text: {text: 'class'}, {text: 'chino'}, {text: 'Mathematics'}, {text: {text: 'class'}, {text: 'chino'}, {text: 'matemática: 'English'}]}); // Defina la ventana var Window = ext.create ("ext.window.window", {Título: 'Tabla de puntuación de estudiante', ancho: 600, altura: 400, elementos: cuadrícula, diseño: 'fit' // ventana de archivo}); // Show Window Window.show (); }); </script> </head> <body> show table <br> </body> </html>2. Muestra datos locales
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <link rel="stylesheet" type = "text/css" href = "./ extjs4.1/recursos/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: 'numin Local data var myData = [ [ 'No1', 'wangzs1', 'grade 1', 80, 67, 49 ], [ 'No2', 'wangzs2', 'grade 2', 65, 57, 79 ], [ 'No3', 'wangzs3', 'grade 3', 45, 77, 59 ], [ 'No4', 'wangzs4', 'grade 4', 99, 27, 19], ['No5', 'Wangzs5', 'Grado 5', 23, 97, 99], ['No6', 'Wangzs6', 'Grado 6', 34, 67, 99],]; var mystore = ext.create ("ext.data.store", {modelo: 'studentInfo', data: myData}); // tabla var myGrid = new Ext.Grid.Panel ({columns: [{xtype: 'Rownumberer', text: 'Line Number'}, {Text: 'stunumber', dataindex: 'stuno'}, {text: 'name', dataindex: 'stuname'}, {text: 'class', dataindex: 'stuclass' 'Chino', dataindex: 'chscore'}, {text: 'matemáticas', dataindex: 'mascore'}, {text: 'inglés', dataindex: 'enscore'}], store: mystore}); // ventana var ventana = ext.create ("ext.window.window", {título: 'tabla de grado estudiantil', ancho: 600, altura: 400, elementos: mygrid, diseño: 'fit'}); Window.show (); }); </script> </head> <body> Mostrar datos locales <br> </body> </html>3. Muestra datos de JSONP de dominio cruzado
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <link rel="stylesheet" type = "text/css" href = "./ extjs4.1/recursos/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 () {// modelo de datos personalizado var jsonpmodel = ext.define ("jsonpModel", {ExtENT: 'ext.data.model', Fejs: Filds: [name: [Úrdico, [Úser: 'String'}, {name: 'username', type: 'string'}, {name: 'dateline', type: 'string'}, {name: 'title', type: 'string'}]}) proxy: {type: 'jsonp', url: 'http://www.sencha.com/forum/topics-browse-remote.php', lector: {TotalProperty: 'TotalCount', root: 'temas'}}, autoload: verdadero // carga de datos de carga automáticamente}); // 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: {// Configurar la paginación en la parte inferior de la tabla Xtype: 'PagingToolbar', Store: MyStore, DisplayInfo: True}}); // ventana var ventana = ext.create ("ext.window.window", {título: 'tabla de grado estudiantil', ancho: 600, altura: 400, elementos: mygrid, diseño: 'fit'}); Window.show (); }); </script> </head> <body> Mostrar datos JSONP de dominio cruzado <br> </body> </html>