JavaScript erfordert keine Kompilierung zum Ausführen, wodurch die von JavaScript erstellten Anwendungen sehr flexibel sind. Wir können JavaScript -Skripte dynamisch vom Server aus dem Server laden, um die Benutzeroberfläche für die Interaktion mit Benutzern zu erstellen und zu steuern. Das Folgende ist eine Kombination von Ext -JS, um zu veranschaulichen, wie JS -Skripte dynamisch vom Server geladen werden, um ein Formular dynamisch zu erstellen.
1 Projektstruktur:
Die Projektstruktur lautet wie folgt: Der GetJSUI General Handler wird verwendet, um die UI -Konfiguration aus der Datenbanktabelle abzurufen und an den Client zurückzugeben. HTML -Dateien und JS -Bibliotheken werden im Inhaltsordner verwendet.
2 Datenbanktabellenstruktur
Sie können die folgende SQL verwenden, um eine Tabelle in MSSQL zu erstellen, in der das Feld JavaScriptContent bestimmte JS -Skripte speichert.
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 [Primär]
Nach der Erstellung können Sie die Daten initialisieren:
Nach der Erstellung können Sie die Daten initialisieren:
4 GetJsui -Programmierung
Verwenden von System; Verwendung von System.Collectionss.generic; Verwendung von System.LinQ; Verwendung von System.web; Verwendung cmclouddbhelper; namespace extjs6.services {/// <summary> /// Autor: JackWangCumt /// </summary> öffentlicher Klasse getJsui: ihttho -jungen {öffentlicher void processrequest) ""; context.Response.contentType = "text/plain"; //context.Response.contentType = "text/javaScript"; CmcdataAccess da = new cmcdataAccess (); String sqlforjs = "Select * aus ext_dynamic_form wobei id = '006'"; System.data.Datatable Dt = da.getDatable (SQLForJS); if (dt! }} // utf-8 context.Response.ContentCoding = System.text.encoding.utf8; context.Response.write (JS); } public bool isreusable {get {return false; }}}}5 Hauptschnittstelle HTML
<html> <Head> <titels> Generieren Sie dynamisch Formulare aus Server JavaScript </title> <!-Bibliotheksdateien-> <meta http-äquiv = "x-ua-kompatible" content = "ie = edge" charset = "utf-8"> <meta name = "viewPort" content = "width = eriebel-width, initial-width, initial-scale = 1, maximum-scale = 1, teures-sscale, initial-scale = 1, maximum-sscale, teureth = eriebel-width, initial. <script type = "text/javaScript" src = "ext6/ext-all-debug.js"> </script> <link rel = "stylesheet" type = "text/css" href = "ext6/klassisch/thementriton/ressourcen/thementriton-all-debug.css src = "ext6/klassisch/thementriton/thema-triton-debug.js"> </script> <script type = "text/javaScript"> // laden *.js Datei aus der Serverfunktion ladeScript (url, callback) {var script = document.createelement ("script") script.type = "text/javascript"; if (script.ReadyState) {// IE script.onreadyStatechange = function () {if (script.readystate == "geladen" || script.readystate == "complete") {script.onreadyStatechange = null; callback (); }}; } else {// Andere script.onload = function () {callback (); }; } script.src = url; document.getElementsByTagName ("head") [0] .AppendChild (Skript); } // JS -Text aus der Serverfunktion ladeScriptsrc (js, radback) {var script = document.createelement ("script") script.type = "text/javaScript"; //script.async = true; if (script.ReadyState) {// IE script.onreadyStatechange = function () {if (script.readystate == "geladen" || script.readystate == "complete") {script.onreadyStatechange = null; callback (); }}; } else {// Andere script.onload = function () {callback (); }; } script.text = js; console.log (script); document.getElementsByTagName ("head") [0] .AppendChild (Skript); // kann nicht zurückrufen (); } // ext js 6 ext.onReady (function () {//https://www.sencha.com/forum/showthread.php?268193-how-to-load-content-dynamical-tabpanel var pmain = ext.widget ('Panel', {renderto: {Renderto: ', Dokument:', ', Dokument:', Dokument: 800, 800, 800, 800, 800, {Renderto: ', Dokument,: 800, 800, 800, 800, {Renderto:', Dokument,: 800, 800, 800. [{ title: 'West', region: 'west', width: 200, collapse: true }, { xtype: 'tabpanel', region: 'center', items: [{ title: 'First Tab', itemId: 'tab01', }, { title: 'Second Tab', layout: 'fit', loader: { url: 'Form.json', autoLoad: true, renderer: 'component' }}]}]}); loadscriptsrc (responSeText, function () {ext.msg.alert ("geladene JS", "geladene JS aus Server"); //Loadscript("dynamicloadjs2.js ", function () {// ext.msg.alert (" geladen "); // var gp = ext.create (" gpview "); // //console.log(gp); // //gp.body.renderto(pmain). Ext.comPonentQuery.query ('#tab01') [0] .Add ({// // html: 'oh, Hallo.' // //}); </script> </head> <body> </body> </html>6 rennen
Auf diese Weise können wir einen Hauptgerüst erstellen und dann ein allgemeines System wie Menüs und Berechtigungen aufbauen. Durch die Konfiguration von Menüs und Benutzeroberflächen in der Datenbank können wir die Anwendung dynamisch erweitern.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.