(20)ExtJS之Ext.form.FieldContainer容器字段
JS文件：
//4:Ext.form.FieldContainer示例,需要将多个字段或者组件作为一个表单项展现的时候
Ext.onReady(function(){
Ext.QuickTips.init();//初始化提示
Ext.create('Ext.form.FormPanel',{
title:'Ext.form.FieldContainer示例',
width:300,
frame:true,
renderTo:Ext.getBody(),
bodyPadding:5,
fieldDefaults:{//统一设置表单字段的默认属性
labelSeparator:':',//分隔符
labelWidth:60,//标签宽度
width:260,//字段宽度
msgTarget:'side'
},
defaultType:'textfield',//设置表单的默认类型
items:[{
fieldLabel:'商品名称'
},{
xtype:'fieldcontainer',
fieldLabel:'生产日期',
layout:{//设置容器字段布局
type:'hbox',
align:'middle'//垂直居中
},
combineErrors:true,//合并展示错误信息
fieldDefaults:{
hideLabel:true,//隐藏字段标签
allowBlank:false//设置字段值不允许为空
},
defaultType:'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'年',
flex:1,
inputId:'yearId'
},{
xtype:'label',
forId:'yearId',
text:'年'
},{
fieldLabel:'月',
flex:1,
inputId:'monthId'
},{
xtype:'label',
forId:'monthId',
text:'月'
},{
fieldLabel:'日',
flex:1,
inputId:'dayId'
},{
xtype:'label',
forId:'dayId',
text:'日'
}]
},
{
fieldLabel:'产地来源'
}]
});
});
jsp文件:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'JS1.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">
<!-- extjs的样式文件 -->
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css">
<!-- extjs的核心文件 -->
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script>
<!-- 国际化文件 -->
<script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="base/011_form_dateandother.js"></script>
</head>
<body>
</body>
</html>