PDA

View Full Version : Exception when add created item in container



earist
2 May 2012, 11:41 PM
Hi,

I am using ExtJS 4.0.2 for creating a portal.
I create a tool for changing panel in the portal.
The panel is changed by remove old panel and add new panel to the portal.
There are 3 panels: 'option1', 'option2' and 'option3'.
'option1' is a default panel.

From the example code (see test.jsp and test.js) : I can change option1 to option2 or option3.
But the "Uncaught Error: NOT_FOUND_ERR: DOM Exception 8" will be thrown when I try to change back to option1 again.

Example results when switch options.


option1 > option2 > option3 > option1>> exception is thrown
option1 > option2 > option3 > option2 >> it's ok
option1 > option3 > option2 > option3 >> it's ok


The exception:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

Ext.define.moveItemclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderItemsclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderChildrenclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderChildrenclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.afterRenderclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Base.callParentext-all-debug.js:2874 (http://localhost:8080/cameoeworkserver/js/extjs/ext-all-debug.js)
Ext.define.afterRenderclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Base.callParentext-all-debug.js:2874 (http://localhost:8080/cameoeworkserver/js/extjs/ext-all-debug.js)
Ext.define.afterRenderclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Base.callParentext-all-debug.js:2874 (http://localhost:8080/cameoeworkserver/js/extjs/ext-all-debug.js)
Ext.define.afterRenderclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderItemclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderItemsclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderChildrenclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderChildrenclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Base.callParentext-all-debug.js:2874 (http://localhost:8080/cameoeworkserver/js/extjs/ext-all-debug.js)
Ext.define.renderChildrenclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.afterRenderclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Base.callParentext-all-debug.js:2874 (http://localhost:8080/cameoeworkserver/js/extjs/ext-all-debug.js)
Ext.define.afterRenderclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Base.callParentext-all-debug.js:2874 (http://localhost:8080/cameoeworkserver/js/extjs/ext-all-debug.js)
Ext.define.afterRenderclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderItemclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderItemsclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.renderChildrenclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.beforeLayoutclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Base.callParentext-all-debug.js:2874 (http://localhost:8080/cameoeworkserver/js/extjs/ext-all-debug.js)
Ext.define.beforeLayoutclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.layoutclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.doContainerLayoutclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.afterLayoutclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.layoutclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.doComponentLayoutclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.doLayoutclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
Ext.define.addclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
form.Ext.widget.buttons.handlertest.js:80 (http://localhost:8080/cameoeworkserver/js/test.js)
Ext.define.onClickclasses.js:5 (http://localhost:8080/cameoeworkserver/js/classes.js)
anonymous:5 (http://www.sencha.com/forum/chrome-devtools://devtools/devtools.html?docked=true&toolbar_color=rgba%28223,223,223,1%29&text_color=rgba%2818,50,114,1%29)


test.jsp:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portal Layout Sample</title>

<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/ext-all.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/ux/portal.css'/>" />
<link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/portlet/project.css'/>" />
<!-- main lib -->
<script type="text/javascript" src="<c:url value='/js/extjs/ext-all-debug.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/classes.js'/>"></script>
<script type="text/javascript" src="<c:url value='/js/test.js'/>"></script>
<script type="text/javascript">

Ext.Loader.setPath('Ext.app', 'classes');

Ext.require([
'Ext.layout.container.*',
'Ext.resizer.Splitter',
'Ext.fx.target.Element',
'Ext.fx.target.Component',
'Ext.window.Window',
'Ext.app.Portlet',
'Ext.app.PortalColumn',
'Ext.app.PortalPanel',
'Ext.app.Portlet',
'Ext.app.PortalDropZone',
'Ext.app.GridPortlet',
'Ext.app.ChartPortlet'
]);

Ext.onReady(function(){
Ext.create('Ext.app.Portal');
});
</script>
</head>
<body>
<span id="app-msg" style="display:none;"></span>
</body>
</html>


test.js:


var option = '1';

/*Tool */

function getTools(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){

var win;
if (!win) {

var valid = true;
var changeValue;
viewComboBox = new Ext.form.field.ComboBox({
margin : '10px 10px 10px 10px',
minWidth : 150,
fieldLabel : 'Views',
xtype : 'combo',
autoSelect : true,
editable : false,
queryMode : 'local',
triggerAction : 'all',
forceSelection : true,
id : 'view',
name : 'View',
displayField : 'label',
valueField : 'value',
value : option,
listeners : {
'change' : function(cb, newValue, oldValue) {
changeValue = newValue;
}
},
store : new Ext.data.Store({
fields : [ 'value', 'label' ],
data : [ {
"value" : "1",
"label" : "1"
}, {
"value" : "2",
"label" : "2"
}, {
"value" : "3",
"label" : "3"
} ]
})
});

var form = Ext.widget('form', {
padding : '10px 10px 10px 10px',
labelAlign : 'left',
labelWidth : 50,
standardSubmit : false,
labelSeparator : ':',
items : [ viewComboBox ],
buttons : [ {
text : 'Save',
handler : function() {

if (valid) {
var f = form.getForm();
var s = '';
if (changeValue != option) {
option = changeValue;
/* If option is changed remove old panel of "col-1"
and add new option to the component */
var column = Ext.getCmp('col-1');
column.removeAll();
column.add(getOption()); /*Exception may be thrown*/
column.doLayout();
this.up('window').close();
}
}
}
},

{
text : 'Close',
handler : function() {
this.up('window').close();
}
} ]
});

win = Ext.widget('window', {
title : 'Options',
layout : 'fit',
width : 320,
height : 130,
closable : true,
closeAction : 'hide',
plain : false,
modal : true,
shim : true,
items : form
});
}
if (win.isVisible())
win.close();
win.show();
}
}];
}

/*Option panel*/

Ext.define('Ext.app.Option1', {
extend : 'Ext.panel.Panel',
title : 'Option1',
tools : getTools(),
items : new Ext.grid.Panel({
singleSelect : true,
autoScroll : true,
autoDestroy : true,
autoRender : true,
loadMask : true,
selType : 'cellmodel',
enableColumnMove : false,
forceFit : true,
viewConfig : {
deferEmptyText : false,
emptyText : '<span class="no-project">No Data Found</span>',
stripeRows : true
},
store : new Ext.data.Store({
fields : [ 'value', 'label' ],
autoLoad: true,
autoDestroy : true,
data : [ {
"value" : "A",
"label" : "AA"
}, {
"value" : "B",
"label" : "BB"
}, {
"value" : "C",
"label" : "CC"
} ]
}),
columns : [
{
text : 'value',
dataIndex : 'value'
},
{
text : 'label',
dataIndex : 'label'
}
]

})
});

Ext.define('Ext.app.Option2', {
extend : 'Ext.panel.Panel',
title : 'Option2',
tools : getTools(),
html : 'option2'
});

Ext.define('Ext.app.Option3', {
extend : 'Ext.panel.Panel',
title : 'Option3',
tools : getTools(),
html : 'option3'
});

/*Get option*/
function getOption()
{
if (option == '1')
return Ext.create('Ext.app.Option1');
else if (option == '2')
return Ext.create('Ext.app.Option2');
else
return Ext.create('Ext.app.Option3');
}

/*My Portal*/
Ext.define('Ext.app.Portal', {

extend: 'Ext.container.Viewport',

initComponent: function(){
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
},
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [Ext.create('Ext.app.Option1')] /*option panel will be added to here*/
}]
}]
}]
});
this.callParent(arguments);
},

onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},

showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();

this.msgId = msgId;
el.update(msg).show();

Ext.defer(this.clearMsg, 3000, this, [msgId]);
},

clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});



Anyone got an idea?

Thanks in advance,
earist

earist
4 May 2012, 12:19 AM
Can anyone help me?

What should I do for change panel in portal?

earist
7 May 2012, 7:49 PM
I still cannot solve the problem

Now, I change my code.

option 1 contains grid panel
option 2 and 3 do not contain item, they contain only html text



Ext.define('Ext.app.Option1', {
extend : 'Ext.panel.Panel',
tools : getTools(),
title : 'Option1',
items : new Ext.grid.Panel({
singleSelect : true,
autoScroll : true,
autoDestroy : true,
autoRender : true,
loadMask : true,
selType : 'cellmodel',
enableColumnMove : false,
forceFit : true,
viewConfig : {
deferEmptyText : false,
emptyText : '<span class="no-project">No Data Found</span>',
stripeRows : true
},
store : new Ext.data.Store({
fields : [ 'value', 'label' ],
autoLoad: true,
autoDestroy : true,
data : [ {
"value" : "A",
"label" : "AA"
}, {
"value" : "B",
"label" : "BB"
}, {
"value" : "C",
"label" : "CC"
} ]
}),
columns : [
{
text : 'value',
dataIndex : 'value'
},
{
text : 'label',
dataIndex : 'label'
}
]

})
});

Ext.define('Ext.app.Option2', {
extend : 'Ext.panel.Panel',
title : 'Option2',
tools : getTools(),
items : [],
html : 'option2'
});

Ext.define('Ext.app.Option3', {
extend : 'Ext.panel.Panel',
title : 'Option3',
tools : getTools(),
items : [],
html : 'option3'
});



I can change panel back to option 2 and 3 but still cannot change to option 1 again