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

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

1 项目结构：

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

2 数据库表结构

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

rush:sql;"> 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 编程

rush:csharp;"> using System; using System.Collections.Generic; using System.Linq; using System.Web; using CMCloudDBHelper; namespace extjs6.Services { ///

/// author:jackwangcumt ///

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

rush:xhtml;"> <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">

6 运行

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

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

原文地址：https://www.jb51.cc/js/47634.html