firstly sorry of my english.
If you keep getting a this.getDoc() error when the tinymce textarea gets focus or when you call certain custom javascript functions that tinymce supports, you can solve it that way;
1-index.html includes all scripts
<script type="text/javascript" src="yui-utilities.js"></script>
<script type="text/javascript" src="ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="global.js"></script>
<script language="javascript" type="text/javascript" src="tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
theme : "advanced",
height : "325",
width : "560",
relative_urls : false,
remove_script_host : false,
cleanup : true,
cleanup_on_startup : true,
...
});
2-global.js
Ext.TabPanelItem.prototype.closeClick = function(e){
var o = {};
e.stopEvent();
this.fireEvent("beforeclose", this, o);
if(this.bodyEl.onClose){
this.bodyEl.onClose(o);
}
if(o.cancel !== true){
this.tabPanel.removeTab(this.id);
}
};
Ext.ContentPanel.prototype.convertToNested = function(layout){
this.layout = layout;
this.layout.monitorWindowResize = false; // turn off autosizing
this.layout.getEl().addClass("x-layout-nested-layout");
this.setSize = function(width, height){
if(!this.ignoreResize(width, height)){
var size = this.adjustForComponents(width, height);
this.layout.getEl().setSize(size.width, size.height);
this.layout.layout();
}
};
this.getLayout().layout();
layout.layout();
};
Ext.ContentPanel.prototype.getLayout = function(){
return this.layout;
};
mceFunctions = function(event,tMces,inputs){
var mceCounter = tinyMCE.idCounter;
var setMceContent;
if(mceCounter > 0){
for(var mce in tinyMCE.instances){
if(mce != 'remove'){
for(mces in tMces){
if(mces != 'remove'){
var inst = tinyMCE.instances[mce];
if (!tinyMCE.isInstance(inst))
continue;
if(eval('tinyMCE.instances[\''+mce+'\'].formTargetElementId') == mces){
switch(event){
case 'load' :
tinyMCE.removeInstance(eval('tinyMCE.instances[\''+mce+'\']'));
break;
case 'showForUpdate' :
setMceContent = eval('inputs["'+mces+'"].getValue()');
tinyMCE.execInstanceCommand(mce,'mceSetContent',mces,setMceContent);
break;
case 'showForNew' :
tinyMCE.execInstanceCommand(mce,'mceSetContent',mces,'');
break;
case 'saveData' :
setMceContent = eval('tinyMCE.getContent(\''+mce+'\')');
eval('inputs["'+mces+'"].setValue(setMceContent)');
break;
case 'selectedInstance' :
while(tinyMCE.selectedInstance.editorId != eval('tinyMCE.instances[\''+mce+'\'].editorId')){
tinyMCE.selectedInstance = eval('tinyMCE.instances[\''+mce+'\']');
}
break;
case 'unLoad' :
tinyMCE.removeInstance(eval('tinyMCE.instances[\''+mce+'\']'));
break;
}
}
}
}
}
}
}
}
3-sections.html includes tinyMCE element(s)
<div id="sectionsAdmin" class="ylayout-inactive-content">
<div id="sectionsToolbar" class="ylayout-inactive-content"></div>
<div id="sectionsContent" class="ylayout-inactive-content">
<div id="sectionsGrid" style="overflow: hidden; width: 100%; height: 100%; "></div>
</div>
</div>
<div id="hiddenElements">
</div>
<div id="sectionsDialog" style="visibility:hidden;">
<div class="x-dlg-hd">Section</div>
<div class="x-dlg-bd">
<div id="sectionsLayout" class="ylayout-inactive-content">
<div id="sectionsDialogInfo" class="ylayout-inactive-content" style="padding:2px;background:#EEEEEE">
<table cellspacing="2" cellpadding="1">
<tr>
<td class="kk-header">Section Name</td>
<td><div id="edt_name"/></td>
<td class="kk-header">Publish Status</td>
<td>
<select id="edt_published">
<option selected value="0">No</option>
<option value="1">Yes</option>
</select>
</td>
</tr>
<tr>
<td class="kk-header">Description</td>
<td colspan="3"><div id="description"/></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="sectionsLayout.js"></script>
4-sectionsLayout.js
var sectionsDialog = function(){
return {
dialog: true,
inputs: true,
mces:true,
init : function(){
...
this.inputs = new Array();
this.mces = new Array();
this.inputs['description'] = new textEditor('description',{minLength:1});
this.mces['description'] = 'description';
...
var dialogLayout = this.dialog.getLayout();
dialogLayout.beginUpdate();
...
dialogLayout.endUpdate();
mceFunctions('load',this.mces,this.inputs);
tinyMCE.execCommand('mceAddControl', true, 'description');
},
show : function(sourceEl, edit){
if (edit){
...
mceFunctions('showForUpdate',this.mces,this.inputs);
this.dialog.recordMode = 'Update';
}else{
...
mceFunctions('showForNew',this.mces,this.inputs);
this.dialog.recordMode = 'Insert';
}
this.dialog.show(sourceEl.el?sourceEl.el.dom:sourceEl.container.dom);
},
saveData: function(del){
var formCB = function(oElement, bSuccess, oResponse){
this.uploadIndicator.remove();
this.dialog.hide();
sections.gridSource.load();
sections.grid.getSelectionModel().clearSelections();
}
var forms = new Array(
{
table : 'sections',
inputs : this.inputs,
primaryKey : 'ID'
}
);
mceFunctions('saveData',this.mces,this.inputs);
this.uploadIndicator = Ext.DomHelper.append(this.dialog.footer.dom, {tag:'div',style:'display:none',html:'<form id="formData"></form>'}, true);
this.uploadIndicator.getUpdateManager().update({url:"bla.php",params:{data: /*private function for prepare data*/buildPostData(forms,del)},callback:formCB.createDelegate(this)});
sectionsDialog.deletedRecords = null;
}
}
}();
var sections = function(){
return{
layout: true,
grid:true,
gridSource:true,
init : function(){
if(newtab){
newtab.el.onClose = function(){
mceFunctions('unLoad',sectionsDialog.mces,sectionsDialog.inputs);
}
}
var parentElement = newtab ? newtab.el : 'sectionsAdmin';
...
this.layout.beginUpdate();
var buttonClicked = function(btn,e){
mceFunctions('selectedInstance',sectionsDialog.mces,sectionsDialog.inputs);
switch(btn.id){
case 'sectionAdd' :
sectionsDialog.show(btn);
break;
case 'sectionEdit' :
if(this.grid.getSelectionModel().getSelected()){
sectionsDialog.show.createDelegate(sectionsDialog)(btn,'edit');
}
break;
}
};
sectionsToolbar.add(
{
id: 'sectionAdd',
icon: 'table_add.png',
cls: 'x-btn-icon',
handler:buttonClicked.createDelegate(this),
tooltip:'Section Add'
},
'-',
{
id: 'sectionEdit',
icon: 'table_edit.png',
cls: 'x-btn-icon',
handler:buttonClicked.createDelegate(this),
tooltip:'Section Edit'
}
);
this.layout.add('north', new Ext.ContentPanel('sectionsToolbar',{closable:false}));
var Records = Ext.data.Record.create([
...
]);
var reader = new Ext.data.XmlReader({
root: 'DataSet',
record: 'Row',
totalRecords: 'TotalCount',
id: 'sid'
}, Records);
this.gridSource = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'bla.php'
}),
reader: reader,
remoteSort: true
});
var query = escape("s.ID sid,s.title,s.name,s.description,published from sections s ");
this.gridSource.setDefaultSort('s.ID', 'asc');
var cm = new Ext.grid.ColumnModel([
{
id:'sid',
header: "ID",
width: 50,
dataIndex: 'sid',
sortable: true,
align: 'right'
},{
header: "Name",
width: 100,
dataIndex: 'name',
sortable: true,
align: 'left'
},
header: "Publish State",
width: 100,
dataIndex: 'published',
sortable: true
}
]);
cm.defaultSortable = true;
this.grid = new Ext.grid.Grid('sectionsGrid', {
ds: this.gridSource,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:true,
monitorWindowResize: true,
autoWidth:true,
trackMouseOver: true
});
var gridDblClick = function(){
sectionsDialog.show(this,'edit');
}
this.grid.on('rowdblclick',gridDblClick);
this.grid.render();
var gridFoot = this.grid.getView().getFooterPanel(true);
var pagbar = new Ext.PagingToolbar(gridFoot, this.gridSource);
this.gridSource.load();
this.layout.add('center', new Ext.GridPanel(this.grid, {fitToFrame:true, closable:false}));
this.layout.endUpdate();
}
}
}();
sectionsDialog.init();
sections.init();
newtab.convertToNested(sections.layout);
I hope this will solve your problems about TinyMCE in Ext.