1. Show the table
http://img.blog.csdn.net/20140622133941015?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast<%@ 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/resources/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() { // 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' } ] }); // Define the window var window = Ext.create("Ext.window.Window", { title : 'Student Score Table', width : 600, height : 400, items : grid, layout : 'fit'//File window}); // Show window window.show(); }); </script> </head> <body> Show table<br> </body> </html>2. Display local data
<%@ 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/resources/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' } ] }); // 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', 'grade 5', 23, 97, 99 ], [ 'No6', 'wangzs6', 'grade 6', 34, 67, 99 ], ]; var myStore = Ext.create("Ext.data.Store", { model : 'studentInfo', data : 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 : 'English', dataIndex : 'enScore' } ], store : myStore }); // window var window = Ext.create("Ext.window.Window", { title : 'Student Grade Table', width : 600, height : 400, items : myGrid, layout : 'fit' }); window.show(); }); </script> </head> <body> Show local data<br> </body> </html>3. Display cross-domain jsonp data
<%@ 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/resources/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 : 'username', type : 'string' }, { name : 'dateline', type : 'string' }, { name : 'title', type : 'string' } ] }); // Data var myStore = Ext.create("Ext.data.Store", { model : 'jsonpModel', pageSize : 10,//Configure the number of records displayed per page proxy : { type : 'jsonp', url : 'http://www.sencha.com/forum/topics-browse-remote.php', reader : { totalProperty : 'totalCount', root : 'topics' } }, autoLoad : true // Automatically load data}); // 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 : {// Configure paging at the bottom of the table xtype : 'pagingtoolbar', store : myStore, displayInfo : true } }); // Window var window = Ext.create("Ext.window.Window", { title : 'Student Grade Table', width : 600, height : 400, items : myGrid, layout : 'fit' }); window.show(); }); </script> </head> <body> Display cross-domain jsonp data<br> </body> </html>