ExtJS的extend（Ext Designer的使用）

来源：互联网发布：淘宝首页psd模板编辑：程序博客网时间：2024/05/17 11:37

一 Ext Designer相关

Ext Designer是ExtJS3.0的官方的可视化IDE，可视化拖拽控件，并生成以extend方式继承出来的控件的代码。
可见： ExtJS 3.0 Designer Preview (官方的IDE可视化工具)

二简单使用

1. 在Ext Designer中直接拖拽一个FormPanel，并获得生成的控件代码

2. 以new的方式，来使用生成的控件

Html代码

<html>  <head>      <title>Ext JS Extends demo</title>      <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />      <script type="text/javascript" src="adapter/ext/ext-base.js"></script>      <script type="text/javascript" src="ext-all.js"></script>      <script type="text/javascript">  ExtExt.MyForm=Ext.extend(Ext.form.FormPanel ,{      xtype:"formpanel",      title:"My Form",      labelWidth:100,      labelAlign:"left",      layout:"form",      width:400,      height:250,      padding:"10px",      initComponent: function(){          Ext.MyForm.superclass.initComponent.call(this);      }  })  Ext.onReady(function(){      var m1 = new Ext.MyForm();      m1.render(document.body);  });      </script>  </head>  <body>  </body>  </html>

3. 预览。效果就和Ext Designer中所看到的一样

三添加namespace
由于控件过多，容易造成名字、属性等混淆。可使用namespace。
可见： Ext中namespace的作用

1. 先声明空间名

Js代码

Ext.namespace("Ext.iwoo")

2. 修改控件相关代码

Js代码

Ext.namespace("Ext.iwoo")    Ext.iwoo.MyForm=Ext.extend(Ext.form.FormPanel ,{      xtype:"formpanel",      title:"My Form",      labelWidth:100,      labelAlign:"left",      layout:"form",      width:400,      height:250,      padding:"10px",      initComponent: function(){          Ext.iwoo.MyForm.superclass.initComponent.call(this);      }  })    Ext.onReady(function(){      var m1 = new Ext.iwoo.MyForm();      m1.render(document.body);  });

3. 预览。效果和之前看到的一样。

四注册xtype，并使用

1. 注册xtype

Js代码

Ext.reg('frmMy', Ext.iwoo.MyForm);

2. 修改使用代码

Js代码

Ext.onReady(function(){      var outter = new Ext.Container({          autoEl:"div",          width:400,          height:250,          layout:"border",          items:[          {              xtype:"frmMy",              autoEl:"div",              region:"center",              title:"Title from Using xtype "          }          ]      });      outter.render(document.body);  });

3. 预览。效果和之前看到的还是一样。

五代码综合

1. 具体代码

Js代码

Ext.onReady(function(){      var m1 = new Ext.iwoo.MyForm({          title:"Title from Way 1"      });        var outter = new Ext.Container({          autoEl:"div",          width:400,          height:250,          layout:"border",          items:[              {                  xtype:"container",                  autoEl:"div",                  region:"north",                  height:50,                  layout:"form",                  items: [m1] // Way of Using new              },              {                  xtype:"frmMy", // Way of Using xtype                  autoEl:"div",                  region:"center",                  title:"Title from Way 2"               }          ]      });      outter.render(document.body);  });

2. 预览

综合使用

extend.zip (692 Bytes)

0 0