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==)

                 {

                      js = dt.Rows[]["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创建窗体的更多相关文章

  1. 两种动态加载JavaScript文件的方法

    两种动态加载JavaScript文件的方法 第一种便是利用ajax方式,第二种是,动静创建一个script标签,配置其src属性,经过把script标签拔出到页面head来加载js,感乐趣的网友可以看 ...

  2. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  3. 网页特效-动态加载JavaScript

    描述: 把一些逻辑独立的JavaScript脚本文件单独加载,是一种常见的JavaScript动态加载技术.可以减少不必要的JavaScript脚本文件的加载,以提高网页浏览速度 代码: <!D ...

  4. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  5. js的动态加载、缓存、更新以及复用（四）

    本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...

  6. 动态加载javascript增强版

    我们经常使用动态加载Javascript,写个函数很容易现实,之前也写过一个函数,不过当加载多个JS时,只能根据浏览器返回的顺序来先后加载,这肯定不是我们想要的,现在使用了一下技巧,当加载多个JS时, ...

  7. Ext JS学习第十天 Ext基础之动态加载JS文件（补充）

    此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...

  8. js怎么动态加载js文件（JavaScript性能优化篇）

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...

  9. Extjs-树 Ext.tree.TreePanel 动态加载数据

    先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...

随机推荐

  1. linux系统维护时的一些小技巧，包括系统挂载新磁盘的方法！可收藏！

    这里发布一些平时所用到的小技巧,不多,不过会持续更新.... 1.需要将history创建硬链接ln 全盘需要备份硬链接 ln /etc/xxx /home/xxx 2.root用户不可以远程 /et ...

  2. [PHP源码阅读]count函数

    在PHP编程中,在遍历数组的时候经常需要先计算数组的长度作为循环结束的判断条件,而在PHP里面对数组的操作是很频繁的,因此count也算是一个常用函数,下面研究一下count函数的具体实现. 我在gi ...

  3. 淘宝UWP中的100个为什么

    从淘宝UWP第一版发布到现在,已经有十个月了,期间收到了用户各种各样的反馈,感谢这些用户的反馈,指导我们不断的修正.完善应用.但是也有一部分需求或建议,由于资源或技术的限制,目前确实无法做到,只能对广 ...

  4. 最新Angular2案例rebirth开源

    在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用, ...

  5. The Coroutine

    关于Coroutine 说到coroutine就不的不说subroutine,也就是我们常用到的一般函数.调用一个函数开始执行,然后函数执行完成后就退出,再次调用的时候,再从头开始,调用之间是没有保存 ...

  6. ABP(现代ASP.NET样板开发框架)系列之16、ABP应用层——数据传输对象（DTOs）

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之16.ABP应用层——数据传输对象(DTOs) ABP是“ASP.NET Boilerplate Project ...

  7. linux笔记

    1 动态查看日志 tail -f filename tail -1000f filename 2 解压当前目录内容为xxx.zip  zip -r xxx.zip ./* 3 查看内存使用情况 fre ...

  8. libuv源码分析前言

    Libevent,libev,libuv三者的区别所在? libevent提供了全套解决方案(事件库,非阻塞IO库,http库,DNS客户端),然而libevent使用全局变量,导致非线程安全.它的w ...

  9. C#设计模式-中介者模式

    在现实生活中,有很多中介者模式的身影,例如QQ游戏平台,聊天室.QQ群和短信平台,这些都是中介者模式在现实生活中的应用,下面就具体分享下我对中介者模式的理解. 一. 中介者(Mediator)模式 从 ...

  10. 【.NET深呼吸】动态类型（扩充篇）

    前面两文中,老周已向大家介绍了关于动态类型对象的两种级别的使用方案,本篇呢,老周再讲一个自定义动态类型的例子. 前面给大家演示的例子中,动态类型中包装的是字典类型来存储数据的,这一次咱们换一种风味,老 ...