1. أظهر الجدول
http://img.blog.csdn.net/20140622133941015؟watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvy wrhbv93enm =/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma ==/desolve/70/gravity/southeast <٪@@ لغة الصفحة = "java" import = "java.Util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <title> my jsp 'index.jsp' etterning </selege> HREF = "./ extjs4.1/resources/css/ext-all.css"> <script type = "text/javaScript" src = "./ extjs4.1/ext-all-debug.js src = "./ extjs4.1/locale/ext-lang-zh_cn.js"> </script> <script type = "text/javaScript"> ext.onready (function () {// define tame var grid = new ext.panel {text: 'class'} ، {text: 'incale'} ، {text: 'mathematics'} ، {text: 'english'}]}) ؛ // show window window.show () ؛ }) ؛ </script> </head> <body> إظهار الجدول <br> </body> </html>2. عرض البيانات المحلية
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> my jsp 'index. type = "text/css" href = "./ extjs4.1/resources/css/ext-all.css"> <script type = "text/javascript" src = "./ extjs4.1/ext-all-debug.js 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" ، {ext.data.mod "السلسلة"} ، {name: "und" ، اكتب: "السلسلة"} ، {name: "Stuclass" ، اكتب: "السلسلة"} ، {name: "chscore" ، اكتب: "الرقم"} ، // البيانات المحلية var mydata = [['no1' ، 'Wangzs1' ، 'Grade 1' ، 80 ، 67 ، 49] ، ['no2' ، 'Wangzs2' ، 'Grade 2' ، 65 ، 57 ، 79] ، ['no3' ، 'Wangzs3' ، 'Grade 3 ، 77 ، 59] 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 ({الأعمدة: [{xtype: 'rownumberer' ، النص: 'رقم السطر'} ، {text: 'undumber' ، dataindex: 'stuno'} ، {text: 'name' ، dataindex: 'stuname'} ، {text: 'class:' dataindex ، dataindex: 'chscore'} ، {text: 'mathematics' ، dataindex: 'mascore'} ، {text: 'English' ، dataindex: 'Enscore'}] ، store: mystore}) ؛ // window var window = ext.create ("ext.window.window" ، {title: 'title grade table' ، width: 600 ، leight: 400 ، ited: mygrid ، layout: 'fit'}) ؛ window.show () ؛ }) ؛ </script> </head> <body> إظهار البيانات المحلية <br> </body> </html>3. عرض بيانات JSONP عبر المجال
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> my jsp 'index. type = "text/css" href = "./ extjs4.1/resources/css/ext-all.css"> <script type = "text/javascript" src = "./ extjs4.1/ext-all-debug.js 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" ، اكتب: 'string'} ، {name: 'username' ، اكتب: 'string'} ، {name: 'dateline' ، اكتب: 'string'} ، {name: 'title' ، type: 'string'}]}) ؛ Proxy: {type: 'jsonp' ، url: 'http://www.sencha.com/forum/topics-browse-remote.php' ، reader: {totalProperty: 'TotalCount' ، root: 'touths'}} ، autoload: true // data tamble data}) ؛ // table var myGrid = new ext.grid.panel ({الأعمدة: [{xtype: 'rownumberer' ، النص: 'رقم السطر'} ، {text: 'userid' ، dataindex: 'userid'} ، {text: 'username' ، dataindex: 'username'} ، 'title' ، dataindex: 'title'}] ، المتجر: Mystore ، bbar: {// تكوين الترحيل في أسفل الجدول xtype: 'pagingtoolbar' ، المتجر: Mystore ، DisplayInfo: true}}) ؛ // window var window = ext.create ("ext.window.window" ، {title: 'title grade table' ، width: 600 ، leight: 400 ، ited: mygrid ، layout: 'fit'}) ؛ window.show () ؛ }) ؛ </script> </head> <body> عرض بيانات JSONP عبر المجال <br> </body> </html>