Ext JS动态加载JavaScript创建窗体的方法

(编辑：jimmy 日期: 2024/11/20 浏览：3 次 )

JavaScript不需要编译即可运行，这让JavaScript构建的应用程序可以变得很灵活。我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互。下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体。
1 项目结构：
项目结构如下：其中GetJSUI一般处理程序用来从数据库表中抓取UI配置，并返回到客户端；Contents文件夹下用HTML文件和JS库等。

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

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]

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

4 GetJSUI 编程

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using CMCloudDBHelper;
namespace extjs6.Services
{
 /// <summary>
 /// author:jackwangcumt
 /// </summary>
 public class GetJSUI : IHttpHandler
 {

 public void ProcessRequest(HttpContext context)
 {
  string js = "";
  context.Response.ContentType = "text/plain";
  //context.Response.ContentType = "text/javascript";
  CMCDataAccess da = new CMCDataAccess();
  string SQLForJS = "select * FROM Ext_Dynamic_Form where 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 主界面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="/UploadFiles/2021-04-02/ext-all-debug.js">

6 运行


 这样我们可以做一个主框架，然后构建菜单和权限等通用体系，通过在数据库中配置菜单及UI，可以动态扩展应用。



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：每日十条JavaScript经验技巧(一)
下一篇：jQuery UI结合Ajax创建可定制的Web界面