2010-08-20 11:24
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:属性。
好了,页面可以显示了。
|