PDA

View Full Version : UNKNOWN ERROR (line 7) (ext-all):when adding html: '<spanElement>' in tbbar using IE



erosszz
21 Dec 2009, 9:51 PM
the below code is properly running in different browsers but not in IE (6,7,8)..
it gives me UNKNOWN ERROR (line 7) (ext-all.js)

but if i tried to remove the red part... it will run properly in IE...

Ext JS: 3.1.0 version

here's the full code:


<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/resources/css/ext-all.css" media="all" />
<script type="text/javascript" src="<%=request.getContextPath() %>/js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ext-all.js"></script>
<!-- <script type="text/javascript" src="<%=request.getContextPath() %>/js/ext-all-debug.js"></script> -->
<script type="text/javascript"><!--
Ext.BLANK_IMAGE_URL = "js/resources/images/default/s.gif";
// --></script>
<script type="text/javascript">
Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
onRender : function(ct, position){
this.el = ct.createChild({tag: 'iframe', id: 'mapframe', name: 'mapframe', frameBorder: 1, scrolling: 'no', marginheight: 0, marginwidth: 0});
}
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:50,
margins:'2 5 0 5'
}),

{
region:'west',
id:'west-panel',
title:'west',
width:200,
split:true,
minSize:175,
maxSize:400,
collapsible:true,
margins:'0 0 0 5'
},

new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'map',
title: 'Map',
autoScroll:true,
layout:'fit',
tbar: [
{
xtype: 'checkbox',
id: 'checkboxId',
boxLabel: 'Tooltip',
handler: function(obj, checkedFlag) {
Ext.Msg.alert('Tooltip', checkedFlag);
}
},
{
html: '<span id="mapSpan" style="margin: 0px 2px 0px 2px;"></span>'
}

],
items: [
new Ext.ux.IFrameComponent({ id: 'mapframe' })
]

},{
contentEl:'center2',
title: 'Tab',
closable:true,
autoScroll:true
}]
}),

{
region:'east',
title: 'Others',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0'
},
new Ext.BoxComponent ({
region:'south',
el:'south',
height:'15',
margins:'0 5 2 5'
})
]
});
});
</script>
</head>
<body>
<div id="north">
</div>

<div id="center2">
<a id="hideit" href="#">Toggle the west region</a>
</div>

<div id="map">
</div>

<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>

<div id="south">
</div>
</body>
</html>

erosszz
22 Dec 2009, 4:45 PM
I found an alternative solution.... but still wondering why it gives me an error message that UNKNOWN...

my alternative solution is move the red part inside the <body> tag...

how about the community? have you tried my source code? then it gives you same error?
if not, maybe in my part... ;)

thanks a lot..

Animal
23 Dec 2009, 12:26 AM
You cannot use the html config on a Button. It will break the Button. A Button is a <table> and you cannot put a <span> directly into a <table>

What are you attempting to do? What UI are you trying to accomplish?

erosszz
23 Dec 2009, 12:58 AM
Thanks a lot Sir.

> What are you attempting to do? What UI are you trying to accomplish?
Honestly, not proportional is the Map API am I using, unfortunately it is not modifiable.

It needs a 'mapSpan' <span> element id.. to include it's components (combobox, two buttons)... that must be right after 'checkboxId' element... to run properly...

right now, it is temporarily included in the body but it's hidden.. just to allow to run...
but the bottom line is, I need to placed it after the 'checkboxId' element and set to hidden false...

could you please assist me on how to include codes into extjs generated code..

thanks a lot..

Animal
23 Dec 2009, 1:01 AM
I do not understand.

What UI do you want to achieve? What is the purpose? Why don't you just use a Button?

erosszz
23 Dec 2009, 11:10 PM
thanks a lot Sir for your replies... ;)

i am using a Map API, may call it MapAPI.
upon showMap called, the map and it's generated components will insert to <iframe> and <span> elements respectively. It's components are composed of comboBox, 2 buttons. <iframe> id should be 'mapFrame' and <span> id should be 'mapSpan' in able to use/run properly.

>What UI do you want to achieve?
MapAPI will provide the UI implementation, just provide the 'mapFrame' and 'mapSpan'

>What is the purpose?
just to create the 'mapframe' and mapSpan elements and MapAPI will provide the rest.

>Why don't you just use a Button?
MapAPI will provide it's components (buttons..etc..) and it's events with connection to map functionalities...