ExtJS4 Form中本地hiddenfield使用教程

在利用 Ext JS 4 进行实际开发时，表单（Form）组件的使用方式非常灵活，特别是一些无需用户直接输入、却需要在提交时自动携带数据的隐藏字段（hiddenfield）。本文将通过一个本地示例，详细拆解其实现细节——代码虽短，但背后的逻辑值得深入理解。

先来看一张效果图，便于对照理解：

下方代码展示了如何在页面中创建一个包含隐藏字段的表单。注意观察其结构：一个常规的文本输入框（name 字段），搭配一个隐藏字段（age 字段），最后通过提交按钮将数据发送出去。

复制代码 代码如下:

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.form.Panel",{
title:'本地hiddenfield实例',
renderTo:'formDemo',
bodyPadding:'5 5 5 5',
height:100,
width:270,
frame:true,
defaults:{
labelSeparator :": ",
labelWidth : 70,
width : 200,
allowBlank: false,
msgTarget : 'side',
labelAlign:'left'
},
items:[{
xtype:'textfield',
name:'name',
fieldLabel:'name',
value:'USPCAT.COM'
},{
xtype:'hiddenfield',
name:'age',
value:'1'
}],
buttons:[{
text:'提交',
handler:function(){
this.up("form").getForm().submit({//this指当前组件（按钮）,up是上一个组件中找（form）
params:{
info:'age是隐藏字段'
}
});
}
}]
});
})

几个关键点值得重点说明：

• 隐藏字段的定义方式：xtype 设置为 'hiddenfield'，该组件在界面上不会渲染任何输入框，但会作为表单字段存在，提交时自动携带其 name 和 value 属性。
• 表单的默认配置：在 defaults 中设置了 labelWidth、allowBlank 等参数，这意味着所有子组件都会继承这些配置——不过隐藏字段不受 label 相关属性影响，它没有标签且不参与空值校验。
• 提交时附加额外参数：在按钮的 handler 中，通过 params 传入了一个 info 字段，用于演示“提交时追加自定义参数”的能力，实际业务中可携带更多辅助数据。
• up 方法的使用技巧：this.up("form") 表示从当前按钮向上查找名为 "form" 的父组件，此处实际找到的是 Ext.form.Panel 本身，随后调用 getForm().submit() 执行提交。这种写法在嵌套组件结构中非常常见且实用。

这个示例虽然规模较小，但已覆盖了 hiddenfield 的基本用法以及表单提交的典型模式。在实际项目中，隐藏字段常用于保存 ID、状态信息、时间戳等无需用户干预的数据，既方便后端处理，又能保持前端界面的简洁美观。如果你在开发中遇到类似需求，直接参考这段代码即可快速上手。