PDA

View Full Version : HtmlEditor in Form with Tabs



cesarreyesa
1 Aug 2007, 9:16 AM
Hi, I want to put an HtmlEditor inside an Ext.Form with Tabs, but I get this error


uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMNSHTMLDocument.designMode]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://localhost:8080/js/ext/ext-all-debug.js :: anonymous :: line 23201" data: no]


If I try with some other editor like the TextField it works.

Any ideas to make it work?? Here is the code I used.



<div id="form" ></div>
<script type="text/javascript">
Ext.onReady(function(){
var form, tabsContainer, tabs;
form = new Ext.form.Form();

tabsContainer = form.container();
form.end();
tabs = new Array();

tabs[0] = form.container({el:Ext.DomHelper.append(Ext.get('form'), {tag:'div', style:'display:none;'})});
form.add(new Ext.form.HtmlEditor({"fieldLabel":"Description","name":"description"}));
// form.add(new Ext.form.TextField({"fieldLabel":"Description","name":"description"}));
form.end();

form.render('form');
var tabPanel = new Ext.TabPanel(tabsContainer.el);
tabPanel.addTab(tabs[0].getEl().id, 'Long');
tabPanel.activate(tabs[0].getEl().id);
});
</script>


Thanks a lot.

jay@moduscreate.com
1 Aug 2007, 1:00 PM
I would keep the form div and the tabpanel divs separate. it seems that you're appending a div to the form and rendering the tab panel to that div. Then you have the form div wrapping around it, etc...

Also, for ease of use in the future, try not to have run-on sentence coding like you're doing. One great book i read about programming in general always says code in paragraphs.

Look at how jack's source is. It follows a lot of the modern C-Style programming syntax techniques. Also, look at douglass crockford's docs and the yahoo programming docs.

Example:


// Your code:
tabs[0] = form.container({el:Ext.DomHelper.append(Ext.get('form'), {tag:'div', style:'display:none;'})});

// Could be better written as:
tabs[0] = form.container({
el:Ext.DomHelper.append(Ext.get('form'), {
tag: 'div',
style: 'display:none;'
})
});



Try this:

Take a tabpanel example add a div to it, and create the form object there.

cesarreyesa
2 Aug 2007, 8:31 AM
It works now. Thanks for your help.

I put the code below.



<div id="form">
<div id="tabPanel">
<div id="panel1"></div>
<div id="panel2"></div>
</div>
</div>
<script type="text/javascript">
Ext.onReady(function(){
var form = new Ext.form.Form();

form.container({
el:Ext.DomHelper.append(Ext.get('panel1'), {
tag:'div'
})
});
form.add(new Ext.form.HtmlEditor({"fieldLabel":"Description","name":"description"}));
form.end();

form.container({
el:Ext.DomHelper.append(Ext.get('panel2'), {
tag:'div'
})
});
form.add(new Ext.form.HtmlEditor({"fieldLabel":"Description","name":"description"}));
form.end();

var tabPanel = new Ext.TabPanel('tabPanel');
tabPanel.addTab('panel1', 'Tab 1');
tabPanel.addTab('panel2', 'Tab 2');
tabPanel.activate('panel1');

form.render('form');
});
</script>