项目中使用Ext Designer Preview 创建extjs

在EXTJS 库中通过完全手工编写。受js调试困难一级非可视化的。工作效率比较低。故采用Ext Designer Preview  可视化编辑器进行操作。虽然其为可视化。可是就个人操作后感觉有时可以集合手工修改那么会更好的。

eg:用Ext Designer Preview 生成如下代码：

Ext.MyWindow=Ext.extend(Ext.Window ,{
xtype:"window",
 title:"我的窗口",
 width:542,
 height:358,
 initComponent: function(){
  this.items=[
   {
    xtype:"container",
    autoEl:"div",
    items:[
     {
      xtype:"form",
      title:"用户注册",
      labelWidth:100,
      labelAlign:"right",
      layout:"form",
      width:500,
      items:[
       {
        xtype:"textfield",
        fieldLabel:"用户名",
        anchor:"60%",
        width:200
       },
       {
        xtype:"textfield",
        fieldLabel:"年龄",
        anchor:"60%"
       },
       {
        xtype:"textfield",
        fieldLabel:"家庭住址",
        anchor:"60%"
       }
      ]
     }
    ]
   }
  ]
  Ext.MyWindow.superclass.initComponent.call(this);
 }
})

 

 

其实我们手工可以把它通过继承Ext.MyWindow=Ext.extend(Ext.Window 创建窗体改成new Ext.windows即可。减少一定的工作量