Ext Designer生成的代码怎么用

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:属性。

好了，页面可以显示了。

评论

1 楼 辰龙吟 2012-10-12  

你好，我用EXtjs 可视化工具自动生成的代码，按你说的做，为什么会是一片黑啊？代码都是拷的你的 邮箱是：[e-mail]