JavaScript ไม่จำเป็นต้องมีการรวบรวมเพื่อเรียกใช้ซึ่งทำให้แอปพลิเคชันที่สร้างโดย JavaScript มีความยืดหยุ่นมาก เราสามารถโหลดสคริปต์ JavaScript จากเซิร์ฟเวอร์ได้ตามต้องการเพื่อสร้างและควบคุม UI เพื่อโต้ตอบกับผู้ใช้ ต่อไปนี้คือการรวมกันของ ext js เพื่อแสดงวิธีการโหลดสคริปต์ JS แบบไดนามิกจากเซิร์ฟเวอร์เพื่อสร้างฟอร์มแบบไดนามิก
1 โครงสร้างโครงการ:
โครงสร้างโครงการมีดังนี้: GetJSUI General Handler ใช้เพื่อคว้าการกำหนดค่า UI จากตารางฐานข้อมูลและส่งกลับไปยังไคลเอนต์ ไฟล์ HTML และไลบรารี JS ใช้ในโฟลเดอร์เนื้อหา
2 โครงสร้างตารางฐานข้อมูล
คุณสามารถใช้ SQL ต่อไปนี้เพื่อสร้างตารางใน MSSQL ซึ่งฟิลด์ JavaScriptContent เก็บสคริปต์ JS เฉพาะ
สร้างตาราง [dbo]. [ext_dynamic_form] ([id] [nvarchar] (50) ไม่ใช่ null, [uniname] [nvarchar] (50) null, [javascriptcontent] [nvarcharcharcharch [4000) null, [memo] [หลัก]
หลังจากการสร้างคุณสามารถเริ่มต้นข้อมูล:
หลังจากการสร้างคุณสามารถเริ่มต้นข้อมูล:
4 การเขียนโปรแกรม getjsui
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.linq; การใช้ System.web; การใช้ cmclouddbhelper; namespace extjs6.services {/// <summary> /// Author: Jackwangcumt /// </summary> context.response.contentType = "ข้อความ/ธรรมดา"; //context.response.contentType = "ข้อความ/javascript"; CMCDACACCESS DA = ใหม่ CMCDATAACCESS (); String sqlforjs = "เลือก * จาก ext_dynamic_form โดยที่ id = '006'"; System.data.Datatable dt = da.getDatatable (sqlforjs); if (dt! = null) {ถ้า (dt.rows.count == 1) {js = dt.rows [0] ["JavaScriptContent"]. toString (); }} // UTF-8 Context.Response.ContentEncoding = System.Text.encoding.UTF8; Context.Response.Write (JS); } บูลสาธารณะ isreusable {รับ {return false; -5 อินเตอร์เฟสหลัก html
<html> <head> <title> สร้างรูปแบบแบบไดนามิกจากเซิร์ฟเวอร์จาวาสคริปต์ </title> <!-ไฟล์ไลบรารี-> <meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา "ie = edge" charset = "utf-8"> <meta name = "viewport" user-scalable = no "> <script type =" text/javaScript "src =" ext6/ext-all-debug.js "> </script> <link rel =" stylesheet "type =" text/css "href =" ext6/classic/theme-triton/ทรัพยากร/ธีม src = "ext6/classic/theme-triton/theme-triton-debug.js"> </script> <script type = "text/javascript"> // โหลด *.js ไฟล์จากฟังก์ชันเซิร์ฟเวอร์ loadscript (url, callback) {var script = document.createelement if (script.readyState) {// ie script.onreadyStateChange = function () {ถ้า (script.readyState == "โหลด" || script.readyState == "เสร็จสมบูรณ์") {script.onreadyStateChange = null; การโทรกลับ (); - } else {// อื่น ๆ script.onload = function () {callback (); - } script.src = url; document.getElementByTagname ("head") [0] .AppendChild (สคริปต์); } // โหลดข้อความ js จากฟังก์ชันเซิร์ฟเวอร์ loadscriptsrc (js, callback) {var script = document.createElement ("script") script.type = "text/javascript"; //script.async = true; if (script.readyState) {// ie script.onreadyStateChange = function () {ถ้า (script.readyState == "โหลด" || script.readyState == "เสร็จสมบูรณ์") {script.onreadyStateChange = null; การโทรกลับ (); - } else {// อื่น ๆ script.onload = function () {callback (); - } script.text = js; console.log (สคริปต์); document.getElementByTagname ("head") [0] .AppendChild (สคริปต์); // ไม่สามารถโทรกลับ (); } // ext js 6 ext.onready (function () {//https://www.sencha.com/forum/showthread.php?268193-how-to-load-content-dynamically-for-tabpanel var pmain = ext.widget [{Title: 'West', ภูมิภาค: 'West', Width: 200, Collapse: True}, {xtype: 'Tabpanel', ภูมิภาค: 'center', รายการ: [{title: 'แท็บแรก', itemid: 'tab01',}, {title: }]}]}); loadscriptsrc (response.responsetext, function () {ext.msg.alert ("โหลด js", "โหลด js จากเซิร์ฟเวอร์"); var gp = ext.create ("gpview"); //loadscript("dynamicloadjs2.js ", function () {// ext.msg.alert (" โหลด "); // var gp = ext.create (" gpview "); // //console.log(gp); Ext.ComponentQuery.Query ('#tab01') [0] .Add ({// // html: 'โอ้สวัสดี' // //}); </script> </head> <body> </body> </html>6 วิ่ง
ด้วยวิธีนี้เราสามารถสร้างกรอบหลักจากนั้นสร้างระบบทั่วไปเช่นเมนูและการอนุญาต โดยการกำหนดค่าเมนูและ UI ในฐานข้อมูลเราสามารถขยายแอปพลิเคชันแบบไดนามิกได้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น