Ext JS 如何动态加载JavaScript创建窗体

　　JavaScript不需要编译即可运行，这让JavaScript构建的应用程序可以变得很灵活。我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互。下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体。

1 项目结构：

项目结构如下：其中GetJSUI一般处理程序用来从数据库表中抓取UI配置，并返回到客户端；Contents文件夹下用HTML文件和JS库等。

2 数据库表结构

可以用下面的SQL在MSSQL中创建表，其中JavaScriptContent字段存储具体的JS脚本。

 1 CREATE TABLE [dbo].[Ext_Dynamic_Form]( 2   [ID] [nvarchar](50) NOT NULL, 3   [UniName] [nvarchar](50) NULL, 4   [JavaScriptContent] [nvarchar](4000) NULL, 5   [Memo] [nvarchar](200) NULL, 6 CONSTRAINT [PK_Ext_Dynamic_Form] PRIMARY KEY CLUSTERED  7 ( 8   [ID] ASC 9 )10 ) ON [PRIMARY]

创建好后，可以初始化数据：

4 GetJSUI 编程

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using CMCloudDBHelper; 6 namespace extjs6.Services 7 { 8   /// <summary> 9   /// author:jackwangcumt10   /// </summary>11   public class GetJSUI : IHttpHandler12   {13 14     public void ProcessRequest(HttpContext context)15     {16       string js = "";17       context.Response.ContentType = "text/plain";18       //context.Response.ContentType = "text/javascript";19       CMCDataAccess da = new CMCDataAccess();20       string SQLForJS = "select * FROM Ext_Dynamic_Form where ID='006'";21       System.Data.DataTable dt= da.GetDataTable(SQLForJS);22       if(dt!=null)23       {24         if(dt.Rows.Count==1)25         {26           js = dt.Rows[0]["JavaScriptContent"].ToString();27         }28 29       }30      31       //utf-832       context.Response.ContentEncoding = System.Text.Encoding.UTF8;33       context.Response.Write(js);34 35     }36 37     public bool IsReusable38     {39       get40       {41         return false;42       }43     }44   }45 }

5 主界面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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="ext6/classic/theme-triton/theme-triton-debug.js"></script>  <script type="text/javascript">  //load *.js file from server  function loadScript(url, callback) {    var script = document.createElement("script")    script.type = "text/javascript";    if (script.readyState) { //IE      script.onreadystatechange = function() {        if (script.readyState == "loaded" ||          script.readyState == "complete") {          script.onreadystatechange = null;          callback();        }      };    } else { //Others      script.onload = function() {        callback();      };    }    script.src = url;    document.getElementsByTagName("head")[0].appendChild(script);  }  //load js text from server  function 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 == "loaded" ||          script.readyState == "complete") {          script.onreadystatechange = null;          callback();        }      };    } else { //Others      script.onload = function() {        callback();      };    }      script.text = js;    console.log(script);    document.getElementsByTagName("head")[0].appendChild(script);    //不能少    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: document.body,      height: 800,      width: 800,      layout: 'border',      items: [{        title: 'West',        region: 'west',        width: 200,        collapsible: true      }, {        xtype: 'tabpanel',        region: 'center',        items: [{          title: 'First Tab',          itemId: 'tab01',        }, {          title: 'Second Tab',          layout: 'fit',          loader: {            url: 'Form.json',            autoLoad: true,            renderer: 'component'          }        }]      }]    });    //ajax config    var reqConfig = {         url: '../Services/GetJSUI.ashx',         method: 'get',         callback: function (options, success, response) {                    // var msg = ['success:', success, '\n', 'data:', response.responseText];           // alert(msg.join(''));            loadScriptSrc(response.responseText, function() {            Ext.Msg.alert("loaded js","从服务器加载JS完成");            var gp = Ext.create("gpView");                Ext.ComponentQuery.query('#tab01')[0].add(gp);          });         }       };    Ext.Ajax.request(reqConfig);    //loadScript("dynamicLoadJS2.js", function() {    //  Ext.Msg.alert("loaded");    //  var gp = Ext.create("gpView");    //  //console.log(gp);    //  //gp.body.renderTo(pmain);    //  // Ext.ComponentQuery.query('#tab01')[0].add({    //  //   html: 'Oh, Hello.'    //  // });    //  Ext.ComponentQuery.query('#tab01')[0].add(gp);    //});  });  </script></head><body></body></html>

6 运行