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 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
vue中监听路由参数的变化及方法
Dec 06 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服务器实现多session并发运行
2006/10/09 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
php二维码生成以及下载实现
2017/09/28 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
vue设置默认首页的操作
2020/08/12 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
python计算一个序列的平均值的方法
2015/07/11 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
python圣诞树编写实例详解
2020/02/13 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
面料业务员岗位职责
2013/12/26 职场文书
化学专业自荐信
2014/05/28 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技