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

前端之家收集整理的这篇文章主要介绍了Ext JS动态加载JavaScript创建窗体的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1 项目结构:

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

2 数据库表结构

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

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 编程

/// 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

Dynamically generate forms from server javascript <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.f2er.com/js/47634.html

猜你在找的JavaScript相关文章