O JavaScript não requer compilação para executar, o que torna os aplicativos criados pelo JavaScript muito flexível. Podemos carregar dinamicamente scripts JavaScript do servidor, conforme necessário para criar e controlar a interface do usuário para interagir com os usuários. A seguir, é apresentada uma combinação de EXT JS para ilustrar como carregar dinamicamente os scripts JS do servidor para criar um formulário dinamicamente.
1 Estrutura do projeto:
A estrutura do projeto é a seguinte: o manipulador GetjSui Geral é usado para pegar a configuração da interface do usuário da tabela de banco de dados e retornar ao cliente; Os arquivos HTML e as bibliotecas JS são usados na pasta Conteúdo.
2 Estrutura da tabela de banco de dados
Você pode usar o seguinte SQL para criar uma tabela no MSSQL, onde o JavascriptContent Field armazena scripts JS específicos.
Criar tabela [dbo]. [Ext_dynamic_form] ([id] [nvarchar] (50) não nulo, [uniname] [nvarchar] (50) nulo, [javaScriptContent] [nvarchar] (4000) null, [memo] [nvarchar] (null) [null) (4000))
Após a criação, você pode inicializar os dados:
Após a criação, você pode inicializar os dados:
4 programação getjsui
Usando o sistema; usando o System.Collection.Genic; usando o System.Linq; usando o System.Web; usando o CmcloudDbhelper; namespace extjs6.services {/// <summary> // Author: JackwangCumt /////siply> public class GetjSui: ihtphandler {Public Procurs ""; context.Response.ContentType = "Text/Plain"; //Context.Response.ContentType = "Texto/javascript"; CmcDataAccess da = new cmcDataAccess (); string sqlforjs = "selecione * de ext_dynamic_form onde 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 interface principal html
<html> <head> <title> gerar formas dinamicamente do servidor javascript </title> <!-arquivos da biblioteca-> <meta http-equiv = "x-ua compatível com" content = "ie = borda" charset = "utf-8"> <meta name = "viewport" = "" width = device-widththththththththth = "utf-8"> <meta-name = "viewPort" = "" width = device-widththththththth = "utf-8"> <meta-name = "viewport" = "" width = device-widththththth = " 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/resources/theme-triton-all-debug.css"> <script type="text/javascript" src = "Ext6/clássico/tema-triton/tema-triton-debug.js"> </script> <script type = "text/javascript"> // carregar *.js file da função servidor loadScript (url, callback) {var script = document.createlement ("script") script.type = "; if (script.ReadyState) {// ie script.onReadyStateChange = function () {if (script.readyState == "carregado" || script.readyState == "complete") {script.onReadyStatechange = null; ligar de volta(); }}; } else {// outros script.onload = function () {callback (); }; } script.src = url; document.getElementsByTagName ("Head") [0] .AppendChild (Script); } // Carregue o texto JS da função do servidor loadScriptsrc (js, retorno de chamada) {var script = document.createElement ("script") script.type = "text/javascript"; //script.async = true; if (script.ReadyState) {// ie script.onReadyStateChange = function () {if (script.readyState == "carregado" || script.readyState == "complete") {script.onReadyStatechange = null; ligar de volta(); }}; } else {// outros script.onload = function () {callback (); }; } script.Text = js; console.log (script); document.getElementsByTagName ("Head") [0] .AppendChild (Script); // não é possível retorno de chamada (); } // Ext JS 6 Ext.onReady (function () {//https://www.sencha.com/forum/showthread.php?268193-how-to-load-content-dynamicly-for-tabPanel var pMain = ext.widget ('painel', {{rendero: [{Title: 'West', Região: 'West', Width: 200, Collapse: True}, {xtype: 'TabPanel', Region: 'Center', itens: [{Title: 'First Tab', ItemId: 'Tab01',}, {Title: 'Second', Layout: 'Fit', Carta: {{{Url: 'Form. }}]}]}); loadScriptsrc (Response.ResponseTex, function () {ext.msg.alert ("carregado JS", "Js carregado do servidor"); var gp = ext.create ("gpview"); ext.comPonsTQuery.Query ('#tab01) [0]. //loadScript("DyNAMICLOADJS2.JS ", function () {// ext.msg.alert (" carregado "); // var gp = ext.create (" gpview "); // //console.log(gp); // //gp.body.renderto(pmain); Ext.componentQuery.Query ('#tab01') [0] .Add ({// // html: 'Oh, olá.' // //}); </script> </ad Head> <body> </body> </html>6 Run
Dessa forma, podemos fazer uma estrutura principal e depois construir um sistema geral, como menus e permissões. Ao configurar os menus e a interface do usuário no banco de dados, podemos expandir dinamicamente o aplicativo.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.