[Updated] Ext.ux.TinyMCE - TinyMCE form field (v0.7b1)

[temporary]

Has anyone got a generic solution for the submit fail? I have a dynamic form that can contain several instances of Ext.ux.TinyMCE, and I don't want to do some workarounds just to get these TinyMCE synced...

The problem is that BasicForm.submit() doesn't call getValue() on each item, but it calls Ext.Ajax.serializeForm(). serializeForm() just takes a look at the elements inside the form, not the form items itself. There is a big switch() inside serializeForm() which determines what to do.

Maybe I just have to implement my own submit() function...

(later) Oops, I was wrong, I don't call BasicForm.submit(), I call BasicForm.getValues().

[pablitobs]

Hi, first, great code, congrats to all the support team...
Secon I have this code

 
addCable = new Ext.Window({
         width:800
  ,height:700
  ,minWidth:165
        ,id:'crearId'        
  ,minHeight:200
  ,resizable:false
        ,layout:'fit'
        ,border:true
        ,closable:true
        ,title:'Crear Cable'
 
  items: /*createForm,*/
     [new Ext.form.FormPanel({
   baseCls: 'x-plain',
   layout:'form',
   url:'save-form.php',
   border: true,
   defaultType: 'textfield',
   monitorValid:true,
   buttonAlign: 'right',
   bodyStyle: 'padding:5px',
   items: [{
    fieldLabel: 'Tipo de Cable',
    id: 'cableType',
    name: 'cableType',
    anchor:'50%'  // anchor width by %
   },{
    fieldLabel: 'Cable Número',
    id: 'cableNumber',
    name: 'cableNumber',
    anchor: '50%'  // anchor width by %
   },{
    id: 'cableDireccion',
    fieldLabel:'Dirección',    
    name: 'cableDireccion',
    value:'DGC',
    allowBlank:false,    
    blankText: 'Debe ingresar la dirección del cable, puede usar el botón de direcciones en la barra',
    anchor: '50%'  // anchor width by %
   },{
    id:'cableTitulo',
    name: 'cableTitulo',
    fieldLabel: 'Título',
    allowBlank:false,
    blankText: 'Debe ingresar un título válido',
    anchor: '95%',  // anchor width by %
    enableKeyEvents:true,
    listeners:{
     'keyup':{ fn: function(field, e){addCable.setTitle('Crear Cable: '+field.getValue())}
     }
    }
   },{
    fieldLabel: 'Referencia Lima',
    id: 'cableRefLima',
    name: 'cableRefLima',
    anchor: '95%'  // anchor width by %
   },{
    fieldLabel: 'Referencia Tokio',
    id: 'cableRefTokio',
    name: 'cableRefTokio',
    anchor: '95%'  // anchor width by %
   },{
    xtype: "tinymce",
    hideLabel:true,
    width: "768",
    height: "440",
    id: "cableBodyValue",
    name: "cableBodyValue",     
    tinymceSettings: {
     theme : "advanced",         
     content_css : "/includes/styles/cable_template.css",
     plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras",
     theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,help,code,insertdate,inserttime",
     theme_advanced_buttons2 : "forecolor,backcolor,tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,advhr,|,print,|,ltr,rtl,moveforward,movebackward,absolute,styleprops,cite",
     theme_advanced_buttons3 : "abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,pagebreak",
     theme_advanced_toolbar_location : "top",
     theme_advanced_source_editor_width: 768,
     theme_advanced_source_editor_height:440,
     theme_advanced_toolbar_align : "left",
     theme_advanced_statusbar_location : "bottom",
     theme_advanced_resizing : false,
     theme_advanced_fonts : "Arial=arial",
     theme_advanced_font_sizes : "MyText=11px",
 
     extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
     template_external_list_url : "example_template_list.js"
    },
    value: ""
   }],
   buttons:[
     { 
     text:'Guardar',
     formBind:true,
     handler: function() {
      // Sync value for specific editor
      Ext.getCmp("cableBodyValue").syncValue();
      // Submit the form
      frm.getForm().submit({
       url: "/",
       method: "GET"
      });
     }
 
     },{ 
     text: 'Cerrar',
     handler: function(){     
     addCable.close(); 
     }
     }]
  })]
    });

so it is a window with a form and a tinyMCE inside, everything is fine, but when I close the window, IE7 screams the error..... "Permission Denied" , FF works fine.... I really don't know what to do..
I saw some post refering to onDestroy..... but on my tiny_mce_src.js, there is not such method... thanks for you help

[pablitobs]

Hi, from the above post, the debuger points to this code section on tiny_mce_src.js:

getBody : function() {
return this.bodyElement || this.getDoc().body;
},
IE7 blames that function for the perimission denied error.

any Ideas?
thanks

[xor]

pablitobs, do you open this page from web server, as it should be done, or just from local file? It matters. Don't have other ideas for now.

If you already use server, please try to comment out different parts of your form. Also it would be helpful to see whole stack trace, not only the failing method.

[pablitobs]

pablitobs, do you open this page from web server, as it should be done, or just from local file? It matters. Don't have other ideas for now.

If you already use server, please try to comment out different parts of your form. Also it would be helpful to see whole stack trace, not only the failing method.

Hi, yes, it is loaded on a web server... what I did is follow a not fancy solution, instead of using the hide() function I reload the page with location.href=location.href so it renders all and no errors, this while I figure what's the problem

[Dumbledore]

Hi,

i have the same here with IE6... Currently i try to figure out whats going wrong. I use latest tinyMCE...

[edit]
i have a form with 3 tinyMCEs. When i close the dialog the onDestroy-function in Ext.ux.TinyMCE.j will call 6 times!
That means that every editor will be destroy twice?
Any ideas why?

Hi, from the above post, the debuger points to this code section on tiny_mce_src.js:

getBody : function() {
return this.bodyElement || this.getDoc().body;
},
IE7 blames that function for the perimission denied error.

any Ideas?
thanks

[EMP]

Changing the onDestroy listener to beforeDestroy fixed it for me.

(line 154 in Ext.ux.TinyMCE.js)
change:

onDestroy: function(){
     if( this.ed ) tinyMCE.remove( this.ed );
     Ext.ux.TinyMCE.superclass.onDestroy.call( this );
},

to

beforeDestroy: function(){
	if( this.ed ) tinyMCE.remove( this.ed );
	Ext.ux.TinyMCE.superclass.beforeDestroy.call( this );
},

and see if that does it.

don't forget to update the minified version too

[hjf1223]

That's good ,I resolve it.

[pablitobs]

quite enough, but I found that even I did not get the error any more, when I tried to save the data from the text on the tinyMCE to my database using and ajaxrequest, only certain number of characters where saved, something like 128 so so.. the rest was ignored, so I always ended with truncated text on my databse (the field on the database is large enough to handle large data), till now I haven't be able to address this issue...

[xor]

quite enough, but I found that even I did not get the error any more, when I tried to save the data from the text on the tinyMCE to my database using and ajaxrequest, only certain number of characters where saved, something like 128 so so.. the rest was ignored, so I always ended with truncated text on my databse (the field on the database is large enough to handle large data), till now I haven't be able to address this issue...

Check how the save request is performed. Is it done with correct POST request?