`
- 浏览:
3921 次
- 性别:
- 来自:
河南
-
extJs中关于formPanel动态添加组件的验证问题
1.在用extJs的formPanel动态添加组件的时候,发现动态添加的组件验证没法通过,网上找了半天才将这个问题解决。
1.源代码如下:
Ext.onReady(function() {
Ext.QuickTips.init();
testWin = new Ext.Window({
func: "null",
title: "题库信息",
width: 500,
height: 420,
maximizable: true,
closeAction: "hide",
resizable: false,
plain: true,
modal: true,
layout: "fit",
items:{
xtype: "form",
id: "testForm",
layout: "form",
frame: true,
border: false,
autoScroll: true,
labelWidth: 90,
width: 900,
items: [
new Ext.form.FieldSet({
name: 'testFieldSet',
autoHeight: true,
items: [
{
layout:'column',
items:[
{
columnWidth : .9, // 该列有整行中所占百分比
layout : "form",
items : [
{
xtype : "textfield",
anchor: '90%',
name : "testtextvalid",
fieldLabel: "testDyn",
value:null,
allowBlank: false
}
]
},
{
columnWidth : .1, // 该列有整行中所占百分比
layout : "form",
items : [{
xtype:"button",
anchor: '90%',
text:"删除",
handler:function(){
var testForm = testWin.get("testForm");
testForm.remove(this.ownerCt.ownerCt.ownerCt);
}
}]
}
]
}
]
})
]
},
buttons: [
{
text: "添加选项",
width: 80,
handler: function() {
var testForm = testWin.get("testForm");
var testFieldSet = new Ext.form.FieldSet({
name: 'testFieldSet',
autoHeight: true,
items: [
{
layout:'column',
items:[
{
columnWidth : .9, // 该列有整行中所占百分比
layout : "form",
items : [
{
xtype : "textfield",
anchor: '90%',
name : "testtextvalid",
fieldLabel: "testDyn",
value:null,
allowBlank: false
}
]
},
{
columnWidth : .1, // 该列有整行中所占百分比
layout : "form",
items : [{
xtype:"button",
anchor: '90%',
text:"删除",
handler:function(){
var testForm = testWin.get("testForm");
testForm.remove(this.ownerCt.ownerCt.ownerCt);
}
}]
}
]
}
]
});
testForm.add(testFieldSet); //add the fieldset to the formpanel
testFieldSet.doLayout();
testForm.doLayout();
// 以下是关键代码
testFieldSet.form = testForm.getForm();
testForm.initFields.call(testFieldSet);
}
},{
text: "确定",
width: 80,
handler: function() {
// 进行验证
var valid = testWin.get("testForm").getForm().isValid();
alert(valid);
}
}],
listeners: {
show: function(obj) {
// 题目信息窗口输入信息验证
Ext.form.Field.prototype.msgTarget = "under";
// 默认校验,必填项标红
testWin.get("testForm").getForm().isValid();
},
hide: function(obj) {
// 表单重置
testWin.get("testForm").getForm().reset();
}
}
});
function showWin(){
testWin.show();
}
showWin();
});
//]]>
</script>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...
FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...
在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...
- **配置表单行为**:为FormPanel设置action属性,指定提交的URL,或者在提交事件中动态设置。 - **监听提交事件**:使用`form.submit()`方法触发表单提交,传入一个包含回调函数的对象,处理成功和失败的情况。 ...
EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns.add()`或`columns.remove()`方法实现。例如,你可以根据后端返回的数据结构来决定Grid中显示哪些列。此外,`reconfigure()`方法可以用来...
这种做法的好处在于,我们可以复用同一个FormPanel组件,只需在不同的场景下改变其提交的目标URL,提高了代码的可重用性和灵活性。 在实际项目中,可能还需要处理其他一些细节,例如表单的验证、错误处理、以及提交...
EXTJS的上传组件通常是基于EXTJS的FormPanel和FileField组件构建的,FileField组件可以设置为多选模式,从而支持批量选择文件。 首先,我们需要创建一个EXTJS的FormPanel实例,其中包含一个配置为`multiple: true`...
Extjs对分页、表单验证、表单组件的布局与初始化都提供了详细的指导,使得表单元素的开发更加高效。 表格组件GridPanel是Extjs中的亮点之一,它不仅可以展示大量数据,还支持复杂的列模型和行操作。此外,GridPanel...
这篇博客“FormPanel的插入与删除”显然探讨了如何在FormPanel中动态添加和移除字段,这对于构建可扩展和动态的用户界面至关重要。在ExtJS中,FormPanel提供了丰富的功能,如数据验证、表单提交以及与服务器端的数据...
在ExtJS中,我们可以利用FormPanel组件来构建这个登录界面,同时配合Field组件(如TextField)来处理输入。 首先,创建一个FormPanel实例,设置其布局为fit(适应布局),然后添加TextField组件分别对应用户名和...
- **Ext.form.FormPanel类**: 介绍了FormPanel组件的特点及其配置选项。 - **提交表单至服务器**: 讲解了如何将表单数据提交给服务器端进行处理。 #### 更多表单组件 除了基本的输入框外,Extjs还提供了许多其他...
本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...
6. **FormPanel**:用于创建表单,支持各种表单元素,如文本框、选择框、日期选择器等,以及表单验证和提交。 7. **Ajax请求**:Ext.Ajax模块提供了异步请求接口,方便与服务器进行数据交互。 8. **事件处理**:...
使用ExtJS的FormPanel和TextArea组件可以轻松创建这些元素,并通过监听事件来处理用户的输入和发送行为。 WebSocket的实现通常涉及到后端服务器的配置。服务器端需要使用支持WebSocket的库,如Node.js的`ws`库,...
6. **表单组件**:ExtJS的FormPanel提供了丰富的表单元素,如文本框、下拉框、复选框等,并支持验证、提交等功能,使得创建复杂的表单变得轻松。 7. **图表组件**:虽然ExtJS 2.1的图表功能相对较弱,但仍然提供了...