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. java 泛型

    1.Student stu =tool.getObj();右边得到的是Object类型,需要向下转型,强转换. 2. 3. 4.泛型方法不能被静态修饰这样写 5.如果想定义定义静态泛型方法,只能这样写 ...

  2. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  3. es6之let和const

    在javascript中,我们都知道使用var来声明变量.javascript是函数级作用域,函数内可以访问函数外的变量,函数外不能访问函数内的变量. 函数级作用域会导致一些问题就是某些代码块内的变量 ...

  4. C#设计模式-迭代器模式

    一. 迭代器(Iterator)模式 迭代器是针对集合对象而生的,对于集合对象而言,必然涉及到集合元素的添加删除操作,同时也肯定支持遍历集合元素的操作,我们此时可以把遍历操作也放在集合对象中,但这样的 ...

  5. PHP安装mysql.so扩展

    在PHP中mysql_connect模块已经逐渐被弃用,我在搭建环境时也没有再安装mysql扩展,但是今天在维护一个老项目时,出现报错 Fatal error: Uncaught Error: Cal ...

  6. Python 学习之路 （一）：基础

    数据类型和变量 整数 在Python3中,整数可以处理任意大小的整数,不分长整型和整型, 十六进制用0x开头或者H结尾表示:0x2af ,2afH 用函数 int() 来转换字符串中的数字,里面不能包 ...

  7. Hawk 3. 网页采集器

    1.基本入门 1. 原理(建议阅读) 网页采集器的功能是获取网页中的数据(废话).通常来说,目标可能是列表(如购物车列表),或是一个页面中的固定字段(如JD某商品的价格和介绍,在页面中只有一个).因此 ...

  8. 分享个 之前写好的 android 文件流缓存类,专门处理 ArrayList、bean。

    转载麻烦声明出处:http://www.cnblogs.com/linguanh/ 目录: 1,前序 2,作用 3,特点 4,代码 1,前序  在开发过程中,client 和 server 数据交流一 ...

  9. JQuery知识点总结

    一. 1.JavaScript是Netscape公司开发的一种脚本语言(scripting language).JavaScript的出现实现了使得网页和用户之间实时的,动态的和交互的关系,使网页包含 ...

  10. 用CIL写程序:写个函数做加法

    前言: 上一篇文章小匹夫为CIL正名的篇幅比较多,反而忽略了写那篇文章初衷--即通过写CIL代码来熟悉它,了解它.那么既然有上一篇文章做基础(炮灰),想必各位对CIL的存在也就释然了,兴许也燃起了一点 ...