[Ext]自己封装自动装配EXT框架 -- 原理

来源：互联网发布：淘宝全年营业额2016 编辑：程序博客网时间：2024/06/15 15:51

最近给学生上课讲到ExtJs,在07年的时候学习过一段时间Extjs,自己还封装了Extjs2.0本地帮助手册(chm格式),大家手头如果有Extjs Chm手册的话其中就有我的一段小代码在里面.

最近在网络上看到一个牛人写了一Efs的Extjs自动装配框架不错,手有点痒,决定自己也写一个,本人也是个菜鸟,因此估计写出来的只能是菜鸟用了,不为有一些好的想法大家可以相互学习学习,希望对大家有一点帮助.

言归正转,所谓自动装配这个概念是我自己想出来的,就是不用写Extjs只要写一些HTML,加载一段js,自动就会出现Ext组件.

正常情况我们要创建一个Extjs对象的方法如下,用一个最简的控件Button

new Ext.Button({配置对象});

例如:

new Ext.Button({renderTo:"div1",title:"haha"});

自动装配的思想就是我们写一段HTML能过js动态生上面的代码,HTML格式如下:

最主要任务是要人div中提取出cfg信息,学习Efs我写好以下代码:

Eht = { ver: 1.0 }; //定义一个新的静态类

      Eht.Xtypes = {   //定义预转换的key和对象
                 button:Ext.Button
      };

//重点是下面代码,完成Html对象的属性解析功能

     Eht.getCfg = function (o) {
             var cfg = {};
             for (var i = 0; i < o.attributes.length; i++) {
                 var name = o.attributes[i].name;
                 if (name=="id" || name == "xtype") {
                 } else {
                     var val = o.attributes[i].value;
                     if (!isNaN(val)) {
                         val *= 1;
                     }
                     if (val == "true" || val == "false") {
                         cfg[name] = val == "true";
                     } else {
                         cfg[name] = val;
                     }
                 }
             }
             cfg["renderTo"] = Ext.get(o).id;
             return cfg;
       }

//在Extjs加载完成后进行解析

         Ext.onReady(function () {
             for (xtype in Eht.Xtypes) { //解析所有类型对象
                 var objs = Ext.query("div[xtype='" + xtype + "']"); //查找某类型的所有HTML对象
                 Ext.each(objs, function (o) { //处理每个对象
                     var cfg = Eht.getCfg(o); //解析获取配置信息
                     var extobj = new Eht.Xtypes[xtype](cfg); //创建对象
                     Eht[Ext.get(o).id] = extobj;//保存对象,方便以后使用,例如window的show之类
                 });
             }
         });

基本搞定可以写测试了 :

这里可以写的属性可以参考Extjs手册中Ext.Button的config信息

这就完了Button的自动装配如果要做简单的组件(Panel)是非常方便的,只要将Key和类写入Eht.Xtyps中即可:

Eht.Xtypes = {

button:Ext.Button,

panel:Ext.Panel
};

测试:

添加Window有一点麻烦:

var cfg = Eht.getCfg(o);
if (xtype == "window") { //window时特殊处理一下

                        cfg.renderTo = Ext.getBody();
                         cfg.closeAction = "hide";
                     }
                     var extobj = new Eht.Xtypes[xtype](cfg);
                     Eht[Ext.get(o).id] = extobj;
                     if (xtype == "window" && cfg.autoshow) { // //window时特殊处理一下,自动显示
                         extobj.show();
                     }

测试:

如要不自动显示,可以通过JS显示:

Eht["win1"].show();//前面已经保存了,这里获取调用一下

上效果图:

源文件:

http://download.csdn.net/detail/lijun7788/3795863