ext designer自动生成代码的使用

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

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

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

Ext.MyViewport=Ext.extend(Ext.Viewport ,{xtype:"viewport",layout:"border",initComponent: function(){this.items=[{xtype:"form",title:"我的表单",labelWidth:100,labelAlign:"left",layout:"column",region:"center",height:689,items:[{xtype:"panel",title:"",columnWidth:0.3,layout:"form",items:[{xtype:"textfield",fieldLabel:"用户编码",anchor:"100%"},{xtype:"textfield",fieldLabel:"确认密码",anchor:"100%"}]},{xtype:"panel",title:"",columnWidth:0.3,layout:"form",items:[{xtype:"textfield",fieldLabel:"用户名称",anchor:"100%"},{xtype:"datefield",fieldLabel:"生效日期",anchor:"100%"}]},{xtype:"panel",title:"",columnWidth:0.3,layout:"form",items:[{xtype:"textfield",fieldLabel:"用户密码",anchor:"100%"},{xtype:"datefield",fieldLabel:"失效日期",anchor:"100%"}]}]},{xtype:"form",title:"我的表单",labelWidth:100,labelAlign:"left",layout:"form",region:"south",height:300,autoScroll:true,collapsible:true,tbar:[{xtype:"buttongroup",title:"",layout:"table",items:[{text:"增加"}]}," ",{xtype:"buttongroup",title:"",layout:"table",items:[{text:"删除"}]}]},{title:"",region:"west",width:0},{title:"",region:"east",width:0}]Ext.MyViewport.superclass.initComponent.call(this);}})

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

 Ext.onReady(function() {Ext.MyViewport=Ext.extend(Ext.Viewport ,{xtype:"viewport",layout:"border",initComponent: function(){this.items=[{xtype:"form",title:"我的表单",labelWidth:100,labelAlign:"left",layout:"column",region:"center",height:689,items:[{xtype:"panel",title:"",columnWidth:0.3,layout:"form",items:[{xtype:"textfield",fieldLabel:"用户编码",anchor:"100%"},{xtype:"textfield",fieldLabel:"确认密码",anchor:"100%"}]},{xtype:"panel",title:"",columnWidth:0.3,layout:"form",items:[{xtype:"textfield",fieldLabel:"用户名称",anchor:"100%"},{xtype:"datefield",fieldLabel:"生效日期",anchor:"100%"}]},{xtype:"panel",title:"",columnWidth:0.3,layout:"form",items:[{xtype:"textfield",fieldLabel:"用户密码",anchor:"100%"},{xtype:"datefield",fieldLabel:"失效日期",anchor:"100%"}]}]},{xtype:"form",title:"我的表单",labelWidth:100,labelAlign:"left",layout:"form",region:"south",height:300,autoScroll:true,collapsible:true,tbar:[{xtype:"buttongroup",title:"",layout:"table",items:[{text:"增加"}]}," ",{xtype:"buttongroup",title:"",layout:"table",items:[{text:"删除"}]}]},{title:"",region:"west",width:2},{title:"",region:"east",width:2}]Ext.MyViewport.superclass.initComponent.call(this);}})var port=new Ext.MyViewport();})

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

Ext.onReady(function() {

  /*

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

  */

  var port=new Ext.MyViewport();

});

js就这么多了，html文件或是其他什么页面文件没有什么特殊的，只要把extjs包和上面的js引进来就可以了，我这里是一个viewport，所以连<div>都可以不用，如果是其他的可能要加一个div，然后在js中加入renderTo:属性。

好了，页面可以显示了。