ExtJS的extend（Ext Designer的运用）

ExtJS的extend（Ext Designer的使用）

一 Ext Designer相关

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

二简单使用

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

ExtJS的extend（Ext Designer的运用）

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的运用）

ExtJS的extend（Ext Designer的运用）

相关推荐