JavaScript no requiere que la compilación se ejecute, lo que hace que las aplicaciones creadas por JavaScript sean muy flexibles. Podemos cargar dinámicamente los scripts JavaScript desde el servidor según sea necesario para crear y controlar la interfaz de usuario para interactuar con los usuarios. La siguiente es una combinación de Ext JS para ilustrar cómo cargar dinámicamente los scripts JS desde el servidor para crear un formulario dinámicamente.
1 Estructura del proyecto:
La estructura del proyecto es la siguiente: el controlador general GetJsui se utiliza para obtener la configuración de UI desde la tabla de la base de datos y devolverla al cliente; Los archivos HTML y las bibliotecas JS se utilizan en la carpeta de contenido.
2 estructura de la tabla de bases de datos
Puede usar el siguiente SQL para crear una tabla en MSSQL, donde el campo JavaScriptContent almacena scripts JS específicos.
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]
Después de la creación, puede inicializar los datos:
Después de la creación, puede inicializar los datos:
4 Programación GetJsui
usando System; usando System.Collections.Generic; Usando System.Linq; usando System.Web; Uso de CMCloudDBHelper; Namespace ExtJS6.Services {//// <summary> /// autor: JackwangCumt /// </sumario> clase public getJsui: ihttphandler {public void ProcessRequest (httpcontetpcontet) context.Response.ContentType = "Text/Plain"; //context.response.contentType = "text/javaScript"; CmcDataAccess da = new CMCDataAccess (); cadena sqlforjs = "select * de ext_dynamic_form donde 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 interfaz principal HTML
<html><head> <title>Dynamically generate forms from server javascript</title> <!-- Library Files --> <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable = no "> <script type =" text/javaScript "src =" ext6/ext-all-debug.js "> </script> <link rel =" stylesheet "type =" text/css "href/" ext6/clásico/titiaton/recursos/thema-triton-all-dobug.css "> <script type =" text/javaScript " src = "ext6/clásico/thema-triton/theme-triton-debug.js"> </script> <script type = "text/javascript"> // load *.js archivo de la función del servidor LoadScript (url, callback) {var script = document.createelement ("script") script.type = "text/javaScript; if (script.readyState) {// ie script.onreadyStateChange = function () {if (script.readyState == "cargado" || script.readyState == "completo") {script.onreadyStateChange = null; llamar de vuelta(); }}; } else {// otros script.onload = function () {callback (); }; } script.src = url; document.getElementsByTagName ("Head") [0] .AppendChild (script); } // Cargar JS Text desde la función del servidor 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 == "cargado" || script.readyState == "completo") {script.onreadyStateChange = null; llamar de vuelta(); }}; } else {// otros script.onload = function () {callback (); }; } script.text = js; console.log (script); document.getElementsByTagName ("Head") [0] .AppendChild (script); // no se puede llamar (); } //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: document.body, height: 800, width: 800, layout: 'border', items: [{Título: 'West', Region: 'West', Width: 200, colapso: true}, {xtype: 'tabpanel', región: 'centro', elementos: [{title: 'first tab', itemId: 'tab01',}, {title: 'segundo tab', diseño: 'fit', cargador: {url: 'form.json', autoload: verdadero: ', verdadero:' }}]}]}). LoadScriptSrc (Response.ResponsExtext, function () {ext.msg.alert ("Loaded JS", "Loaded JS desde el servidor"); var gp = ext.create ("gpview"); ext.componeStQuery.query ('#tab01') [0] .add (gp);}; //loadscript("dynamicloadjs2.js ", function () {// ext.msg.alert (" cargado "); // var gp = ext.create (" gpview "); // //console.log(gp); // //gp.body.renderte(pMain); // // Ext.componentQuery.Query ('#tab01') [0] .add ({// // html: 'oh, hola.' // //}) </script> </head> <body> </body> </html>6 carreras
De esta manera, podemos hacer un marco principal y luego construir un sistema general como menús y permisos. Al configurar los menús y la interfaz de usuario en la base de datos, podemos expandir dinámicamente la aplicación.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.