ExtJS的extend（Ext Designer的使用）
一 Ext Designer相关
??? Ext Designer是ExtJS3.0的官方的可视化IDE，可视化拖拽控件，并生成以extend方式继承出来的控件的代码。
??? 可见： ExtJS 3.0 Designer Preview (官方的IDE可视化工具)
二 简单使用
?
1.?? 在Ext Designer中直接拖拽一个FormPanel，并获得生成的控件代码
?
2.? 以new的方式，来使用生成的控件
<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">Ext.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.? 先声明空间名
Ext.namespace("Ext.iwoo")
2.? 修改控件相关代码
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
Ext.reg('frmMy', Ext.iwoo.MyForm); ?2.? 修改使用代码
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.? 预览。效果和之前看到的还是一样。
?
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 xtypeautoEl:"div",region:"center",title:"Title from Way 2" }]});outter.render(document.body);});?
?
2.? 预览
