ExtJS的extend（Ext Designer的运用）-JavaSript-爱易网页

ExtJS的extend（Ext Designer的运用）

日期：2014-05-16　浏览次数：20392 次

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.? 预览

综合使用

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ExtJS的extend（Ext Designer的运用）

相关资料更多>

推荐阅读更多>