JavaScript
一个ExtJS的错误一直搞不明白
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区从网上找了一个extjs框架的例子，但是我在新作了一个XX管理的页面后浏览器报错，画面没法表示全，谁知道是怎么回事？
我参照的例子：
我自己做的例子：
浏览器报错：
第一次进到我写的画面时：
Uncaught TypeError: Cannot read property 'width' of undefined ext-all.js:149
点击我做的画面里的查询按钮时：
Uncaught TypeError: Cannot call method 'update' of undefined
我参照的例子：
// 科目管理
var Subject = Ext.data.Record.create([{
name : 'subjectId',
mapping : 'subjectId',
type : 'int'
}, {
name : 'subjectName',
mapping : 'subjectName',
type : 'string'
}, {
name : 'remark',
mapping : 'remark',
type : 'string'
}]);
var cm_subject = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : '科目名称',
sortable : true,
menuDisabled : true,
width : 90,
dataIndex : 'subjectName',
editor : new Ext.form.TextField({
allowBlank : false,
maxLength : 20
})
}, {
header : '备注',
id : 'remark',
dataIndex : 'remark',
menuDisabled : true,
editor : new Ext.form.TextField({
maxLength : 100
})
}]);
cm_subject.defaultSortable = false;
var window_add_subject = new Ext.Window({
title : '添加科目',
width : 350,
height : 440,
resizable : false,
autoHeight : true,
modal : true,
closeAction : 'hide',
listeners : {
'hide' : function() {
this.setTitle('添加科目');
this.findById('subject.subjectName').ownerCt.form.reset();
}
},
items : [new Ext.FormPanel({
labelWidth : 70,
labelAlign : 'right',
url : 'saveSubject.action',
border : false,
baseCls : 'x-plain',
bodyStyle : 'padding:5px 5px 0',
anchor : '100%',
defaults : {
width : 233,
msgTarget : 'side' // 验证信息显示右边
},
defaultType : 'textfield',
items : [{
fieldLabel : '科目名称',
id : 'subject.subjectName',
name : 'subject.subjectName',
allowBlank : false,
maxLength : 20
}, {
fieldLabel : '备注',
name : 'subject.remark',
xtype : 'textarea',
maxLength : 100
}],
buttonAlign : 'right',
minButtonWidth : 60,
buttons : [{
text : '添加',
handler : function(btn) {
var frm = this.ownerCt.form;
if (frm.isValid()) {
btn.disable();
var cnfield = frm.findField('subject.subjectName');
frm.submit({
waitTitle : '请稍候',
waitMsg : '正在提交表单数据,请稍候...',
success : function(form, action) {
var store = grid_subject.getStore();
var subject = new Subject({
subjectId : action.result.subjectId,
subjectName : cnfield.getValue(),
remark : form.findField('subject.remark').getValue()
});
store.insert(0, [subject]);
window_add_subject.setTitle('[ ' + cnfield.getValue() + ' ] 添加成功!!');
cnfield.reset();
btn.enable();
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '"' + cnfield.getValue() + '" ' + '名称可能已经存在!',
buttons : Ext.Msg.OK,
fn : function() {
cnfield.focus(true);
btn.enable();
},
icon : Ext.Msg.ERROR
});
}
});
}
}
}, {
text : '重置',
handler : function() {
this.ownerCt.form.reset();
}
}, {
text : '取消',
handler : function() {
this.ownerCt.ownerCt.hide();
}
}]
})]
});
var btn_add_subject = new Ext.Button({
text : '添加科目',
iconCls : 'icon-add',
handler : function() {
window_add_subject.show();
}
});
var btn_del_subject = new Ext.Button({
text : '删除科目',
iconCls : 'icon-del',
handler : function() {
var record = grid_subject.getSelectionModel().getSelected();
if (record) {
Ext.Msg.confirm('确认删除', '你确定删除该条记录?', function(btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url : 'deleteSubject.action',
params : {
subjectId : record.data.subjectId
},
success : function() {
grid_subject.getStore().remove(record);
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '删除时发生错误!',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
});
}
});
}
}
});
var btn_search_subject = new Ext.Button({
text : '查询',
iconCls : 'icon-search',
handler : function() {
ds_subject.load();
}
});
var ds_subject = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'findAllSubject.action'
}),
reader : new Ext.data.JsonReader({
root : 'root'
}, [{
name : 'subjectId',
type : 'int'
}, {
name : 'subjectName',
type : 'string'
}, {
name : 'remark',
type : 'string'
}])
});
var grid_subject = new Ext.grid.EditorGridPanel({
title : '科目管理',
iconCls : 'icon-grid',
loadMask : {
msg : '数据加载中...'
},
region : 'center',
cm : cm_subject,
ds : ds_subject,
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
enableColumnMove : false,
trackMouseOver : false,
frame : true,
autoExpandColumn : 'remark',
clicksToEdit : 1,
tbar : [btn_add_subject, '-', btn_del_subject, '-', btn_search_subject],
listeners : {
'afteredit' : function(e) {
Ext.Ajax.request({
url : 'updateSubject.action',
params : {
fieldName : e.field,
fieldValue : e.value,
subjectId : e.record.data.subjectId
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '修改数据发生错误,操作将被回滚!',
fn : function() {
e.record.set(e.field, e.originalValue);
},
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
});
}
}
});
var p_subject = {
id : 'subject-panel',
border : false,
layout : 'border',
items : [grid_subject]
};
我自己做的例子：
// XX管理
var Xx = Ext.data.Record.create([
{name : 'xxId',mapping : 'xxId',type : 'int'},
{name : 'xxName',mapping : 'xxName',type : 'string'}]);
var cm_xx = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : 'XX名称',
sortable : true,
menuDisabled : true,
width : 90,
dataIndex : 'xxName',
editor : new Ext.form.TextField({
allowBlank : false,
maxLength : 20
})
}]);
cm_xx.defaultSortable = false;
var window_add_xx = new Ext.Window({
title : '添加XX',
width : 350,
height : 440,
resizable : false,
autoHeight : true,
modal : true,
closeAction : 'hide',
listeners : {
'hide' : function() {
this.setTitle('添加XX');
this.findById('xx.xxName').ownerCt.form.reset();
}
},
items : [new Ext.FormPanel({
labelWidth : 70,
labelAlign : 'right',
url : 'saveXx.action',
border : false,
baseCls : 'x-plain',
bodyStyle : 'padding:5px 5px 0',
anchor : '100%',
defaults : {
width : 233,
msgTarget : 'side' // 验证信息显示右边
},
defaultType : 'textfield',
items : [{
fieldLabel : 'XX名称',
id : 'xx.xxName',
name : 'xx.xxName',
allowBlank : false,
maxLength : 20
}],
buttonAlign : 'right',
minButtonWidth : 60,
buttons : [{
text : '添加',
handler : function(btn) {
var frm = this.ownerCt.form;
if (frm.isValid()) {
btn.disable();
var cnfield = frm.findField('xx.xxName');
frm.submit({
waitTitle : '请稍候',
waitMsg : '正在提交表单数据,请稍候...',
success : function(form, action) {
var store = grid_xx.getStore();
var xx = new Xx({
xxId : action.result.xxId,
xxName : cnfield.getValue()
});
store.insert(0, [xx]);
window_add_xx.setTitle('[ ' + cnfield.getValue() + ' ] 添加成功!!');
cnfield.reset();
btn.enable();
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '"' + cnfield.getValue() + '" ' + '名称可能已经存在!',
buttons : Ext.Msg.OK,
fn : function() {
cnfield.focus(true);
btn.enable();
},
icon : Ext.Msg.ERROR
});
}
});
}
}
}, {
text : '重置',
handler : function() {
this.ownerCt.form.reset();
}
}, {
text : '取消',
handler : function() {
this.ownerCt.ownerCt.hide();
}
}]
})]
});
var btn_add_xx = new Ext.Button({
text : '添加XX',
iconCls : 'icon-add',
handler : function() {
window_add_xx.show();
}
});
var btn_del_xx = new Ext.Button({
text : '删除XX',
iconCls : 'icon-del',
handler : function() {
var record = grid_xx.getSelectionModel().getSelected();
if (record) {
Ext.Msg.confirm('确认删除', '你确定删除该条记录?', function(btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url : 'deleteXx.action',
params : {
xxId : record.data.xxId
},
success : function() {
grid_xx.getStore().remove(record);
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '删除时发生错误!',
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
});
}
});
}
}
});
var btn_search_xx = new Ext.Button({
text : '查询',
iconCls : 'icon-search',
handler : function() {
ds_xx.load();
}
});
var ds_xx = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'findAllXx.action'
}),
reader : new Ext.data.JsonReader({
root : 'root'
}, [{
name : 'xxId',
type : 'int'
}, {
name : 'xxName',
type : 'string'
}])
});
var grid_xx = new Ext.grid.EditorGridPanel({
title : 'XX管理',
iconCls : 'icon-grid',
loadMask : {
msg : '数据加载中...'
},
region : 'center',
cm : cm_xx,
ds : ds_xx,
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
enableColumnMove : false,
trackMouseOver : false,
frame : true,
autoExpandColumn : 'remark',
clicksToEdit : 1,
tbar : [btn_add_xx, '-', btn_del_xx, '-', btn_search_xx],
listeners : {
'afteredit' : function(e) {
Ext.Ajax.request({
url : 'updateXx.action',
params : {
fieldName : e.field,
fieldValue : e.value,
xxId : e.record.data.xxId
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '修改数据发生错误,操作将被回滚!',
fn : function() {
e.record.set(e.field, e.originalValue);
},
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
});
}
}
});
var p_xx = {
id : 'xx-panel',
border : false,
layout : 'border',
items : [grid_xx]
};
浏览器报错：
第一次进到我写的画面时：
Uncaught TypeError: Cannot read property 'width' of undefined ext-all.js:149
点击我做的画面里的查询按钮时：
Uncaught TypeError: Cannot call method 'update' of undefined
...全文
相关推荐
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
对于IE，尤其是早期版本，它对某些标准支持的不完整性和独特的错误处理方式常常成为开发者头痛的源泉。在给出的示例中，问题出现在数组定义的末尾多了一个英文逗号。
一个简单的EXTJS Panel
这种方式可以避免因为DOM元素未加载完成而导致的一些错误。
Python django Extjs 项目开发中的错误小记
页面和控件显示问题： - 如果在使用Extjs的tree和grid控件时遇到点击事件不响应的问题，可能是因为事件没有被正确绑定，或者存在其他JavaScript错误。
extjs grid取到数据而不显示的解决
"在使用ExtJS开发Web应用时，遇到一个关于Grid数据显示的问题。开发者创建了一个树形结构，当在树节点上点击时，会在右侧的标签页中动态加载一个Grid。然而，Grid在Firefox（FF）和
Extjs验证表单 Extjs验证表单
#### 二、Extjs 错误信息提示方式在进行任何形式的验证之前，首先需要配置错误信息的提示方式。Extjs提供多种灵活的提示方式，可以根据项目需求进行选择。
