开始摸索着将ext整合到项目当中,点击超连接打开的FormPanel老是问题不断,主要问题有二:
1,显示不正常。点击前三次,出现不同的效果,当点击次数>=3以后,显示正常。三次显示效果如下:
2,在firefox下第一次,第二次点击都没效果,第三次点击才显示。并且,firefox下鼠标无法进入输入框。相当于输入框都禁用了。
相关代码如下:
//增加form,window开始
Ext.get("add").on('click',function() {
var winlist;
if(!winlist){
var innerForm=new Ext.FormPanel({
labelWidth: 125, // label settings here cascade unless overridden
url:'<%=basePath%>add.ext',
frame:true,
// title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 450,
defaults: {width: 230},
layout:'form',
defaultType: 'textfield',
items: [{
fieldLabel: '姓名',
name: 'name',
allowBlank:false
},{
inputType:'password',
fieldLabel: '密码',
name: 'password',
allowBlank:false
},{
xtype:'combo',
store: new Ext.data.SimpleStore({
fields: ["retrunValue", "displayText"],
data: [[1,'男'],[2,'女']]
}),
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'请选择性别',
emptyText:'选择性别',
hiddenName:'sex',
editable: false,
triggerAction: 'all',
allowBlank:false,
fieldLabel: '性别',
name: 'sex',
anchor:'90%'},
{
fieldLabel: '电子邮件',
name: 'email',
allowBlank:false,
vtype:'email'
},
{
fieldLabel: '手机',
name: 'tel',
allowBlank:false
//vtype:'email'
}, {
fieldLabel: '电话',
name: 'phone',
allowBlank:false
//vtype:'email'
} , {
fieldLabel: '联系地址',
name: 'address',
allowBlank:false
//vtype:'email'
}
]
});
winlist=new Ext.Window({
title:'信息添加',
layout:'fit',
width:450,
height:400,
closeAction:'hide',
plain: true,
buttonAlign:'center',
buttons: [{
text:'保存',
scope:'DataType',
type:'submit',
disabled:false,
handler:function(){
innerForm.getForm().submit({
method:'POST',
waitMsg:'保存中,请稍候.....',
success:function(form,action){
grid.getView().refresh();
form.reset();
Ext.Msg.alert('信息增加','保存成功!');
this.disabled=false;
winlist.hide();
},
failure:function(){
Ext.Msg.alert('信息增加','保存失败!');
this.disabled=false;
}
}
);
}
},{
text: '关闭',
handler: function(){
winlist.hide();
}
},{
text:'重置',
handler:function(){
innerForm.getForm().reset();
}
}
]
});
winlist.add(innerForm);
}
winlist.show(this);
});
由于刚刚接触ext,上面的代码也是借鉴拼凑过来的。出先这样的问题,是在不知道如何解决。
- 描述: 第三次显示
- 大小: 20.6 KB
- 描述: 第二次显示
- 大小: 14.4 KB
- 描述: 第一次显示
- 大小: 20.7 KB
分享到:
相关推荐
本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”,帮助开发者更好地理解和运用这两种布局方式。 首先,我们要理解什么是Ext table布局。Ext table布局主要用于显示数据,它基于HTML的`<table>`...
在这个例子中,通过`new Ext.FormPanel`来创建了一个表单面板,并设置了一些关键属性: - `frame`: 设置为`true`,表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...
var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items: [] }); ``` 2. **定义表单字段**: 根据需求,我们可以定义各种类型的字段。例如,添加一个文本字段: ```javascript var ...
这篇博客将探讨如何解决EXT JS中关于FormPanel动态添加组件的验证问题。 首先,让我们理解EXT JS FormPanel的基本结构。一个FormPanel由多个字段(field)组成,每个字段都有自己的验证规则。这些规则可以是简单的...
在EXTJS框架中,`Ext.FormPanel`和`Ext.Ajax.request`提供了两种不同的异步提交方法,它们各自有其特点和适用场景。下面我们将详细探讨这两种方式的区别。 1. **Ext.FormPanel的异步提交** `Ext.FormPanel` 是...
【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和...
首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框,可以用来让用户选择多个选项。在示例中,...
在ASP.NET框架中,结合EXT库创建一个上传图片并实时显示的功能是一项常见的需求。EXT库是一个强大的JavaScript UI框架,提供了丰富的组件和交互效果,而ASP.NET则是微软开发的服务器端Web应用程序框架。以下是对这个...
5. **进度条显示**: 为了让用户了解上传进度,可以使用Ext的ProgressBar组件配合Ajax请求的事件监听。当文件上传过程中,根据服务器返回的进度信息更新进度条的状态。 6. **错误处理和验证**: 无论是前端还是后端,...
在EXT应用中实现文件上传,通常会涉及EXT的FormPanel组件和Ajax提交方式。 首先,你需要在EXT应用中创建一个FormPanel,这是一个包含表单元素的容器。在表单中,你可以添加一个FileField组件,它是一个特殊的输入...
6. **响应处理**:服务器端验证成功后,会返回一个响应,EXT3.0会处理这个响应,可能包括显示登录成功消息、重定向到其他页面或者在验证失败时显示错误信息。 7. **源码分析**:EXT3.0的源码提供了学习EXT组件用法...
【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件,它允许用户输入、编辑和验证数据。在上述代码中,`sampleFormPanel`是一个FormPanel实例,包含了多个配置属性,用于定制表单的行为和...
总结来说,“EXT3.0 JSP上传”涉及到EXT3.0的FormPanel和FileUploadField组件来构建前端文件选择和上传界面,使用EXT3.0的Ajax请求功能发送文件数据到服务器。在服务器端,JSP接收文件数据并将其保存。整个过程需要...
EXT表单,是一种基于JavaScript和Ajax技术的富客户端(Rich Client)表单处理技术,它源自EXT JS库,专门用于构建交互性强、用户体验...同时,对EXT JS的源码探索和使用相关工具,有助于提升开发技能和解决问题的能力。
在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...
例如,用户可以在FormPanel中输入检索条件,然后将结果显示在一个配置了TreeFilter的EXT Tree中。这样的设计为用户提供了直观且高效的检索界面。 总的来说,EXT TreeFilter是EXT JS框架中用于提升树形数据检索效率...
EXT JS提供了丰富的UI组件,如GridPanel(表格),FormPanel(表单),Window(弹出窗口),TabPanel(选项卡)等,这些都是构建用户界面的基础。开发者可以通过配置对象定义组件的属性,如大小、颜色、样式等,并...
var formPanel = new Ext.form.FormPanel({ items: [multiSelectComboBox], renderTo: Ext.getBody() }); ``` 在上述代码中,我们创建了一个JSON数据存储,并将其与ComboBox关联。设置`multiSelect: true`后,...
1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`:`Ext.form.Checkbox`是用于创建复选...
`renderer`参数接收一个日期格式化函数,`Ext.util.Format.dateRenderer('Y-m-d H:i:s')`表示日期将以'年-月-日 时:分:秒'的格式显示。 4. **创建GridPanel**: 最后,创建GridPanel并附加到ColumnModel和Store:...