1. Mostre a tabela
http://img.blog.csdn.net/20140622133941015?watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvy Wrhbv93enm =/font/5a6l5l2t/fontsize/400/preenchimento/i0jbqkfcma ==/dissolve/70/gravidade/sudeste <%@ página linguagem = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transição // pt"> <html> <lit> <title> meu jsp 'index.jsp' Página " href = "./ Extjs4.1/Resources/css/ext-all.css"> <script type = "text/javascript" src = "./ extjs4.1/extl-de-debug.js"> </script> <script type = "text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script> <script 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: 'chinês'}, {text: 'matemática'}, {text: 'inglês'}]}); // Mostrar janela da janela.Show (); }); </script> </ad Head> <body> Mostrar tabela <br> </body> </html>2. Exibir dados locais
<%@ Page Language = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! type = "text/css" href = "./ extjs4.1/resources/css/ext-all.css"> <script type = "text/javascript" src = "./ extjs4.1/extl-all-debug.js"> </script> <script type = "text/javroscript" src = "./ extjs4.1/loce/ext-lang-zh_cn.js"> </script> <script type = "text/javascript"> ext.onready (function () {// modelo de dados personalizado var mymodel = ext.define ("studentinfo,, {exsend:'data.data.model = ext.define (" studentinfo, ", {exsend:'data.data.model = ext.define (" studentInfo, ", {exsen. 'String'}, {name: 'atuname', tipo: 'string'}, {name: 'sTuclass', type: 'string'}, {name: 'chscore', tipo: 'número'}, {name: 'mascore', tipo: 'número' {name: 'enscore', 'tipo:'}, '}, número',}, número: 'número' {name ':' enscore ',' '}},'},}, número: 'número' {name ':' enscore ',' ''}}, '},'},}, 'número', '{name': 'enscore', '' '},'}, número ',' número '{name': 'enscore', '' '},'}, '},},' número ',' {name ':' enscore ',' ''}, '}, número', 'número'; // 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', 'grau 5', 23, 97, 99], ['no6', 'wangzs6', 'grau 6', 34, 67, 99],]; var mystore = ext.create ("ext.data.store", {modelo: 'studentinfo', dados: 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 : 'Chinês', DataIndex: 'chscore'}, {text: 'Mathematics', DataIndEx: 'mascore'}, {text: 'English', DataIndEx: 'Enscore'}], armazenamento: mystore}); // janela var janela = ext.create ("ext.window.window", {título: 'tabela de grau de aluno', largura: 600, altura: 400, itens: myGrid, layout: 'fit'}); window.show (); }); </script> </ad Head> <body> Mostrar dados locais <br> </body> </html>3. Exibir dados JSONP de domínio cruzado
<%@ Page Language = "java" import = "java.util.*" PageEncoding = "utf-8"%> <! type = "text/css" href = "./ extjs4.1/resources/css/ext-all.css"> <script type = "text/javascript" src = "./ extjs4.1/extl-all-debug.js"> </script> <script type = "text/javroscript" src = "./ extjs4.1/loce/ext-lang-zh_cn.js"> </script> <script type = "text/javascript"> ext.onready (function () {// modelo de dados personalizado var jsonpmodel = ext.define ("jsonpmodel", {exTEND:'g. TIPO: 'String'}, {Nome: 'Nome de usuário', Tipo: 'String'}, {Nome: 'Dateline', Tipo: 'String'}, {Nome: 'Title', Type: 'String'}]}); Página proxy: {type: 'jsonp', url: 'http://www.sencha.com/forum/topics-browse-remote.php', leitor: {totalProperty: 'totalCount', root: 'tópicos'}}, autoload: verdadeiro // automaticamente carregar dados}); // tabela var myGrid = new Ext.Grid.Panel ({colunas: [{xtype: 'ROWNUMERER', texto: 'Número da linha'}, {text: 'userID', DataInDex: 'UserID'}, {text: 'UserName', DataINDex: 'UserName'}, {{{ 'Title', DataIndEx: 'Title'}], armazenamento: mystore, bbar: {// Configure a paginação na parte inferior da tabela xtype: 'pagingToolbar', armazenamento: mystore, displayInfo: true}}); // janela var janela = ext.create ("ext.window.window", {título: 'tabela de grau de aluno', largura: 600, altura: 400, itens: myGrid, layout: 'fit'}); window.show (); }); </script> </ad Head> <body> Exibir dados JSONP cruzados <br> </body> </html>