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. 【转】Android开发中让你省时省力的方法、类、接口

    转载 http://www.toutiao.com/i6362292864885457410/?tt_from=mobile_qq&utm_campaign=client_share& ...

  2. hbase协处理器编码实例

    Observer协处理器通常在一个特定的事件(诸如Get或Put)之前或之后发生,相当于RDBMS中的触发器.Endpoint协处理器则类似于RDBMS中的存储过程,因为它可以让你在RegionSer ...

  3. fhq treap最终模板

    新学习了fhq treap,厉害了 先贴个神犇的版, from memphis /* Treap[Merge,Split] by Memphis */ #include<cstdio> # ...

  4. fmt标签把时间戳格式化日期

    jsp页面标签格式化日期 <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %> ...

  5. 从淘宝 UWP 的新功能 -- 比较页面来谈谈 UWP 的窗口多开功能

    前言 之前在 剁手党也有春天 -- 淘宝 UWP ”比较“功能诞生记 这篇随笔中介绍了一下 UWP 淘宝的“比较”新功能呱呱坠地的过程.在鲜活的文字背后,其实都是程序员不眠不休的血泪史(有血有泪有史) ...

  6. CSharpGL(20)用unProject和Project实现鼠标拖拽图元

    CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...

  7. Electron的环境配置

    原文地址http://huisky.com/blog/161218121551123 本文介绍了Electron的环境配置,包括Electron下载.nodejs下载安装.NPM+Bower安装配置. ...

  8. SQLSERVER 使用 ROLLUP 汇总数据，实现分组统计，合计，小计

    表结构: CREATE TABLE [dbo].[Students]( ,) NOT NULL, ) NULL, [Sex] [int] NOT NULL, ) NULL, ) NULL, , ) N ...

  9. 关于安卓6.0权限申请 PermissionDog

    最近在一家公司实习,项目中需要用到适配安卓6.0以上的系统,我本来是想用其他人已经写好的权限申请框架来实现的,但是发现跟我的需求有点小区别,所以就自己写了一个 这个权限申请的帮助类很小,只有一个jav ...

  10. 解析大型.NET ERP系统 设计异常处理模块

    异常处理模块是大型系统必备的一个组件,精心设计的异常处理模块可提高系统的健壮性.下面从我理解的角度,谈谈异常处理的方方面面.我的设计仅仅限定于Windows Forms,供参考. 1 定义异常类型 . ...