Extjs的FORM表单与window窗口问题-修改-增加
//人员表单
var userForm = new Ext.form.FormPanel({
border: false,
defaultType:'textfield',
layout: {
type: 'table',
columns: 2
},
padding: "40 24 40 24",
items: [{
xtype: "hidden",
name: "userId"
},{
fieldLabel: "姓名",
labelWidth: 80,
width: 250,
height: 28,
padding: "10 0 0 0",
afterLabelTextTpl: required,
allowBlank: false,
blankText: "请输入姓名!",
msgTarget: "side",
name: "name"
},{
xtype: "combo",
fieldLabel: "性别",
name: "sex",
hiddenName: "sex",
emptyText: "请选择性别",
width: 250,
labelWidth: 80,
height: 28,
padding: "10 0 0 30",
queryMode : 'local', //指定数据来源
editable: false,
triggerAction: 'all',
value: 'sex',
displayField: 'sexName', //显示的字段
valueField: 'sexId', //字段对应的ID
store: Ext.create("Ext.data.Store", {
fields: ['sexId','sexName'],
data: [{"sexId": 0, "sexName": "女"},
{"sexId": 1, "sexName": "男"}]
})
}
// 省略后面内容
});
//添加人员win
var addUserWin = function(){
//userForm.form.reset();
if(!newUserWin){
newUserWin=new Ext.Window({
title: "人员注册-新增",
draggbale: false,
border: false,
width: 600,
plain : true,
modal: true, //是否模态窗口,默认为false
resizable: false, //是否可以调整大小
layoutOnTabChange : true,
autoScroll:true,
collapsible : true, // 允许缩放条
closable : true,
closeAction : 'close',
items: userForm,
buttonAlign: "center",
buttons: [{
text: "保存",
padding: "5 0 5 0",
handler: function(){
if(userForm.getForm().isValid()){
userForm.getForm().submit({
submitEmptyText: false, //防止传入 emptyText的值
url: '../../user/addUser',
waitTile: '提示',
waitMsg: '正在提交信息,请稍等...',
success: function(form,action){
if(action.result == true){
newUserWin.close();
userForm.form.reset();
userStore.load();
}
},
failture: function(form,action){
msg('提示', '添加信息失败!');
}
});
}
}
},{
text: "取消",
padding: "5 0 5 0",
handler: function(){
newUserWin.close();
}
}]
});
}
newUserWin.show();
}
//修改人员win
var editUserWin = function(){
//if(!updateUserWin){
userForm.form.reset();
updateUserWin=new Ext.Window({
title: '人员注册-修改',
draggbale: false,
border: false,
width: 600,
plain : true,
modal: true, //是否模态窗口,默认为false
resizable: false, //是否可以调整大小
layoutOnTabChange : true,
autoScroll:true,
collapsible : true, // 允许缩放条
closable : true,
closeAction : 'close',
items: userForm,
buttonAlign: "center",
buttons: [{
text: "保存",
padding: "5 0 5 0",
handler: function(){
if(userForm.getForm().isValid()){
userForm.getForm().submit({
submitEmptyText: false, //防止传入 emptyText的值
url: '../../user/addUser',
waitTile: '提示',
waitMsg: '正在保存信息,请稍等...',
success: function(fp,o){
if(o.result == true){
updateUserWin.close();
userForm.form.reset();
userStore.load();
}
},
failture: function(){
msg('提示', '保存信息失败!');
}
});
}
}
},{
text: "取消",
padding: "5 0 5 0",
handler: function(){
updateUserWin.close();
}
}]
});
//}
updateUserWin.show();
}
这样两个window用同一个form就会出现问题。第一次打开新增win正常,然后在打开修改也正常 ,接下来在打开新增就不能显示form的内容了。修改win正常 好像是不能创建form了。这是怎么回事啊。 小弟分少知道的麻烦帮忙解答下 谢谢了。
var userForm = new Ext.form.FormPanel({
border: false,
defaultType:'textfield',
layout: {
type: 'table',
columns: 2
},
padding: "40 24 40 24",
items: [{
xtype: "hidden",
name: "userId"
},{
fieldLabel: "姓名",
labelWidth: 80,
width: 250,
height: 28,
padding: "10 0 0 0",
afterLabelTextTpl: required,
allowBlank: false,
blankText: "请输入姓名!",
msgTarget: "side",
name: "name"
},{
xtype: "combo",
fieldLabel: "性别",
name: "sex",
hiddenName: "sex",
emptyText: "请选择性别",
width: 250,
labelWidth: 80,
height: 28,
padding: "10 0 0 30",
queryMode : 'local', //指定数据来源
editable: false,
triggerAction: 'all',
value: 'sex',
displayField: 'sexName', //显示的字段
valueField: 'sexId', //字段对应的ID
store: Ext.create("Ext.data.Store", {
fields: ['sexId','sexName'],
data: [{"sexId": 0, "sexName": "女"},
{"sexId": 1, "sexName": "男"}]
})
}
// 省略后面内容
});
//添加人员win
var addUserWin = function(){
//userForm.form.reset();
if(!newUserWin){
newUserWin=new Ext.Window({
title: "人员注册-新增",
draggbale: false,
border: false,
width: 600,
plain : true,
modal: true, //是否模态窗口,默认为false
resizable: false, //是否可以调整大小
layoutOnTabChange : true,
autoScroll:true,
collapsible : true, // 允许缩放条
closable : true,
closeAction : 'close',
items: userForm,
buttonAlign: "center",
buttons: [{
text: "保存",
padding: "5 0 5 0",
handler: function(){
if(userForm.getForm().isValid()){
userForm.getForm().submit({
submitEmptyText: false, //防止传入 emptyText的值
url: '../../user/addUser',
waitTile: '提示',
waitMsg: '正在提交信息,请稍等...',
success: function(form,action){
if(action.result == true){
newUserWin.close();
userForm.form.reset();
userStore.load();
}
},
failture: function(form,action){
msg('提示', '添加信息失败!');
}
});
}
}
},{
text: "取消",
padding: "5 0 5 0",
handler: function(){
newUserWin.close();
}
}]
});
}
newUserWin.show();
}
//修改人员win
var editUserWin = function(){
//if(!updateUserWin){
userForm.form.reset();
updateUserWin=new Ext.Window({
title: '人员注册-修改',
draggbale: false,
border: false,
width: 600,
plain : true,
modal: true, //是否模态窗口,默认为false
resizable: false, //是否可以调整大小
layoutOnTabChange : true,
autoScroll:true,
collapsible : true, // 允许缩放条
closable : true,
closeAction : 'close',
items: userForm,
buttonAlign: "center",
buttons: [{
text: "保存",
padding: "5 0 5 0",
handler: function(){
if(userForm.getForm().isValid()){
userForm.getForm().submit({
submitEmptyText: false, //防止传入 emptyText的值
url: '../../user/addUser',
waitTile: '提示',
waitMsg: '正在保存信息,请稍等...',
success: function(fp,o){
if(o.result == true){
updateUserWin.close();
userForm.form.reset();
userStore.load();
}
},
failture: function(){
msg('提示', '保存信息失败!');
}
});
}
}
},{
text: "取消",
padding: "5 0 5 0",
handler: function(){
updateUserWin.close();
}
}]
});
//}
updateUserWin.show();
}
这样两个window用同一个form就会出现问题。第一次打开新增win正常,然后在打开修改也正常 ,接下来在打开新增就不能显示form的内容了。修改win正常 好像是不能创建form了。这是怎么回事啊。 小弟分少知道的麻烦帮忙解答下 谢谢了。
...全文
相关推荐
使用OOP的方式扩展ExtJS UI组建 - 更新版
首先,理解ExtJS的基础是至关重要的。ExtJS提供了一套完整的组件模型,包括窗口(Window)、面板(Panel)、表格(Grid)、表单(Form)等,这些组件都是基于OOP设计的。
Extjs 性能优化 High Performance ExtJs
、查看等功能,这些功能通常需要弹出窗口(window)。
extjs3 window窗口修改完退出提示是否保存
检查数据是否修改: 可以通过比较当前表单数据与初始数据来判断是否进行了修改。
extjs中form与grid交互数据(record)的方法
ExtJS中Form与Grid交互数据(Record)的方法ExtJS是一款功能强大且灵活的JavaScript框架,广泛应用于Web应用程序开发中。在ExtJS中,Form和Grid是两个非常重
Extjs 4.x 得到form CheckBox 复选框的值
在给定的文件中,具体到操作层面,我们看到一个Extjs应用实例,其中定义了一个Extjs窗口(Window),这个窗口包含了一个表单面板(FormPanel)。


