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

         最近给学生上课讲到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 xtype='button' title="haha"></div>

     最主要任务是要人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之类
                 });
             }           
         });

基本搞定可以写测试了 :

   <div id="div1" xtype="button" text="haha1" disabled = "true"></div>
  <div id="div3" xtype="button" text="haha2" ></div>

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

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

      Eht.Xtypes = {   

                 button:Ext.Button,

                 panel:Ext.Panel
      };

测试:

 <div xtype="panel" title="haha" width="400" height="300" collapsible ="true" titleCollapse="true" draggable="true"></div>

添加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();
                     }

测试:

<div id="win0" xtype="window" width="400" title="hello Win0" height="300" autoshow ="true"></div>
  <div id="win1" xtype="window" width="400" title="hello Win1" height="300" autoshow ="false"></div>

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

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

上效果图:

源文件:

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