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 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js事件(Event)知识整理
Oct 11 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
JS Attribute属性操作详解
May 19 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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中创建并处理图象
2006/10/09 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
python 带时区的日期格式化操作
2020/10/23 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
大学生创业计划书的范文
2014/01/07 职场文书
法定代表人授权委托书
2014/04/04 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
自我检讨书怎么写
2015/05/07 职场文书
关于运动会的广播稿
2015/08/19 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
详解Vue的options
2021/05/15 Vue.js
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript