JavaScript tidak memerlukan kompilasi untuk dijalankan, yang membuat aplikasi yang dibangun oleh JavaScript sangat fleksibel. Kami dapat secara dinamis memuat skrip JavaScript dari server sesuai kebutuhan untuk membuat dan mengontrol UI untuk berinteraksi dengan pengguna. Berikut ini adalah kombinasi ext js untuk menggambarkan cara memuat skrip JS secara dinamis dari server untuk membuat formulir secara dinamis.
1 Struktur Proyek:
Struktur proyek adalah sebagai berikut: GetJSUI General Handler digunakan untuk mengambil konfigurasi UI dari tabel database dan mengembalikannya ke klien; File HTML dan pustaka JS digunakan di folder konten.
2 struktur tabel basis data
Anda dapat menggunakan SQL berikut untuk membuat tabel di MSSQL, di mana bidang JavaScriptContent menyimpan skrip JS tertentu.
CREATE TABLE [dbo].[Ext_Dynamic_Form]( [ID] [nvarchar](50) NOT NULL, [UniName] [nvarchar](50) NULL, [JavaScriptContent] [nvarchar](4000) NULL, [Memo] [nvarchar](200) NULL, CONSTRAINT [PK_Ext_Dynamic_Form] PRIMARY KEY CLUSTERED ( [ID] ASC)) ON [PRIMARY]
Setelah pembuatan, Anda dapat menginisialisasi data:
Setelah pembuatan, Anda dapat menginisialisasi data:
4 Pemrograman GetJSUI
Menggunakan Sistem; Menggunakan System.Collections.Generic; menggunakan System.linq; menggunakan System.web; menggunakan cmclouddbhelper; namespace extjs6.services {/// <ringkasan> ///. ""; Context.Response.ContentType = "Teks/Polos"; //context.response.contentType = "Text/JavaScript"; Cmcdataaccess da = cmcdataaccess baru (); string sqlforjs = "pilih * dari ext_dynamic_form di mana id = '006'"; System.data.datatable dt = da.getDataTable (sqlforjs); if (dt! = null) {if (dt.rows.count == 1) {js = dt.rows [0] ["javaScriptContent"]. ToString (); }} // UTF-8 Context.Response.Contentencoding = System.text.encoding.Utf8; Context.Response.write (JS); } public bool isreusable {get {return false; }}}}5 HTML Antarmuka Utama
<html> <adept> <title> secara dinamis menghasilkan formulir dari server javascript </itement> <!-file perpustakaan-> <meta http-equiv = "x-ua-compatible" content = "IE = edge" charset = "UTF-8"> <meta name = "viewport" content = "wide, device =" no. "NoM-8"> <meta-scale = "viewport" content = "wide, device = dever-wdth =" UTF-8 " type = "Text/JavaScript" src = "ext6/ext-all-debug.js"> </script> <tautan rel = "stylesheet" type = "text/css" href = "ext6/classic/tema-triton/sumber daya/tema-triton-semua-debug.css"> <script = "TEKS/JABS/JABS/JAVASI" src = "ext6/classic/tema-triton/tema-triton-debug.js"> </script> <script type = "text/javascript"> // memuat *.js file dari fungsi server loadscript (url, callback) {var skrip = document.createElement ("script") script.type = "text/javascript; if (script.readystate) {// IE Script.onReadyStateChange = function () {if (skrip.readystate == "dimuat" || script.readystate == "complete") {script.onReadyStAteChange = null; callback (); }}; } else {// Other Script.onload = function () {callback (); }; } script.src = url; document.getElementsbyTagname ("head") [0] .AppendChild (skrip); } // Muat teks JS dari fungsi server loadScriptSrc (js, callback) {var skrip = document.createElement ("script") script.type = "text/javascript"; //script.async = true; if (script.readystate) {// IE Script.onReadyStateChange = function () {if (skrip.readystate == "dimuat" || script.readystate == "complete") {script.onReadyStAteChange = null; callback (); }}; } else {// Other Script.onload = function () {callback (); }; } script.text = js; console.log (skrip); document.getElementsbyTagname ("head") [0] .AppendChild (skrip); // tidak bisa callback (); } // 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 ('panel', {renderTo: 800, 800, 800, 800, 800, 800, 800, 800, 800, {renderTo: 800: 800, 800, {renderto: 800, 800, 800, {renderto: 800, Item: [{title: 'West', Region: 'West', Width: 200, Collapse: true}, {xtype: 'tabpanel', region: 'center', item: [{title: 'tab pertama', itemId: 'tab01',}, {judul: 'tab kedua', tata letak: 'fit', loader: '{' Ur, 'form.,' form., 'form.,' form., 'form.,', 'fit', 'fit', 'fit', 'fit', 'fit', 'fit', 'fit', 'fit', 'fit', 'fit', ' }}]}]});. LoadScriptSrc (Response.Responsetext, function () {ext.msg.alert ("Loaded JS", "Loaded JS dari Server"); var gp = ext.create ("gpview"); ext.componentQuery.query ('#tab01') [0]. //LoadScript("DynamicLoadjs2.js ", function () {// ext.msg.alert (" dimuat "); // var gp = ext.create (" gpview "); // //console.log(gp); // //gp.body.renderto(pmain); /// Ext.componentQuery.Query ('#tab01') [0] .add ({// // html: 'oh, halo.' //}); </script> </head> <body> </body> </html>6 lari
Dengan cara ini, kita dapat membuat kerangka kerja utama, dan kemudian membangun sistem umum seperti menu dan izin. Dengan mengonfigurasi menu dan UI dalam database, kami dapat secara dinamis memperluas aplikasi.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.