JavaScript ne nécessite pas de compilation pour s'exécuter, ce qui rend les applications construites par JavaScript très flexibles. Nous pouvons charger dynamiquement les scripts JavaScript du serveur au besoin pour créer et contrôler l'interface utilisateur pour interagir avec les utilisateurs. Ce qui suit est une combinaison d'EXT JS pour illustrer comment charger dynamiquement les scripts JS du serveur pour créer une forme dynamiquement.
1 Structure du projet:
La structure du projet est la suivante: Le gestionnaire général GetJSUI est utilisé pour saisir la configuration de l'interface utilisateur à partir de la table de base de données et le renvoyer au client; Les fichiers HTML et les bibliothèques JS sont utilisés dans le dossier de contenu.
2 Structure de la table de base de données
Vous pouvez utiliser le SQL suivant pour créer une table dans MSSQL, où le champ JavaScriptContent stocke des scripts JS spécifiques.
Créer un tableau [DBO]. [Ext_dynamic_form] ([id] [nvarchar] (50) pas null, [uniname] [nvarchar] (50) null, [JavaScriptContent] (nvarchar] (4000) null, [Memo] [nvarchar] (200) Null, Contrain [PRIMAIRE]
Après la création, vous pouvez initialiser les données:
Après la création, vous pouvez initialiser les données:
4 Programmation Getjsui
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Web; Utilisation de CmCloudDBHelper; Namespace Extjs6.Services {/// <summary> /// Auteur: Jackwangcumt /// </summary> public Class GetjSui: ihttphandler {public Void processRequest (HTTPCON CONTEXT context.Response.contentType = "Text / Plain"; //context.response.contentType = "Text / JavaScript"; CMCDATAACCESS DA = NOUVEAU CMCDATAACCESS (); String sqlforjs = "SELECT * FROM EXT_DYNAMIC_Form où 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.contenCcoding = System.Text.Encoding.Utf8; context.Response.write (JS); } public bool isreusable {get {return false; }}}}5 Interface principale HTML
<Html> <A-Head> <Title> Générez dynamiquement des formulaires à partir de server javascript </tapt> <! - Fichiers de bibliothèque -> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge" charset = "utf-8"> <meta name = "visualport" contenu = "width = device-width, initial-sable = 1, maximum-scale = 1, width = device-width, initial-scale = 1, maximum-scale = 1, width = device-width, initial-sable = 1, maximum-Scale = 1, Width = Deviceth, Inimal-Scale = 1. user-scalable = no "> <script type =" text / javascript "src =" ext6 / ext-all-debug.js "> </ script> <link rel =" stylesheet "type =" text / css "href =" ext6 / classique / thème-triton / ressources / thème-triton-all-debug.css "> <script type =" text / javascript " src = "ext6 / classique / thème-triton / thème-triton-debug.js"> </ script> <script type = "text / javascript"> // charger * .js fichier de la fonction du serveur Loadscript (url, callback) {var script = document.createelement ("script") script.type = "text / javascript"; if (script.readystate) {// ie script.onreadystatechange = function () {if (script.readystate == "chargé" || script.readystate == "complet") {script.onreadystatechange = null; callback (); }}; } else {// autres script.onload = function () {callback (); }; } script.src = url; document.getElementsByTagName ("Head") [0] .APPEndChild (script); } // Chargez le texte js de la fonction du serveur LoadScriptsrc (js, callback) {var script = document.createElement ("script") script.type = "text / javaScript"; //script.async = true; if (script.readystate) {// ie script.onreadystatechange = function () {if (script.readystate == "chargé" || script.readystate == "complet") {script.onreadystatechange = null; callback (); }}; } else {// autres script.onload = function () {callback (); }; } script.text = js; console.log (script); document.getElementsByTagName ("Head") [0] .APPEndChild (script); // Impossible de callback (); } // ext js 6 ext.onready (function () {//https://www.sencha.com/forum/showthread.php?268193-How-to-load-Content-Dynamiquement-For-Tabpanel Var pmain = Ext.Widget ('Pannel', {Renderto: Document.Body, High [{Title: 'West', région: 'West', Width: 200, Effondrement: true}, {xtype: 'tabpanel', région: 'Center', items: [{title: 'First Tab', itemid: 'tab01',}, {title: 'Second Tab', Layout: 'Fit', {Url: 'Form.Json', AutoLoad, Autoload, Render: {Url: 'Form.Json', Autoload, Autolaad }}]}]}); Loadscriptsrc (Response.ResponSext, fonction () {ext.msg.Alert ("JSED JS", "Loaded JS From Server"); var gp = ext. //loadscript("dynamicloadjs2.js ", function () {// ext.msg.alert (" chargé "); // var gp = ext.create (" gpview "); // //console.log(gp); // //gp.body.renderto(pmain); //gp); // //gp.body.renderto(pmain); // // Ext.ComponentQuery.Query (# Tab01 ') [0] .add ({// // html:' oh, bonjour. '// //}); </cript> </ head> <body> </ body> </html>6 points
De cette façon, nous pouvons faire un cadre principal, puis construire un système général tel que les menus et les autorisations. En configurant les menus et l'interface utilisateur dans la base de données, nous pouvons étendre dynamiquement l'application.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.