Extjs 模块化动态加载js实践

最新推荐文章于 2019-08-28 09:49:08 发布
原创 最新推荐文章于 2019-08-28 09:49:08 发布 · 640 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#EXT #Ajax #JavaScript #json #JSP #ViewUI

本文介绍了一种在ExtJS框架中动态加载模块的方法，通过AJAX获取JavaScript代码并实例化为面板组件，实现按需加载的功能。

前一段转载了一篇

透明加载外部 javascript 文件函数

挺有启发的，觉得可以套用在extjs的管理上，管理界面 两栏布局，左边栏一棵菜单树，右面一个tabpanel，菜单树的每个菜单代表一个模块，每个模块用一个js来实现，需要时载入就行了，而不需要刚开始时把所有的模块都载进入


当点击菜单树的节点时调用：

 

function openGetBugsPanel(name) {
    var moduleId = 'BugList_tab';
    //一个静态方法，表示从一个js载入了一个新的模块
    Ext.ux.yiminghe.framework.core.newModule(
    {
        //模块的id		
        moduleId: moduleId,
        //在哪个tabpanel新加一个模块	
        tabPanel: window.tabs,
        //模块所在js
        moduleURL: 'js/modules/Bugs.js',
        //模块所需要的参数
        moduleParams: {
            title: name,
            MYBugs: false
        },
        //如果该模块已经在tabpanel上了，怎么处理			
        existCallBack: function(panel) {
            panel.setTitle(name);
            panel.filters.clearFilters();
        }
    }
    );
}
 

 

其实每个模块就是一个panel，加入到tabpanel 就行了，关键是要 动态构造这个panel

例如这个bugs.js

 

/**
	ajax 直接返回一个类,eval ,new
**/
Ext.extend(Ext.Panel, {
    initComponent: function() {

        var bugsGrid_metaData = [
        {
            dataIndex: 'projectId',
            header: '项目',
            width: 70,
            sortable: true,
            show: true
        },
        {
            dataIndex: 'moduleId',
            header: '模块',
            width: 70,
            sortable: true,
            show: true
        },
        {
            dataIndex: 'bid',
            header: 'Bug/Task编号',
            sortable: true,
            width: 100
        },
        {
            dataIndex: 'btitle',
            header: 'Bug/Task标题',
            width: 250,
            sortable: true,
            show: true

        },
        {
            dataIndex: 'degree',
            header: '严重程度',
            width: 100,
            sortable: true,
            show: true,
            renderer: function(val) {
                return '<span style="color:green">' + val + '</span> ';
            }
        },
        {
            dataIndex: 'status',
            header: '状态',
            width: 70,
            show: true,
            sortable: true,
            renderer: function(val) {


                return '<span style="color:red">' + val + '</span> ';
            }
        },
        {
            dataIndex: 'who',
            header: '由谁创建',
            width: 70,
            sortable: true,
            show: true
        },
        {
            dataIndex: 'assign',
            header: '指派给谁',
            width: 70,
            sortable: true,
            show: true
        },
        {
            dataIndex: 'resolve',
            header: '由谁解决',
            width: 70,
            sortable: true,
            show: true
        },
        {
            dataIndex: 'moduleId',
            header: 'moduleId',
            sortable: true,
            width: 70
        },
        {
            dataIndex: 'method',
            header: '解决方案',
            width: 100,
            sortable: true,
            show: true
        },
        {
            dataIndex: 'openedTime',
            header: '提交时间',
            width: 150,
            sortable: true,
            show: true,
            renderer: function(val) {

                var d = new Date();
                d.setTime(val);
                return '<span style="color:red">' + d.toLocaleString() + '</span> ';
            }
        }
        ];

        Ext.grid.filter.StringFilter.prototype.icon = 'desktop/js/filter/img/find.png';
        this.filters = new Ext.grid.GridFilters({
            filters: [
            {
                type: 'list',
                dataIndex: 'projectId',
                single: true,
                options: PROJECTS,
                phpMode: true,
                listeners: {
                    'update': function() {
                        var pid = this.getValue();
                        if (pid == '') return;
                        // 实例化Ext发送Ajax请求需要的Connection对象
                        var conn = new Ext.data.Connection();
                        // 发送异步请求
                        conn.request({
                            // 请求地址
                            url: 'bug/get_modules_ext.jsp?project_id=' + pid,
                            method: 'GET',
                            // 指定回调函数
                            callback: callback
                        });
                        //回调函数
                        function callback(options, success, response) {
                            if (success) {
                                // 如果成功则使用Ext将JSON字符串转换为JavaScript对象
                                var jsonObj = Ext.util.JSON.decode(response.responseText);
                                //　到这就可以取你想要的东东了
                                //  取消息id
                                var m_data = jsonObj.data;
                                filters.getFilter(1).options = m_data;
                                filters.getFilter(1).store.loadData(m_data);
                            } else {
                                alert(response.responseText);
                            }

                        }
                    }
                }
            },
            {
                type: 'list',
                dataIndex: 'moduleId',
                single: true,
                options: [],
                phpMode: true
            },
            {
                type: 'string',
                dataIndex: 'btitle'
            },

            {
                type: 'list',
                dataIndex: 'assign',
                single: true,
                //id:'assign_filter',
                options: USERS,
                phpMode: true
            },
            {
                type: 'list',
                dataIndex: 'who',
                single: true,
                options: USERS,
                phpMode: true
            },

            {
                type: 'list',
                dataIndex: 'resolve',
                single: true,
                options: USERS,
                phpMode: true
            },
            {
                type: 'list',
                dataIndex: 'status',
                single: true,
                //id:'status_filter',
                options: BUGSTATUSES,
                phpMode: true
            }
            ]
        });

        var gridMenuDatas = [
        {
            text: '提交Bug/Task',
            iconCls: 'badd',
            handler: function() {
                addBugFormPanel('提交Bug/Task');
            }
        },
        '-',
        {
            text: '编辑',
            iconCls: 'bedit',
            handler: function() {
                var record = this.getSelectionRecord();
                createEditBugForm(record.get('bid'), record.get('btitle'));
            }
        }
        ,
        '-',
        {
            text: '解决',
            iconCls
            :
            'bok',
            handler
            :
            function() {
                var record = this.getSelectionRecord();
                createResolveBugForm(record.get('bid'), record.get('btitle'), record.get('moduleId'));
            }
        }
        ,
        '-',
        {
            text: '历史',
            iconCls: 'bsearch',
            handler: function() {
                var record = this.getSelectionRecord();
                var moduleId = 'bugHistory_Tab' + record.get('bid');
                var realId = 'bugHistory_Tab' + record.get('bid');
                Ext.ux.yiminghe.framework.core.newModule(
                {
                    moduleId: moduleId,
                    realId: realId,
                    tabPanel: window.tabs,
                    moduleURL: 'js/modules/BugHistories.js',
                    moduleParams: {
                        bugId: record.get('bid'),
                        bugName: record.get('btitle'),
                        moduleId: record.get('moduleId')
                    },
                    existCallBack: function(panel) {
                        panel.bugHistoryGrid.reload();
                    }
                }
                );
            }
        },
        {
            text: '链接地址',
            iconCls: 'blist',
            handler: function() {
                var record = this.getSelectionRecord();
                if (record)
                Ext.MessageBox.alert(record.get('btitle') + ' - Bug地址', BASEPATH + '/bug/BtsBugDetail.jsp?bugId=' + record.get('bid'));
            }
        }

        ];
        var gridContextMenuDatas = [
        gridMenuDatas[0], gridMenuDatas[2], gridMenuDatas[4], gridMenuDatas[6], gridMenuDatas[7]
        ];
        var dbClick_g = function(record) {
            var moduleId = 'bugHistory_Tab';
            var realId = 'bugHistory_Tab' + record.get('bid');
            Ext.ux.yiminghe.framework.core.newModule(
            {
                moduleId: moduleId,
                realId: realId,
                tabPanel: window.tabs,
                moduleURL: 'js/modules/BugHistories.js',
                moduleParams: {
                    bugId: record.get('bid'),
                    bugName: record.get('btitle'),
                    moduleId: record.get('moduleId')
                },
                existCallBack: function(panel) {
                    panel.bugHistoryGrid.reload();
                }
            }
            );
        };
        this.bugsGrid = new Ext.ux.yiminghe.JsonGridPanel({
            columns: bugsGrid_metaData,
            pageSize: 15,
            initload: true,
            plugins: [this.filters],
            viewConfig: {
                forceFit: true,
                autoFill: true
            },
            autoScroll: true,
            sm: new Ext.grid.RowSelectionModel(
            {
                singleSelect: true
            }),
            dataSource: 'bug/BtsGetBugsDO_Ext.jsp',
            tbar: gridMenuDatas,
            stripeRows: true,
            border: false,
            bodyStyle: 'width:100%',
            isGroupHeader: false,
            rowcontextmenu: gridContextMenuDatas,
            doubleClick: dbClick_g,
            pageBarPlugins: [new Ext.ux.Andrie.pPageSize({
                beforeText: '每页显示',
                afterText: '条'
            })]
        });
        if (this.MYBugs) {
            this.filters.getFilter('assign').setValue(CURRENTUSERID);
            this.filters.getFilter('assign').setActive(true, true);
            this.filters.getFilter('status').setValue(0);
            this.filters.getFilter('status').setActive(true, true);
        } else {

            this.filters.clearFilters();
            this.bugsGrid.reload();
        }
        Ext.apply(this, {
            title: this.title,
            iconCls: 'tabs',
            autoScroll: false,
            id: 'BugList_tab',
            layout: 'fit',
            items: this.bugsGrid,
            closable: true
        });
        //调用父类构造函数（必须）
        module.superclass.initComponent.apply(this, arguments);
    }
});
   

可以看到在这个模块中可以调用 传过来的参数

 

 

{
title:name,
MYBugs:false
}

现在关键是 newModule 的实现了 ，也很简单 ，就是 ajax把 模块类区过来 ，new 一下 就是一个新的模块了 ，不过要注意一下缓存这个模块类的定义

 

Ext.namespace("Ext.ux.yiminghe.framework.core");

Ext.ux.yiminghe.framework.core.newModule = function(config) {
    //模块类的名字
    var moduleId = config.moduleId;
    //主Tab名字
    var tabPanel = config.tabPanel;
    //加载模块类的地址
    var moduleURL = config.moduleURL;
    //模块实例tab的id
    var realId = config.realId || moduleId;
    //缓存模块
    tabPanel.uxmodules = tabPanel.uxmodules || {};
    //模块实例的配置参数
    var moduleParams = config.moduleParams || {};

    if (tabPanel.findById(realId)) {
        tabPanel.findById(realId).show();
        //如果已经载入该Tab ,则调用调整函数
        if (config.existCallBack)
        config.existCallBack(tabPanel.findById(realId));
        return;
    }
    if (tabPanel.uxmodules[moduleId]) {
        var module = tabPanel.uxmodules[moduleId];
        var moduleInstance = new module(moduleParams);
        var newCmp = tabPanel.add(moduleInstance);
        tabPanel.doLayout();
        tabPanel.setActiveTab(newCmp);
        return;
    }
    tabPanel.loadMask.show();
    Ext.Ajax.request(
    {
        method: 'GET',
        disableCaching: false,
        //utf-8 编码
        url: moduleURL,
        success: function(response) {
            var module = eval(response.responseText);
            tabPanel.uxmodules[moduleId] = module;
            var moduleInstance = new module(moduleParams);
            var newCmp = tabPanel.add(moduleInstance);
            tabPanel.doLayout();
            tabPanel.setActiveTab(newCmp);
            tabPanel.loadMask.hide();
        }
    }
    );
}
 

 

总结一下流程：

 

1.请求一段 javascript 代码(定义一个Panel子类)

2.eval 出类型 T

3.得到新类型的实例 instance = new T
4.总控的tabpnel add instance 就可以了。

Ext JS的模块化开发（Package）
oscar999的专栏
10-10 829
Ext JS中的生产环境编译 在使用 sencha app build production命令构建生产环境时，Sencha CMD会在应用目录下创建 “build/production/应用名” 子目录，并将构建的结果放置与此目录下。举例来看： 生产环境的JS源码编译结果会集中到一下两个文件： index.html app.js 整个的机制就是： CMD会将所有的源码进行去注释、去空格等操作进行编译，最后汇总到一个html 和 js 文件中。这些编译的结果包括哪些部分呢？ 首先包含时应用中自己编写的
基于Ext JS的模块化应用框架搭建及开发
oscar999的专栏
10-28 618
模块化开发 早期基于Ext JS的Web开发方式，是在HTML中引入JS和CSS文件，典型的就是引入 ext-all.js 这样的文件。ext all 包含的内容很多， 有基本的核心组件、扩展组件以及图表等其他组件。 模块拆分 ...
ExtJs模块化编程实例
01-21 703
Ext.namespace("Ext.qiuji") /*模块化*/ /** * 人员信息展示panel */ //人员信息初始化的 Action访问后台数据 PERSONDATA_URL = "extStore"; Ext.qiuji.PersonViewGridPanel = Ext.extend(Ext.grid.GridPanel,{ inserPersonInfoW
Extjs3+sea.js 实现模块化
一分耕耘一分收获
06-12 971
Extjs3+sea.js 实现模块化今天跟大家分享一下这几年使用extjs3的心得，以及对Extjs4 的一些看法,若大家对我说的有看法，请联系我！ 一. 最近学习了一下Extjs4.2 ，说实话本人感觉里面的东西变化太大，学习成本的确有点偏高，但是仔细看下里面的东西设计还不是很不错的，至少对代码规范上面有了很大提供，比如MVC 里面的文件命名规则必须是controoler,model,view,
UI框架 即360UI框架与EXT比较
chentiedong的专栏
04-23 973
EXTJS框架是非常全面和成熟的，这是因为它发展的年头久远，并且有全世界的EXTJS爱好者为其出谋献策，它的组件库尤其是DataGrid组件无人能出其右。我在最初也考虑过使用EXTJS来做项目，学习了一段时间后最终还是选择放弃。放弃的理由有如下几点： （1）风格样式单一。这是最让我受不了的。一个让用户满意的系统并不是单纯组件的堆砌，用户对系统的评价除了能够完成相应的功能外，还涉及到界面是否美观、
ExtJs 模块化动态加载js实例解析（一）
01-16 1244
大多数web应用系统都会包含功能菜单和显示页面，功能菜单可以是页面左面的一棵树，也可以是一个可以切换的多标签页，而显示页面无非就是一个空白区域，点击相应的功能菜单，切换不同的内容。     经常看到有人讨论如何用Ext加载iframe，这不失为一种简便的办法，但是它的弊端也是显而易见的。     1.每个页面都需要引用庞大的Ext类库，这样的系统在局域网里还可以接受，但作为一个公网系统就让人无
Extjs3实现动态加载js源码的管理器
在Extjs3中实现动态加载JS源码需要开发者手动编写一些额外的JavaScript代码。这通常包括使用AJAX请求动态获取JS文件，并在获取后在客户端执行这段代码。这种方法实现起来较为复杂，需要处理跨域问题、JS文件的依赖...
基于ExtJS的项目协作系统模块化开发实践
结合标签信息：ExtJS、SOA、项目协作系统、模块化、前端开发、JavaScript、自学、代码实践、系统设计、SQL，我们可以深入挖掘多个关键知识点。 首先，ExtJS 是一个功能强大的企业级 JavaScript 框架，主要用于构建...
ExtJS4 组件化编程，动态加载，面向对象，Direct
10-28
页面加载时会显示一个加载动画，使用JavaScript动态创建登录窗口，并在窗口创建后通过定时器清除加载提示。这些细节都展现了ExtJS框架如何在一个实际的Web项目中得到应用。 最后，值得一提的是，ExtJS4支持的国际化...
Extjs3动态加载js源码
08-23
总的来说，`Extjs3动态加载js源码`实现的动态加载管理器是一个巧妙地结合了JavaScript语言特性、浏览器API和模块化思想的解决方案。通过理解和学习这样的代码，开发者可以更好地理解如何在没有内置支持的情况下实现...
Ext用户UI界面优秀框架
07-14
对javascript强封装大的框架，一个用来做用户UI界面不错的框架
extjs和数据库的后台交互
10-28
extjs和数据库的后天交互，好好的学习中，。。。。。。。
Ext3.2中文API(2010-10-18更新).rar
10-18
Ext3.2中文API(2010-10-18更新).rar 没有描述行不行？2死了你。
ExtJs UI框架学习六
weixin_33842304的博客
01-24 163
ExtJS中get、getDom、getCmp、getBody、getDoc的使用 Ext中包含了几个以get开头的方法，这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等，在使用中要注意区别使用。 1、get方法 get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象， Ext.Element类是Ext对DOM的封装，代表D...
EXTJS系列笔记(6.X)————gridpanel根据数据动态加载需要的列，同时列根据不同值显示不同颜色
java_dotar_01的专栏
08-28 736
现在的开发中，出现一个需求，就是需要在界面 中根据后台的数据动态的显示 gridpanel的列，同时需要固定某些列，闲话不说，先看代码， 在 主界面中 只有一个 gridpanel,其他啥也没有，看下： { xtype:"gridpanel", width:"100%", title:"详细信息EQPID", id:"lotview_lotdetail_eqpid", borde...
在Extjs模块化程序中动态加载js文件
trymore的学习和分享
01-16 2343
1. 本Extjs模块化的方式是参考的 http://microboat.iteye.com/blog/182682 的方法 2. 在模块中： Ext.extend(main.module,{ init:function(){ // load js this.loadJS("js/modules/modScoreManage/GridStudent.js",this.o
一款类似Ext的轻量级实现UI的JS框架
ku_sunny520的专栏
04-15 1388
/*! * UC JS Library 1.0.0 */ // 兼容旧浏览器，早期的浏览器实现中，undefined并不是全局变量。就是说，你要判断一个变量是否是没定义， // 你需要这样写if (typeof a == 'undefined')，不可以写成if (a == undefined)。所以，上面的代码就可以理解了。 // 右面的window["undefined"]，因
EXT框架界面设计
sunjay117的专栏
04-20 5392
ExtJs的框架界面设计，个人感觉还这个框架的UI做出效果还是比较叫不错的， 楚翔新闻管理系统 --%> var pnNorth = new Ext.Panel({ id: 'pnNorth',
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值