金刚网纱窗201:ext designer自动生成代码的使用

来源：百度文库 编辑：九乡新闻网 时间：2024/04/28 01:42:07

ext designer自动生成代码的使用

2010-08-20 11:24阅读(1365)评论(2)收藏举报

ext designer可以可视化编辑界面，但生成代码后，很多人不会用，怎么让他在页面中显示出来呢？

这里可能会有一些不一样，因为各人生成的容器不一样，可能会有一些改动，比如我下面是一个viewport，生成的代码就不需要改，直接放面js中就可以了。但有些可能要加renderTo:这个我还没试，稍后再试试，好像是panel之类的要加这个属性。

下面这是我直接从ext designer中拷出来的代码：

view plainprint?

  1. Ext.MyViewport=Ext.extend(Ext.Viewport ,{  
  2. xtype:"viewport",  
  3.     layout:"border",  
  4.     initComponent: function(){  
  5.         this.items=[  
  6.             {  
  7.                 xtype:"form",  
  8.                 title:"我的表单",  
  9.                 labelWidth:100,  
  10.                 labelAlign:"left",  
  11.                 layout:"column",  
  12.                 region:"center",  
  13.                 height:689,  
  14.                 items:[  
  15.                     {  
  16.                         xtype:"panel",  
  17.                         title:"",  
  18.                         columnWidth:0.3,  
  19.                         layout:"form",  
  20.                         items:[  
  21.                             {  
  22.                                 xtype:"textfield",  
  23.                                 fieldLabel:"用户编码",  
  24.                                 anchor:"100%"  
  25.                             },  
  26.                             {  
  27.                                 xtype:"textfield",  
  28.                                 fieldLabel:"确认密码",  
  29.                                 anchor:"100%"  
  30.                             }  
  31.                         ]  
  32.                     },  
  33.                     {  
  34.                         xtype:"panel",  
  35.                         title:"",  
  36.                         columnWidth:0.3,  
  37.                         layout:"form",  
  38.                         items:[  
  39.                             {  
  40.                                 xtype:"textfield",  
  41.                                 fieldLabel:"用户名称",  
  42.                                 anchor:"100%"  
  43.                             },  
  44.                             {  
  45.                                 xtype:"datefield",  
  46.                                 fieldLabel:"生效日期",  
  47.                                 anchor:"100%"  
  48.                             }  
  49.                         ]  
  50.                     },  
  51.                     {  
  52.                         xtype:"panel",  
  53.                         title:"",  
  54.                         columnWidth:0.3,  
  55.                         layout:"form",  
  56.                         items:[  
  57.                             {  
  58.                                 xtype:"textfield",  
  59.                                 fieldLabel:"用户密码",  
  60.                                 anchor:"100%"  
  61.                             },  
  62.                             {  
  63.                                 xtype:"datefield",  
  64.                                 fieldLabel:"失效日期",  
  65.                                 anchor:"100%"  
  66.                             }  
  67.                         ]  
  68.                     }  
  69.                 ]  
  70.             },  
  71.             {  
  72.                 xtype:"form",  
  73.                 title:"我的表单",  
  74.                 labelWidth:100,  
  75.                 labelAlign:"left",  
  76.                 layout:"form",  
  77.                 region:"south",  
  78.                 height:300,  
  79.                 autoScroll:true,  
  80.                 collapsible:true,  
  81.                 tbar:[  
  82.                     {  
  83.                         xtype:"buttongroup",  
  84.                         title:"",  
  85.                         layout:"table",  
  86.                         items:[  
  87.                             {  
  88.                                 text:"增加"  
  89.                             }  
  90.                         ]  
  91.                     },  
  92.                     " ",  
  93.                     {  
  94.                         xtype:"buttongroup",  
  95.                         title:"",  
  96.                         layout:"table",  
  97.                         items:[  
  98.                             {  
  99.                                 text:"删除"  
  100.                             }  
  101.                         ]  
  102.                     }  
  103.                 ]  
  104.             },  
  105.             {  
  106.                 title:"",  
  107.                 region:"west",  
  108.                 width:0  
  109.             },  
  110.             {  
  111.                 title:"",  
  112.                 region:"east",  
  113.                 width:0  
  114.             }  
  115.         ]  
  116.         Ext.MyViewport.superclass.initComponent.call(this);  
  117.     }  
  118. })  

我们把他放在一个js文件中:test.js吧，名字就叫

 view plainprint?

  1. Ext.onReady(function() {  
  2. Ext.MyViewport=Ext.extend(Ext.Viewport ,{  
  3. xtype:"viewport",  
  4.     layout:"border",  
  5.     initComponent: function(){  
  6.         this.items=[  
  7.             {  
  8.                 xtype:"form",  
  9.                 title:"我的表单",  
  10.                 labelWidth:100,  
  11.                 labelAlign:"left",  
  12.                 layout:"column",  
  13.                 region:"center",  
  14.                 height:689,  
  15.                 items:[  
  16.                     {  
  17.                         xtype:"panel",  
  18.                         title:"",  
  19.                         columnWidth:0.3,  
  20.                         layout:"form",  
  21.                         items:[  
  22.                             {  
  23.                                 xtype:"textfield",  
  24.                                 fieldLabel:"用户编码",  
  25.                                 anchor:"100%"  
  26.                             },  
  27.                             {  
  28.                                 xtype:"textfield",  
  29.                                 fieldLabel:"确认密码",  
  30.                                 anchor:"100%"  
  31.                             }  
  32.                         ]  
  33.                     },  
  34.                     {  
  35.                         xtype:"panel",  
  36.                         title:"",  
  37.                         columnWidth:0.3,  
  38.                         layout:"form",  
  39.                         items:[  
  40.                             {  
  41.                                 xtype:"textfield",  
  42.                                 fieldLabel:"用户名称",  
  43.                                 anchor:"100%"  
  44.                             },  
  45.                             {  
  46.                                 xtype:"datefield",  
  47.                                 fieldLabel:"生效日期",  
  48.                                 anchor:"100%"  
  49.                             }  
  50.                         ]  
  51.                     },  
  52.                     {  
  53.                         xtype:"panel",  
  54.                         title:"",  
  55.                         columnWidth:0.3,  
  56.                         layout:"form",  
  57.                         items:[  
  58.                             {  
  59.                                 xtype:"textfield",  
  60.                                 fieldLabel:"用户密码",  
  61.                                 anchor:"100%"  
  62.                             },  
  63.                             {  
  64.                                 xtype:"datefield",  
  65.                                 fieldLabel:"失效日期",  
  66.                                 anchor:"100%"  
  67.                             }  
  68.                         ]  
  69.                     }  
  70.                 ]  
  71.             },  
  72.             {  
  73.                 xtype:"form",  
  74.                 title:"我的表单",  
  75.                 labelWidth:100,  
  76.                 labelAlign:"left",  
  77.                 layout:"form",  
  78.                 region:"south",  
  79.                 height:300,  
  80.                 autoScroll:true,  
  81.                 collapsible:true,  
  82.                 tbar:[  
  83.                     {  
  84.                         xtype:"buttongroup",  
  85.                         title:"",  
  86.                         layout:"table",  
  87.                         items:[  
  88.                             {  
  89.                                 text:"增加"  
  90.                             }  
  91.                         ]  
  92.                     },  
  93.                     " ",  
  94.                     {  
  95.                         xtype:"buttongroup",  
  96.                         title:"",  
  97.                         layout:"table",  
  98.                         items:[  
  99.                             {  
  100.                                 text:"删除"  
  101.                             }  
  102.                         ]  
  103.                     }  
  104.                 ]  
  105.             },  
  106.             {  
  107.                 title:"",  
  108.                 region:"west",  
  109.                 width:2  
  110.             },  
  111.             {  
  112.                 title:"",  
  113.                 region:"east",  
  114.                 width:2  
  115.             }  
  116.         ]  
  117.         Ext.MyViewport.superclass.initComponent.call(this);  
  118.     }  
  119. })  
  120. var port=new Ext.MyViewport();  
  121. })  

上面的js文件跟拷出来的差不多，只是加了一个

Ext.onReady(function() {

  /*

    这里是你拷出来的代码，请粘贴在这里

  */

  var port=new Ext.MyViewport();

});

js就这么多了，html文件或是其他什么页面文件没有什么特殊的，只要把extjs包和上面的js引进来就可以了，我这里是一个viewport，所以连

都可以不用，如果是其他的可能要加一个div，然后在js中加入renderTo:属性。

好了，页面可以显示了。

ext designer自动生成代码的使用 Ext进度条的使用 自动生成你自己的时钟 - 自动生成你自己的时钟。 自动生成你自己的时钟 word的自动生成目录 extbuilder插件自动生成代码在jsp中显示 word使用技巧（三）--中文摘要自动生成 API生成GUID的代码 在线自动生成的音乐播放器 在线自动生成的音乐播放器 word2007自动生成目录的操作 在线自动生成的音乐播放器。。 在线自动生成的音乐播放器 Word自动生成目录的方法 android使用ant自动打包(更改java文件中的属性值,批量自动生成) .NET中生成二维表格的代码 在应用中使用Ext Loader | 论文自动生成目录 自动生成个性印章 自动生成艺术照 让多页表自动生成表头 论文自动生成目录 怎样自动生成目录