FormPanelTest.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>FormTest</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 language="javascript" type="text/javascript">
Ext.onReady(function(){
function checkNameFn(v,o){/*这个validation方法是修改后的，Ext2.0中不支持参数o*/
function successFn(v,p){
if(!eval(v.responseText)){
o.markInvalid();
};
};
function failureFn(v,p){
o.markInvalid();
};
Ext.Ajax.request({
url: 'http://127.0.0.1:8080/CsssWeb/checker.jsp',
success: successFn,
failure: failureFn,
params: { checkValue: v }
});
return true;
}
var nameField = new Ext.form.NumberField({
fieldLabel : 'ID',
name: 'numField',
width : 120,
value : 0,
validationEvent : 'onblur',
allowBlank : false
});
var nameField1 = new Ext.form.TextField({
fieldLabel : '名称',
name: 'nameField',
width : 120,
allowBlank : false,
validationEvent : 'onblur',
validator : checkNameFn
});
var formPanel=new Ext.form.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: 'Simple Form',
bodyStyle:'padding:10px 10px 10px',
labelAlign : 'right',
width: 350,
defaults: {width: 230},
items : [
nameField,
nameField1
],
buttonAlign : 'center',
buttons: [
{
text : '提交',
listeners : {
click : function(){formPanel.getForm().doAction('submit',{
url:'http://127.0.0.1:7001/CsssWeb/jsonData.jsp',
waitMsg:'Saving Data...',
clientValidation : false
});
}
}
},
{
text : '重填',
listeners : {
click : function(){formPanel.getForm().getEl().dom.reset();}
}
}
]
});
formPanel.render(Ext.getBody());
});
</script>
</head>
<body>
</body>
</html>
checker.jsp
<%=true|false%>
可以在此Jsp中加入判断逻辑最后返回 true|false。
JsonData.jsp
返回Json数据，数据格式如下
{
success : false|false,
errors : {
nameField: "Client not found",
numField: "Client not found"
}|null
}
分享到：
相关推荐
对于更复杂的需求，如动态添加或删除表单字段，FormPanel 提供了`add`和`remove`方法。同时，`loadRecord`方法可以用来从记录对象中加载表单数据，而`getValues`和`getRecord`则用于获取当前表单的值或转换为记录...
- 使用`add()`方法将字段添加到FormPanel的布局中。布局管理器（如Fit布局或Table布局）会负责在界面上正确地显示新字段。 - 更新表单布局，确保新字段的位置和大小得到正确处理。 - 如果需要，可以调用`doLayout...
在ExtJS中，我们可以通过继承FormPanel和Store类，然后重写或添加方法来实现自我扩展。例如，我们可能想要增加自定义验证规则，优化数据加载逻辑，或者添加特定的事件处理。 实现自我扩展FormPanel时，我们可以创建...
1. **form layout**：设置`layout: 'form'`，让formpanel使用form布局，这是一种默认的布局方式，自动根据组件宽度进行排列。 2. **table layout**：若要切换到table布局，需设置`layout: { type: 'table', columns...
在用户填写完表单后，我们可以使用`FormPanel`的`submit`方法，它会使用Ajax方式将表单数据提交到服务器。 关于Google Maps集成，Sencha Touch虽然没有内置的Google Maps组件，但我们可以借助HTML5的`<iframe>`或者...
3. **更新验证状态**：如果在表单已经初始化并显示的情况下添加字段，可能需要手动触发FormPanel的验证，可以使用`formPanel.getForm().isValid()`来检查整个表单是否有效。 4. **错误处理**：当验证失败时，EXT JS...
本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局，即在一个表单中元素能够按照列分布，形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...
在EXTJS4中，FormPanel是一个非常重要的组件，用于创建包含表单元素的用户界面。在某些场景下，我们可能...在进行EXTJS开发时，深入理解组件的工作原理和API使用，可以帮助我们更好地设计和实现复杂的用户界面逻辑。
在Extjs4中，可以使用`form.load()`方法将JSON数据加载到FormPanel中。这个方法接收一个配置对象作为参数，该对象通常包括URL、请求类型（GET或POST）、成功回调函数和失败回调函数等属性。当后端服务器返回JSON数据...
本文将详细介绍两种在ExtJS formpanel中加载数据的方法，以供开发者参考。 ### 方法一：使用`loadRecord()`加载数据 当formpanel的数据源与一个`Ext.data.Model`实例（通常来自`Ext.grid.Panel`的行数据）相同，...
2. 使用`getForm()`方法获取FormPanel的内部BasicForm实例。 3. 通过BasicForm的`url`属性动态地设置提交地址。 这样，我们就可以灵活地为同一个FormPanel组件指定不同的提交路径，提高了代码的可维护性和组件的...
ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例，然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 4. **表单提交过程** - **创建表单组件**：首先，定义一个FormPanel，并在其...
使用`add`方法将字段添加到表单容器中： ```javascript formPanel.add(textField); formPanel.doLayout(); // 重新布局以显示新添加的字段 ``` 4. **监听和处理事件**： 我们可以监听用户的交互，比如字段的...
这个压缩包文件包含了一些EXT4文件系统使用中的常见方法和技巧，主要分为四个部分：grid、function、data和util。 1. **Grid**： Grid在EXT中通常指的是数据网格，用于展示和管理大量结构化数据。这部分可能包含了...
在Ext JS中，`Ext.form_load`涉及到的主要知识点是FormPanel的数据加载机制，这包括了对FormPanel的form对象、BasicForm、doAction方法、Ext.form.Action对象以及JsonReader的使用。以下是对这些概念的详细解释： 1...
当使用`Ext.FormPanel`的`getForm().submit()`方法进行异步提交时，主要特点是： - **自动处理表单数据**：`getForm().submit()`会自动获取表单内的所有字段值，无需手动构建参数对象。 - **内置验证**：在提交前...
### Extjs 属性方法详解 #### 一、`Ext.form.Action` 类 `Ext.form.Action` 是用于处理表单操作的类，主要包括提交和加载数据的功能。 - **属性：** - `success`: 表示操作成功时的回调函数。 - `failure`: ...
标题 "FCKeditor结合extjs实例" 描述的是一个实际项目中使用的技术组合，涉及到的主要是两个前端富文本编辑器库：FCKeditor 和 ExtJS。这个实例表明在开发企业级网站时，如何将这两者有效地整合以实现复杂的用户界面...
在使用ExtJS进行界面开发的过程中，常常会遇到需要在文本框后面附加单位的情况。例如，在输入数量时需要显示“个”、“人”等单位。这样的设计不仅提高了用户体验，还使得数据的含义更加清晰明确。然而，默认情况下...