开始摸索着将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
分享到:
相关推荐
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
//第二句的目的就是设置控件的错误信息显示位置,主要可选的位置有: var tdate = new Ext.form.DateField({ fieldLabel: ‘日期’, emptyText: ‘请选择日期’, format: ‘Y-m-d’, disabledDays: [0, 7] });...
8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备...
在使用ExtJs开发时会遇到这样的问题,后台传来一个java对象,里面有一个date类型的数据,现在要显示到页面上,我们该如何写才能不用将date转换成string的直接在页面上显示。下面解决办法:例如:在员工查询页面上,...
一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 ...4.2 FormPanel和BasicForm详解 77 4.3 EXT支持的控件 77 4.3.1 控件继承图 77 4.3.2 表单控件 78 4.3.3 基本输入控
下面是一个我遇到问题代码的简化版本,没有经过测试,大概意思是要是在form里想控制不显示表单,用remove()方法有效 代码如下: new Ext.form.FormPanel({ id : ‘ReportForm’,items : [{ {id:”001″}, {id:”002″...
使用到的Ext组件 这个Demo涉及到Ext中的GridPanel,FormPanel和Window三个组件。效果图现在开始讲解代码,首先看一下创建GridPanel的代码片段 代码如下://定义数据列表面板类 PersonListGridPanel = Ext.extend(Ext...
当然我们可以使用 Ext.form.TextField,然后设置成 ReadOnly,不过这样子的显示效果不是很好,因为始终会有个输入框。所以我们必须使用 Ext.form.DisplayField,但是 Ext.form.DisplayField 没有一个format的属性,...
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。...