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


Posted in Javascript onJune 23, 2016

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

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

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]

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

创建好后,可以初始化数据:

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

创建好后,可以初始化数据:

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,可以动态扩展应用。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 #Javascript
JavaScript基于原型链的继承
Jun 22 #Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 #Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 #Javascript
浅析jQuery Ajax通用js封装
Jun 22 #Javascript
Javascript如何判断数据类型和数组类型
Jun 22 #Javascript
最全的Javascript编码规范(推荐)
Jun 22 #Javascript
You might like
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
Python random模块常用方法
2014/11/03 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python中一些深不见底的“坑”
2019/06/12 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
浅谈Python中的字符串
2020/06/10 Python
python如何从键盘获取输入实例
2020/06/18 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
硕士生工作推荐信
2014/03/07 职场文书
车辆工程专业求职信
2014/06/14 职场文书
股东合作协议书
2014/09/12 职场文书
旷工检讨书1000字
2015/01/01 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技