1. #61
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    @Qtx
    Got it, thanks a lot for your reply..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  2. #62
    Sencha User
    Join Date
    Feb 2010
    Posts
    355
    Vote Rating
    4
    maneljn is on a distinguished road

      0  

    Default


    i have a problem

    When i define the control inside a tabpanel, it shows well but trunked the buttons in toolbars at default width field.

    My tabpanel has a long width, and then the tinymce resizes (fits) very well, but the buttons are yet trunked.
    -------------------
    Manel Juàrez

  3. #63
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    Can you place a screenshot that illustrates the problem?

  4. #64
    Sencha User
    Join Date
    Feb 2010
    Posts
    355
    Vote Rating
    4
    maneljn is on a distinguished road

      0  

    Default


    sorry i have changed yet my source code to use extjs htmleditor + this plugins
    http://www.sencha.com/forum/showthre...ditor&p=890181

    i explain litte more the problem....

    Supose that default width of a field is 240 pixels (is an example measure)
    Is all the buttons in tinymce that are in first row needs 400 pixels width. When the tinymcetextarea is showed, all the buttons on the right of 240 pixels are not showed, but the hole control fits well inside the tabpanel, i see blank space from point 240 to the rest of the tabpanel width.

    Sorry about my english.
    -------------------
    Manel Juàrez

  5. #65
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    Well, the Ext.ux.form.TinyMCETextArea sticks exactly to the dimensions of the container TextArea. If the width of the textarea is 240px, then the width of the TinyMCETextArea will also be 240px even if there is a free space on the right. The TinyMCETextArea does not any place occupation by itself. It waits when the ExtJS system gives the place to the TextArea control and then adjust it to that size.

    If you want to use this free area on the right, you have to increase the width of the TextArea and the editor will adjust to it.

  6. #66
    Sencha User
    Join Date
    Feb 2010
    Posts
    355
    Vote Rating
    4
    maneljn is on a distinguished road

      0  

    Default


    Hello Qtx, thats my form

    Code:
            // ---------------------------------------------------------------
            // Formulario para editar los registros
            // ---------------------------------------------------------------
            me.formularioAsignaturas = Ext.create('Ext.form.Panel', {
                name: 'formularioAsignaturas',
                border: false,
                bodyPadding: 10,
                hidden: false,
                autoScroll: true,
                fieldDefaults: {
                    labelAlign: 'left',
                    labelWidth: 125,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 5 0'
                },
                layout: 'fit',
    
                //                            
                // Campos del formulario
                //
                items: [{
                    xtype: 'panel',
                    title: '',
                    border: false,
                    layout: 'border',
            
                    items: [{
                        xtype: 'panel',
                        border: false,
                        layout: 'anchor',
                        region: 'north',
                        items: [{
                            xtype: 'fieldset',
                            title: gt.dgettext('esiacademia','Datos generales'),
                            collapsible: true,
                            padding: '5 5 0 5',                        
                            items: [{
                                xtype: 'panel',
                                border: false,
                                layout: 'column',
    
                                items: [{
                
                                    // Columna izquierda
                                    xtype: 'container',
                                    columnWidth:.75,
                                    layout: 'anchor',
                                                                                
                                    items: [{
                                        xtype: 'fieldcontainer',
                                        fieldLabel: '',
                                        labelSeparator: '',
                                        labelWidth: 0,
                                        layout: {
                                            type: 'hbox',
                                            pack: 'ratio',
                                            align: 'top'
                                        },
                                        anchor: '100%',
                                        defaultType: 'cesitextfield',
                                        fieldDefaults: {
                                            labelAlign: 'right',
                                            labelStyle: 'font-weight:bold;'
                                        },
                                        defaults: {
                                            margins: '0 5 0 0'
                                        },
                    
                                        items: [{
                                            name: 'asig_nombre',
                                            xtype: 'cesitextfield',
                                            fieldLabel: gt.dgettext('esicontactos','Nombre'),
                                            labelAlign: 'left',
                                            labelWidth: 125,
                                            forzarMayusculas: true,                    
                                            enforceMaxLength: true,
                                            maxLength: 100,                    
                                            flex: 1,
                                            fieldCls: 'campo_obligatorio',
                                            allowBlank: false
                                        }, {
                                            name: 'asig_activo',
                                            xtype: 'checkboxfield',
                                            fieldLabel: gt.dgettext('esiacademia','Activo'),
                                            labelWidth: 75,
                                            margins: '0 0 0 0',    
                                            tabIndex: -1,    // Para que el cambio de campos con tabulador no se pare aqui 
                                            inputValue: '1'
                                        }]
                                    }]
    
    
                                }, {
                                    // Columna derecha
                                    xtype: 'container',
                                    columnWidth:.25,
                                    layout: 'anchor'
                                }]
    
                            }]
                        }]
    
                    // Parte inferior
                    },{
                        xtype: 'panel',
                        border: false,
                        region: 'center',
                        layout: 'fit',
                        items: [{                    
                        
                            // Tab panel de subfichas
                            name: 'cto_tabpanel_subfichas',
                            xtype: 'esiacademia_view_tabpanelBase',
                            title: '',
                            border: true,
                            closable: false,
                            defaults: {
                                padding: '5 5 5 5',                        
                                layout: 'anchor'
                            },
                            items: [{
    
                                // Panel descripcion
                                xtype: 'esiacademia_view_panelSubfichaBase',
                                name: 'subfichaAsigDescripcion',
                                title: gt.dgettext('esiacademia','Descripción'),
                                layout: 'fit',
                                autoScroll: false,
                                margin: 5,
                                padding: 0,
                                items: [{    
                                    xtype: 'tinymce_textarea',
                                    name: 'asig_descripcion',
                                    fieldLabel: '',
                                    allowBlank: true,
    
                                    tinymceInit: {
                                        theme : "advanced",
                                        skin: "extjs",
                                        language : "ca",
                                        // Original value is 23, hard coded.
                                        // with 23 the editor calculates the height wrong.
                                        // With these settings, you can do the fine tuning of the height
                                        // by the initialization.
                                        theme_advanced_row_height: 27,
                                        delta_height: 1,
                                        plugins: "autosize,autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
                                        // Theme options  (ancho estrecho)
                                        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfullcut,|,copy,paste,pastetext,pasteword,|,bullist,numlist,|,forecolor,backcolor",
                                        theme_advanced_buttons2 : "", 
                                        theme_advanced_buttons3 : "", 
                                        theme_advanced_buttons4 : "", 
                                        theme_advanced_toolbar_location : "top",
                                        theme_advanced_toolbar_align : "left",
                                        theme_advanced_statusbar_location : "bottom",
                                        // FINAL Theme options
                                        plugin_insertdate_dateFormat : "%d-%m-%Y",
                                        plugin_insertdate_timeFormat : "%H:%M:%S",
                                        relative_urls : false
                                    }
                                }]
                            }, {
    
                                // Panel contenidos y objetivos
                                xtype: 'esiacademia_view_panelSubfichaBase',
                                title: gt.dgettext('esiacademia','Contenidos y objetivos'),
                                layout: 'fit',
                                autoScroll: false,
                                items: [{
                                    xtype: 'textareafield',
                                    name: 'asig_observaciones',
                                    autoScroll: true,
                                    fieldLabel: gt.dgettext('esiacademia','Contenidos'),
                                    allowBlank: true
                                }]
                            }, {
    
                                // Panel observaciones                            
                                xtype: 'esiacademia_view_panelSubfichaBase',
                                title: gt.dgettext('esiacademia','Observaciones'),
                                layout: 'fit',
                                autoScroll: false,
                                items: [{
                                    xtype: 'textareafield',
                                    name: 'asig_observaciones',
                                    autoScroll: true,
                                    fieldLabel: gt.dgettext('esiacademia','Observaciones'),
                                    allowBlank: true
                                }]
                            }, {
                                // Panel informacion de registro
                                xtype: 'esiacademia_view_panelSubfichaBase',
                                title: ' ',   // Dejar un espacio en blanco en el titulo.
                                iconCls: 'icono_informacion',
                                items: [{
                                    name: 'asig_id',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('esiacademia','Id')
                                }, {
                                    name: 'asig_guid',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('esiacademia','Guid')
                                }, {
                                    name: 'asig_fechaalta',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('esiacademia','Creada'),
                                    renderer: function(value) {
                                        return Ext.util.Format.date(value,'d-m-Y H:i:s')
                                    }
                                }, {
                                    name: 'asig_usralta_nombre',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('esiacademia','Creada por')
                                }, {
                                    name: 'asig_fechamod',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('esiacademia','Modificada'),
                                    renderer: function(value) {
                                        return Ext.util.Format.date(value,'d-m-Y H:i:s')
                                    }
                                }, {
                                    name: 'asig_usrmod_nombre',
                                    xtype: 'displayfield',
                                    anchor: '100%',
                                    fieldLabel: gt.dgettext('esiacademia','Modif. por')
                                }]
                            }]
                        }]
                    }]
                }]
            });
    And thats de result: (see atached image)

    As you can see also, in my code i put buttons only in row 1, and in the result there are buttons in 3 rows. Probably the problem isn't resizing.
    Attached Images
    -------------------
    Manel Juàrez

  7. #67
    Sencha User
    Join Date
    Feb 2010
    Posts
    355
    Vote Rating
    4
    maneljn is on a distinguished road

      0  

    Default


    sorry, sorry, sorryyy

    i found my mistake.
    In this piece of code

    Code:
                                    tinymceInit: {
                                        theme : "advanced",
                                        skin: "extjs",
    the word tinymceInit must be tinyMCEConfig
    Code:
                                    tinyMCEConfig: {
                                        theme : "advanced",
                                        skin: "extjs",
    -------------------
    Manel Juàrez

  8. #68
    Ext JS Premium Member
    Join Date
    Mar 2011
    Location
    Aachen, Germany
    Posts
    47
    Vote Rating
    0
    SommerEngineering is on a distinguished road

      0  

    Question Problem with validation

    Problem with validation


    I have a problem with the validation of the editor Please read my short code below. I want to invalidate the editor if the content is to short or to long.

    Please note: The invalidate state indicator is shown at the right side (msgTarget: 'side'). This should (must) work also with the editor. You are able to see this with the textfield

    Code:
    new Ext.form.Panel(
    {
    
        bodyPadding: 5,
        url: '/...',
        layout: 'anchor'
    
        ,
    
        defaults:
        {
            anchor: '100%'
        }
    
        ,
    
        defaultType: 'textfield',
    
        fieldDefaults:
        {
            labelWidth: 125,
            msgTarget: 'side',
            autoFitErrors: false,
            allowBlank: false
        }
    
        ,
    
        items:
        [
            {
            fieldLabel: 'Topic',
            name: 'topic',
            minLength: 16,
            maxLength: 100
            }
    
            ,
    
            {
            xtype: 'label',
            html: '<p>Please type below your question.</p>'
            }
    
            ,
    
            new Ext.ux.form.TinyMCETextArea(
            {
            id: "EDITOR",
            fieldLabel: '',
            name: 'question',
            noWysiwyg: false,
            margin: "3 20 0 0",
            height: 300,
            minLength: 160,
            maxLength: 50000,
            minLengthText: "The question is too short (< 160 chars)!",
            maxLengthText: "The question is too long (> 50,000 chars)!"
    
            ,
    
            //validator: function (value)
            //{
            //    var content = Ext.getCmp('EDITOR').getValue();
            //    var plain = content.replace(/<(?:.|\n)*?>/gm, "");
            //    alert(plain.length > 160);
    
            //    return (plain.length > 160) ? true : 'The question is too short (< 160 chars)!'
            //}
    
            //,
    
            tinyMCEConfig:
            {
                theme: "advanced",
                skin: "extjs",
                inlinepopups_skin: "extjs",
                theme_advanced_row_height: 27,
                delta_height: 1,
                schema: "html5",
                plugins: "autolink,emotions,paste,fullscreen",
                theme_advanced_buttons1: "emotions,charmap,sub,sup,|,bold,italic,underline,strikethrough,|,forecolor,backcolor,|,undo,redo,|,hr,|,fullscreen",
                theme_advanced_buttons2: "image,fontsizeselect,|,link,unlink,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,outdent,indent",
                theme_advanced_buttons3: "",
                theme_advanced_buttons4: "",
                theme_advanced_toolbar_location: "top",
                theme_advanced_toolbar_align: "left",
                theme_advanced_statusbar_location: "none"
            }
            })
        ]
    })
    Anyone can help me with this problem?

  9. #69
    Sencha User
    Join Date
    Jun 2008
    Posts
    289
    Vote Rating
    16
    Qtx will become famous soon enough

      0  

    Default


    Hi SommerEngineering,

    it looks like the the validation process works not really correct in the case of automatic validation upon change There are 2 problems - an easy problem and a big one.

    1. The validation is not fired upon change. It is easy, I tell you how to fix it.
    2. I display only the red dotted line if the field is invalid. The warning sign appears behind the editor. I must think about the following things. Where to place the warning sign and how to implement the displaying behavior. The first idea is tu use the status bar of the WYSIWYG for that.

    To solve the problem 1, edit the TinyMCETextArea.js

    1. Line 461, the method me.tinyMCEConfig.onchange_callback

    Old
    Code:
          ed.save();
          
          me.fireEvent('change', me, newval, oldval, {});
    New
    Code:
          ed.save();
          
          me.fireEvent('change', me, newval, oldval, {}); 
          
          if(me.validateOnChange) 
          {
            me.validate();
          }
    2. Line 963

    Remove the line

    Code:
              ed.onChange.add(evHandler);

  10. #70
    Ext JS Premium Member
    Join Date
    Mar 2011
    Location
    Aachen, Germany
    Posts
    47
    Vote Rating
    0
    SommerEngineering is on a distinguished road

      0  

    Cool


    Thanky, Qtx I have a workaround for both, thanks to the Firebug AddOn in Firefox
    1. I dont use any longer the automatic form bind of the submit button. Inside the click event of this button, I call Ext.getCmp('MY_FORM').getForm().isValid(); This cause the TinyMCE editor to validate all.
    2. I defined my own init event for that window (I use the editor within a Window). After I create the window, I call once that init event (see first code below). Inside the init event (see second code below) I calculate the correct position for the sign.
    Init:
    Code:
     win.show();
     win.center();
     win.fireEvent("init");
    Place the warning sign:
    Code:
    init:
    {
        fn: function ()
        {
            var currentErrorElementTextfieldX = Ext.getCmp("MyTitleTextfield").errorEl.getX();
            var currentYPositionEditor = Ext.getCmp('MyEditor').getPosition()[1];
    
            Ext.getCmp('MyEditor').errorEl.setY(currentYPositionEditor);
            Ext.getCmp('MyEditor').errorEl.setX(currentErrorElementTextfieldX);
        }
    }
    For the moment, this solution is fine for me