Ext JS动态加载JavaScript创建窗体的方法
更新时间:2016年6月24日 10:00 点击:1957
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="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/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 运行
这样我们可以做一个主框架,然后构建菜单和权限等通用体系,通过在数据库中配置菜单及UI,可以动态扩展应用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
上一篇: JS使用JSON作为参数实例分析
下一篇: 微信QQ的二维码登录原理js代码解析
相关文章
java 画pdf用itext调整表格宽度、自定义各个列宽的方法
这篇文章主要介绍了java 画pdf用itext调整表格宽度、自定义各个列宽的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-31- 通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
- 在网站开发中,我们经常使用php similar text 计算两个字符串相似度;1,similar_text的用法 如果我想计算"ly89cn"和"ly89"的相似程度,有两种表示方法复制代码 代码如下: echo similar_text('ly89cn', 'ly89'); ...2015-11-08
- 这篇文章主要介绍了java 用itext设置pdf纸张大小操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-31
- 在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会,下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别,需要的朋友参考下...2016-02-21
- 这篇文章主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下...2016-02-12
- 使用Eclipse编辑jsp、js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,下面通过脚本之家平台给大家分享几种解决办法,需要的朋友参考下...2016-02-05
- 这篇文章主要介绍了jquery及js实现动态加载js文件的方法,结合实例形式分别讲述了基于jQuery以及基于JavaScript的文件动态加载方法,需要的朋友可以参考下...2016-01-24
- stream_context_create创建并返回一个文本数据流并应用各种选项,可用于fopen(),file_get_contents()等过程的超时设置、代理服务器、请求方式、头信息设置的特殊过程。...2016-11-25
- 这篇文章主要介绍了Sublime Text 3常用插件及安装方法的相关资料,需要的朋友可以参考下...2015-12-18
- 这篇文章主要介绍了Window.Open打开窗体和if嵌套代码的相关资料,需要的朋友可以参考下...2016-04-18
Ajax+FormData+javascript实现无刷新表单信息提交
在前端开发中ajax,formdata和js实现无刷新表单信息提交非常棒,接下来通过本文给大家介绍Ajax+FormData+javascript实现无刷新表单信息提交的相关资料,需要的朋友可以参考下...2016-10-25- 这篇文章主要介绍了jQuery控制frames及frame页面JS的方法,涉及jQuery针对页面元素的判定及frame框架的操作技巧,需要的朋友可以参考下...2016-03-10
Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等
使用Yii2的时候,在某些场景和环境下需要获得Yii2目前所处于的module(模型)、Controller(控制器)、Action(方法),以及会调用控制器里面已经定义过的一些公共的方法等.对于这些问题Yii2可以在视图层View中使用$this->context这个对象去获得。下面通过示例代码给大家讲解下...2017-04-03- 这篇文章主要给大家介绍了关于Android中EditText光标的显示与隐藏以及Android之第一次不显示EditText光标的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-11-01
- 这篇文章主要介绍了解决hive中导入text文件遇到的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-04-07
- 这篇文章主要介绍了php+js实现百度地图多点标注的方法,涉及php结合js针对百度地图接口调用与json操作相关技巧,需要的朋友可以参考下...2016-12-02
- 下面小编就为大家带来一篇简单封装js的dom查询实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-25
- 这篇文章主要介绍了使用SublimeText编译C代码的开发环境设置,大家参考使用...2020-04-25
- Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高,本文给大家介绍nodejs事件循环相关知识,对此感兴趣的朋友快来学习吧...2015-12-21