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

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
， ext
窗体
ext 引用另外一个窗体、ext关闭窗体销毁store、i18next javascript、js窗体加载事件、vb重新加载窗体，以便于您获取更多的相关知识。

时间： 2024-11-03 11:10:48

Ext JS动态加载JavaScript创建窗体的方法_javascript技巧的相关文章

JS 动态加载脚本的4种方法_javascript技巧

如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4种比较常用的方法,大家可以根据情况选择,最后 将会给推荐一个.1.直接document.write 复制代码 代码如下: <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script> 2.动态改变已有script的src属性 复制代

JS动态加载脚本并执行回调操作_javascript技巧

关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数.  我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发现在 IE 浏览器中可以使用

JavaScript 动态加载脚本和样式的方法_javascript技巧

一 动态脚本 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能; 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 var flag = true; if(flag){ loadScript('browserdetect.js'); // 调用函数,引入路径; } function loadScript(url){ var script = document.createElement('script'); // 创建script

js 动态加载事件的几种方法总结_javascript技巧

有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用. 方法一.setAttributevar obj = document.getElementById("obj");obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属

解决js图片加载时出现404的问题_javascript技巧

运营网站久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在.常见的解决方案是将404图片隐藏或者是替换为默认的图片. img标签事件属性 img标签可使用的时间属性有:onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart,

JS动态修改表格cellPadding和cellSpacing的方法_javascript技巧

本文实例讲述了JS动态修改表格cellPadding和cellSpacing的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过修改表格对象的cellPadding和cellSpacing属性来修改表格单元格的间距 <!DOCTYPE html> <html> <head> <script> function padding() { document.getElementById('myTable').cellPadding="15&quo

JS动态给对象添加事件的简单方法_javascript技巧

WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

JS动态修改iframe高度和宽度的方法_javascript技巧

本文实例讲述了JS动态修改iframe高度和宽度的方法.分享给大家供大家参考.具体如下: 如果希望通过按钮动态修改iframe的高度和宽度,可以参考下面的JS代码 <!DOCTYPE html> <html> <head> <script> function changeSize() { document.getElementById("myframe").height="300"; document.getEleme

js window.onload 加载多个函数的方法_javascript技巧

用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或者如下: window.onload=function(){alert("this is window onload event!");return;} 但window.onload 不能同时加载多个函数. 比如: 复制代码 代码如下: function t(){ alert("