ExtJS的extend（Ext Designer的运用）
日期：2014-05-16 浏览次数：20405 次
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.? 预览。效果和之前看到的还是一样。
?
五 代码综合
?
1.? 具体代码
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.? 预览
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
