[英]Uncaught TypeError: Cannot read property 'dom' of undefined
如何解决此错误Uncaught TypeError: Cannot read property 'dom' of undefined
in extjs?
我正在使用 dnd 并将 dnd 代码放入布局浏览器
代码 :
// Generic fields array to use in both store defs.
var fields = [{
name: 'id',
type: 'string',
mapping: 'id'
}, {
name: 'lab_name',
type: 'string',
mapping: 'lab_name'
}, {
name: 'lab_address1',
type: 'string',
mapping: 'lab_address1'
}, {
name: 'lab_address2',
type: 'string',
mapping: 'lab_address2'
}, {
name: 'lab_poskod',
type: 'string',
mapping: 'lab_poskod'
}, {
name: 'lab_bandar',
type: 'string',
mapping: 'lab_bandar'
}, {
name: 'lab_negeri',
type: 'string',
mapping: 'lab_negeri'
}, {
name: 'lab_tel',
type: 'string',
mapping: 'lab_tel'
}, {
name: 'lab_fax',
type: 'string',
mapping: 'lab_fax'
}];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields: fields,
autoLoad: true,
url: '../industri/layouts/getLab.php'
});
// Column Model shortcut array
var cols = [{
id: 'name',
header: "Id",
width: 10,
sortable: true,
dataIndex: 'id'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_name'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_address1'
}];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: gridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
width: 325,
margins: '0 2 0 0',
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
// Declare the text fields. This could have been done inline, is easier to read
// for folks learning :)
var textField1 = new Ext.form.TextField({
fieldLabel: 'Laboratory Name',
name: 'lab_name'
});
// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region: 'center',
title: 'Generic Form Panel',
bodyStyle: 'padding: 10px; background-color: #DFE8F6',
labelWidth: 100,
margins: '0 0 0 3',
width: 325,
items: [textField1]
});
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'border',
padding: 5,
items: [
grid,
formPanel
],
bbar: [
'->', // Fill
{
text: 'Reset Example',
handler: function() {
//refresh source grid
gridStore.loadData();
formPanel.getForm().reset();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = formPanel.body.dom;
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup: 'gridDDGroup',
notifyEnter: function(ddSource, e, data) {
//Add some flare to invite drop.
formPanel.body.stopFx();
formPanel.body.highlight();
},
notifyDrop: function(ddSource, e, data) {
// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];
// Load the record into the form
formPanel.getForm().loadRecord(selectedRecord);
// Delete record from the grid. not really required.
ddSource.grid.store.remove(selectedRecord);
return (true);
}
});
var tabsNestedLayouts = {
id: 'tabs-nested-layouts-panel',
title: 'Industrial Effluent',
bodyStyle: 'padding:15px;',
layout: 'fit',
items: {
border: false,
bodyStyle: 'padding:5px;',
items: displayPanel
}
};
如果您尝试将组件渲染到未找到的dom
元素(或未找到的dom
ID),您将收到该错误。 请参阅下面的示例以重现错误 - 然后注释掉错误的 renderTo 并取消注释renderTo: Ext.getBody()
以解决问题。
看到这个 小提琴
代码片段
Ext.onReady(function () {
// Generic fields array to use in both store defs.
var fields = [{
name: 'id',
type: 'string',
mapping: 'id'
}, {
name: 'lab_name',
type: 'string',
mapping: 'lab_name'
}, {
name: 'lab_address1',
type: 'string',
mapping: 'lab_address1'
}, {
name: 'lab_address2',
type: 'string',
mapping: 'lab_address2'
}, {
name: 'lab_poskod',
type: 'string',
mapping: 'lab_poskod'
}, {
name: 'lab_bandar',
type: 'string',
mapping: 'lab_bandar'
}, {
name: 'lab_negeri',
type: 'string',
mapping: 'lab_negeri'
}, {
name: 'lab_tel',
type: 'string',
mapping: 'lab_tel'
}, {
name: 'lab_fax',
type: 'string',
mapping: 'lab_fax'
}];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields: fields,
autoLoad: true,
url: '../industri/layouts/getLab.php'
});
// Column Model shortcut array
var cols = [{
id: 'name',
header: "Id",
width: 10,
sortable: true,
dataIndex: 'id'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_name'
}, {
id: 'name',
header: "Laboratory Name",
width: 200,
sortable: true,
dataIndex: 'lab_address1'
}];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: gridStore,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
width: 325,
margins: '0 2 0 0',
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
// Declare the text fields. This could have been done inline, is easier to read
// for folks learning :)
var textField1 = new Ext.form.TextField({
fieldLabel: 'Laboratory Name',
name: 'lab_name'
});
// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region: 'center',
title: 'Generic Form Panel',
bodyStyle: 'padding: 10px; background-color: #DFE8F6',
labelWidth: 100,
margins: '0 0 0 3',
width: 325,
items: [textField1]
});
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'border',
renderTo:Ext.getBody(),
padding: 5,
items: [
grid,
formPanel
],
bbar: [
'->', // Fill
{
text: 'Reset Example',
handler: function () {
//refresh source grid
//gridStore.loadData();
formPanel.getForm().reset();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = formPanel.body.dom;
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup: 'gridDDGroup',
notifyEnter: function (ddSource, e, data) {
//Add some flare to invite drop.
formPanel.body.stopFx();
formPanel.body.highlight();
},
notifyDrop: function (ddSource, e, data) {
// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];
// Load the record into the form
formPanel.getForm().loadRecord(selectedRecord);
// Delete record from the grid. not really required.
ddSource.grid.store.remove(selectedRecord);
return (true);
}
});
var tabsNestedLayouts = {
id: 'tabs-nested-layouts-panel',
title: 'Industrial Effluent',
bodyStyle: 'padding:15px;',
layout: 'fit',
items: {
border: false,
bodyStyle: 'padding:5px;',
items: displayPanel
}
};
});
这意味着您期望具有dom
属性的对象是未定义的。
编辑:
错误在此行生成:
formPanel.body.dom
这意味着formPanel
未呈现,因为您正在尝试访问其body
属性。 此属性可用自:Ext 4.1.3
我在为验证而执行的代码中看到类似的错误。 我所做的与直接访问 DOM 无关,但是我仍然遇到类似的情况。 上面的答案不完整,dom属性在3.x中的一些ui元素上可用...
在早期版本的 Extjs (3.x) 中,属性是 mainBody.dom 而不是 body.dom
直接来自 3.4 中网格的 hasRows() 源:
var fc = this.**mainBody.dom**.firstChild;
return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.