Extjs 自定义组件实例
2012-07-18 16:41
411 查看
最近参与的项目中用到Extjs,研究了几天, 发现实际开发中很有必要将各种布局的组件一起作为自定义组件使用,以提高代码重用性。
项目中的‘添加用户’功能中, 由于用户信息比较多,还同时可能要注册其账号信息,所以想在添加的时候分多步填写最后提交。
翻阅Extjs3.2的example发现没有满足要求的组件。于是试着书写一个。我暂时给它取名叫StepForm。
1.Extjs中可以模拟java中的集成关系,从而可以让自定义的‘类’集成自Extjs中的‘类’,比如Ext.Panel,Ext.Window等等。
于是,要做的第一步就是新建一个StemForm.js文件,然后用Ext.extend(Ext.Panel,{})集成Ext中的Panel。
[javascript] view
plaincopy
Ext.ns("Util");
Util.StepForm = Ext.extend(Ext.Panel,{
//重写构造函数,conf为自定义的参数
constructor:function(conf){},
//自定义函数
register:function(){}
))
2.重写Panel的构造函数constructor,在该函数中书写Util.StepForm.superclass.constructor.apply(this,[{...}])来提交自定义的参数。
[javascript] view
plaincopy
constructor:function(conf){
var items = conf.items; //点击左边连接可以切换的不同的表单,
var number = conf.number; //列表是否显示数字
//...
//若干操作
Util.StepForm.superclass.constructor.apply(
this,[{
//这里开始就是你要自定义的布局或者元素了,因为该类本身继承自Ext.Panel,所以它也可以添加跟多子组件并布局。
width:conf.width,
height:conf.height,
layout:'border',
items:[
new Ext.Panel({
id:'nav',
title:ltitle,
region:'west',
width:navWidth,
html:link
}),
//...省略
]
}]
);
//若干操作省略
}
3.当自定义StepForm类写好后,可以与使用Ext本身组件一样的方式使用 var stepForm = new Util.StepForm({});
最后我把完整代码输出:
StepForm.js:
[javascript] view
plaincopy
Ext.ns("Util");
Util.StepForm = Ext.extend(Ext.Panel,{
constructor:function(conf){
var items = conf.items; //点击左边连接可以切换的不同的表单,
var number = conf.number; //列表是否显示数字
var activeTab = conf.activeTab; //加载时的默认活动标签
var ltitle = conf.ltitle; //z左边标题
var rtitle = conf.rtitle; //右边标题
var navWidth = conf.navWidth; //导航栏的宽度
var count = activeTab; //记录当前活动项的索引
if(activeTab>items.length-1) {
alert("activeTab值大于items的数量");
return;
}
var link = ""; //显示在左边的列表html内容
var bodys = new Array();
for(var i=0; i<items.length; i++){
var item = items[i];
if(number){
if(activeTab == i){
link += "<a id='alink"+i+"' href="javascript:void(0)" mce_href="javascript:void(0)" style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold" mce_style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold">"+(i+1)+"."+item.title+"</a><br/>";
}else{
link += "<a id='alink"+i+"' href="javascript:void(0)" mce_href="javascript:void(0)" style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px" mce_style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px">"+(i+1)+"."+item.title+"</a><br/>";
}
}else{
if(activeTab == i){
link += "<a id='alink"+i+"' href="javascript:void(0)" mce_href="javascript:void(0)" style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold" mce_style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold">"+item.title+"</a><br/>";
}else{
link += "<a id='alink"+i+"' href="javascript:void(0)" mce_href="javascript:void(0)" style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px" mce_style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px">"+item.title+"</a><br/>";
}
}
//将表单收集到bodys数组
var forms = item.items;
if(!forms){
alert("缺少items属性");
return;
}
var form = item.items[0];
form.id = "form"+i;
if(activeTab != i){
form.hidden = true;
}else{
form.hidden = false;
}
bodys.push(form);
}
Util.StepForm.superclass.constructor.apply(
this,[{
width:conf.width,
height:conf.height,
layout:'border',
items:[
new Ext.Panel({
id:'nav',
title:ltitle,
region:'west',
width:navWidth,
html:link
}),
new Ext.Panel({
title:rtitle,
height:conf.height,
layout:'fit',
region:'center',
items:bodys
}),
new Ext.Panel({
autoHeight:true,
region:'south',
bbar:new Ext.Toolbar([
{xtype:'tbfill'},
{xtype:'button',id:'prev',text:'上一步',handler:function(){
navFun(count-1);
}},
{xtype:'button',id:'next',text:'下一步',handler:function(){
navFun(count+1);
}}
])
})
]
}]
);
var navFun = function(index){
if(index < 0) {
index = 0;
count = 0;
}
if(index > bodys.length-1){
index = bodys.length - 1;
count = bodys.length - 1;
}
for(var i=0; i<bodys.length; i++){
if(i == index){
Ext.getCmp("form"+i).show(true);
Ext.get("alink"+i).dom.style.fontSize = "14px";
Ext.get("alink"+i).dom.style.fontWeight = "bold";
}else{
Ext.getCmp("form"+i).hide(true);
Ext.get("alink"+i).dom.style.fontSize = "12px";
Ext.get("alink"+i).dom.style.fontWeight = "normal";
}
}
count = index;
};
this.bodys = bodys;
this.activeTab = activeTab;
this.navigate = navFun;
},
register:function(){
var activeItem = Ext.get("alink"+this.activeTab).dom.innerHTML;
var delegate = this.navigate;
//给左边导航添加单击事件
for(var i=0; i<this.bodys.length; i++){
Ext.get("alink"+i).on("click",function(e){
var i = e.target.id.substring(5);
delegate(i);
});
}
}
});
Ext.reg('stepform', Util.StepForm);
index.jsp
[java] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" mce_href="js/extjs/resources/css/ext-all.css" />
<mce:script src="js/extjs/adapter/ext/ext-base.js" mce_src="js/extjs/adapter/ext/ext-base.js"></mce:script>
<mce:script src="js/extjs/ext-all-debug.js" mce_src="js/extjs/ext-all-debug.js"></mce:script>
<mce:script src="js/StepForm.js" mce_src="js/StepForm.js"></mce:script>
<mce:script type="text/javascript"><!--
if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data:') {
Ext.BLANK_IMAGE_URL = 'js/extjs/resources/images/default/s.gif';
}
Ext.onReady(function(){
var stepForm = new Util.StepForm({
width:500,
height:300,
navWidth:130,
number:true,
activeTab:3,
ltitle:'步骤',
rtitle:'用户信息',
items:[
{
title:'基本信息',
items:[{
xtype:'form',
bodyStyle:'padding:20px',
items:[
{xtype:'textfield',fieldLabel:'姓名'},
{xtype:'textfield',fieldLabel:'电子邮件'},
{xtype:'textfield',fieldLabel:'电话'}
]
}]
},
{
title:'详细信息',
items:[{
xtype:'form',
bodyStyle:'padding:20px',
items:[
{xtype:'textfield',fieldLabel:'牛逼'},
{xtype:'textfield',fieldLabel:'牛逼'},
{xtype:'textfield',fieldLabel:'牛逼'}
]
}]
}
]
});
var win = new Ext.Window({
title:'用户添加',
width:500,
height:300,
items:[
stepForm
]
});
win.show(Ext.getBody());
stepForm.register();
});
// --></mce:script>
</head>
<body>
</body>
</html>
效果图:
项目中的‘添加用户’功能中, 由于用户信息比较多,还同时可能要注册其账号信息,所以想在添加的时候分多步填写最后提交。
翻阅Extjs3.2的example发现没有满足要求的组件。于是试着书写一个。我暂时给它取名叫StepForm。
1.Extjs中可以模拟java中的集成关系,从而可以让自定义的‘类’集成自Extjs中的‘类’,比如Ext.Panel,Ext.Window等等。
于是,要做的第一步就是新建一个StemForm.js文件,然后用Ext.extend(Ext.Panel,{})集成Ext中的Panel。
[javascript] view
plaincopy
Ext.ns("Util");
Util.StepForm = Ext.extend(Ext.Panel,{
//重写构造函数,conf为自定义的参数
constructor:function(conf){},
//自定义函数
register:function(){}
))
2.重写Panel的构造函数constructor,在该函数中书写Util.StepForm.superclass.constructor.apply(this,[{...}])来提交自定义的参数。
[javascript] view
plaincopy
constructor:function(conf){
var items = conf.items; //点击左边连接可以切换的不同的表单,
var number = conf.number; //列表是否显示数字
//...
//若干操作
Util.StepForm.superclass.constructor.apply(
this,[{
//这里开始就是你要自定义的布局或者元素了,因为该类本身继承自Ext.Panel,所以它也可以添加跟多子组件并布局。
width:conf.width,
height:conf.height,
layout:'border',
items:[
new Ext.Panel({
id:'nav',
title:ltitle,
region:'west',
width:navWidth,
html:link
}),
//...省略
]
}]
);
//若干操作省略
}
3.当自定义StepForm类写好后,可以与使用Ext本身组件一样的方式使用 var stepForm = new Util.StepForm({});
最后我把完整代码输出:
StepForm.js:
[javascript] view
plaincopy
Ext.ns("Util");
Util.StepForm = Ext.extend(Ext.Panel,{
constructor:function(conf){
var items = conf.items; //点击左边连接可以切换的不同的表单,
var number = conf.number; //列表是否显示数字
var activeTab = conf.activeTab; //加载时的默认活动标签
var ltitle = conf.ltitle; //z左边标题
var rtitle = conf.rtitle; //右边标题
var navWidth = conf.navWidth; //导航栏的宽度
var count = activeTab; //记录当前活动项的索引
if(activeTab>items.length-1) {
alert("activeTab值大于items的数量");
return;
}
var link = ""; //显示在左边的列表html内容
var bodys = new Array();
for(var i=0; i<items.length; i++){
var item = items[i];
if(number){
if(activeTab == i){
link += "<a id='alink"+i+"' href="javascript:void(0)" mce_href="javascript:void(0)" style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold" mce_style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold">"+(i+1)+"."+item.title+"</a><br/>";
}else{
link += "<a id='alink"+i+"' href="javascript:void(0)" mce_href="javascript:void(0)" style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px" mce_style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px">"+(i+1)+"."+item.title+"</a><br/>";
}
}else{
if(activeTab == i){
link += "<a id='alink"+i+"' href="javascript:void(0)" mce_href="javascript:void(0)" style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold" mce_style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:14px;font-weight:bold">"+item.title+"</a><br/>";
}else{
link += "<a id='alink"+i+"' href="javascript:void(0)" mce_href="javascript:void(0)" style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px" mce_style="display:block;cursor:pointer;padding:5px 10px;text-decoration:none;font-size:12px">"+item.title+"</a><br/>";
}
}
//将表单收集到bodys数组
var forms = item.items;
if(!forms){
alert("缺少items属性");
return;
}
var form = item.items[0];
form.id = "form"+i;
if(activeTab != i){
form.hidden = true;
}else{
form.hidden = false;
}
bodys.push(form);
}
Util.StepForm.superclass.constructor.apply(
this,[{
width:conf.width,
height:conf.height,
layout:'border',
items:[
new Ext.Panel({
id:'nav',
title:ltitle,
region:'west',
width:navWidth,
html:link
}),
new Ext.Panel({
title:rtitle,
height:conf.height,
layout:'fit',
region:'center',
items:bodys
}),
new Ext.Panel({
autoHeight:true,
region:'south',
bbar:new Ext.Toolbar([
{xtype:'tbfill'},
{xtype:'button',id:'prev',text:'上一步',handler:function(){
navFun(count-1);
}},
{xtype:'button',id:'next',text:'下一步',handler:function(){
navFun(count+1);
}}
])
})
]
}]
);
var navFun = function(index){
if(index < 0) {
index = 0;
count = 0;
}
if(index > bodys.length-1){
index = bodys.length - 1;
count = bodys.length - 1;
}
for(var i=0; i<bodys.length; i++){
if(i == index){
Ext.getCmp("form"+i).show(true);
Ext.get("alink"+i).dom.style.fontSize = "14px";
Ext.get("alink"+i).dom.style.fontWeight = "bold";
}else{
Ext.getCmp("form"+i).hide(true);
Ext.get("alink"+i).dom.style.fontSize = "12px";
Ext.get("alink"+i).dom.style.fontWeight = "normal";
}
}
count = index;
};
this.bodys = bodys;
this.activeTab = activeTab;
this.navigate = navFun;
},
register:function(){
var activeItem = Ext.get("alink"+this.activeTab).dom.innerHTML;
var delegate = this.navigate;
//给左边导航添加单击事件
for(var i=0; i<this.bodys.length; i++){
Ext.get("alink"+i).on("click",function(e){
var i = e.target.id.substring(5);
delegate(i);
});
}
}
});
Ext.reg('stepform', Util.StepForm);
index.jsp
[java] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" mce_href="js/extjs/resources/css/ext-all.css" />
<mce:script src="js/extjs/adapter/ext/ext-base.js" mce_src="js/extjs/adapter/ext/ext-base.js"></mce:script>
<mce:script src="js/extjs/ext-all-debug.js" mce_src="js/extjs/ext-all-debug.js"></mce:script>
<mce:script src="js/StepForm.js" mce_src="js/StepForm.js"></mce:script>
<mce:script type="text/javascript"><!--
if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data:') {
Ext.BLANK_IMAGE_URL = 'js/extjs/resources/images/default/s.gif';
}
Ext.onReady(function(){
var stepForm = new Util.StepForm({
width:500,
height:300,
navWidth:130,
number:true,
activeTab:3,
ltitle:'步骤',
rtitle:'用户信息',
items:[
{
title:'基本信息',
items:[{
xtype:'form',
bodyStyle:'padding:20px',
items:[
{xtype:'textfield',fieldLabel:'姓名'},
{xtype:'textfield',fieldLabel:'电子邮件'},
{xtype:'textfield',fieldLabel:'电话'}
]
}]
},
{
title:'详细信息',
items:[{
xtype:'form',
bodyStyle:'padding:20px',
items:[
{xtype:'textfield',fieldLabel:'牛逼'},
{xtype:'textfield',fieldLabel:'牛逼'},
{xtype:'textfield',fieldLabel:'牛逼'}
]
}]
}
]
});
var win = new Ext.Window({
title:'用户添加',
width:500,
height:300,
items:[
stepForm
]
});
win.show(Ext.getBody());
stepForm.register();
});
// --></mce:script>
</head>
<body>
</body>
</html>
效果图:
相关文章推荐
- vue-自定义组件传值的实例讲解
- winform自定义组件创建失败——未将对象设置引用到实例
- 带着实例继续学习(2):父子组件通信之自定义事件
- Extjs自定义组件
- ExtJS 自定义组件(二)
- extjs_09_自定义分页组件
- ExtJS(3)- 自定义组件(星级评分)
- ExtJS4.2 - 从 Hello World 到 自定义组件 -01 (为爱女伊兰奋斗)
- Android自定义组件简单实例(自定义属性)
- ExtJS 自定义组件
- extjs_10_自定义combotree组件
- Angular自定义组件实现数据双向数据绑定的实例
- Android中自定义Checkbox组件实例
- ExtJS4.2 - 从 Hello World 到 自定义组件 -01 (为爱女伊兰奋斗)
- Extjs自定义组件
- 扩展/自定义 Extjs.Toolbar 组件
- Extjs单独定义各组件的实例代码
- Extjs的一个自定义组件
- Extjs 继承Ext.Component自定义组件
- js中自定义react数据验证组件实例详解