Results 1 to 5 of 5

Thread: HTMLEDITOR overflows horizontally

  1. #1
    Sencha User
    Join Date
    Dec 2015
    Posts
    14
    Answers
    1

    Default Answered: HTMLEDITOR overflows horizontally

    I notice that if y use TAB key to navigate inside the html editor, when it reaches the right limit, it jumps to the next line but not from the left margin, but from somewhere in the middle, and then as it reaches the right limit it overflows and scrollbar appears.

    If I keep pressing the tab key, it keeps going right indefinitely. Then if I start typing letters as normal typing, it continuous for a while in that long line, and the jumps to the next line.

    My goal is to set the html editor to makes reports in an A4 format.

    I post my code bellow.





    Ext.define('IRSM.view.informes.InformesWindowForm', {
    extend: 'Ext.window.Window',
    requires: ['Ext.form.Panel'],
    xtype: 'informeswindowform',
    width: 800,
    height: 500,
    bodyPadding: 10,
    closable: false,
    title: 'IRSM - Informes',
    initComponent: function () {
    var me = this;
    Ext.applyIf(me, {
    items: [{
    xtype: 'form',
    layout: {
    type: 'anchor'
    },
    boddyPadding: 10,
    border: false,
    items: [{
    xtype: 'fieldset',
    padding: 10,
    fieldDefaults: {
    anchor: '100%'
    },
    title: 'Nuevo Informe',
    items: [{
    xtype: 'htmleditor',
    height: 350,
    width: 650,
    name: 'informe',
    enableSourceEdit: false,
    shrinkWrap: 2
    }]
    }, {
    xtype: 'toolbar',
    ui: 'footer',
    items: [{
    xtype: 'button',
    itemId: 'cerrarInformeBtn',
    text: 'Cerrar',
    iconCls: 'cancel'
    }, '->', {
    xtype: 'button',
    itemId: 'imprimirInformeBtn',
    text: 'Imprimir',
    iconCls: 'icon-print'
    }, {
    xtype: 'button',
    itemId: 'guardarInformeBtn',
    text: 'Guardar',
    iconCls: 'save'
    }]


    }]
    }]
    });
    me.callParent(arguments);
    }
    });

  2. I fixed adding to Ext.form.field.HtmlEditor private method fixKeys: the following code

    Code:
    if (Ext.isChrome) {
                return function(e){
                    var me = this,
                        k = e.getKey(),
                        readOnly = me.readOnly;
                    if (k === e.TAB) {
                        e.stopEvent();
                        if (!readOnly) {
                            me.win.focus();
                            me.execCmd('InsertHTML','       ');
                            me.deferFocus();
                        }
                    }
                };
            }
    It is working as for now. If someone has a better or more appropriate fix, please post it here.

  3. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    With which specific version of Ext JS are you seeing this? I'm not sure that the htmleditor is the best tool for creating such specifically sized reports.

  4. #3
    Sencha User
    Join Date
    Dec 2015
    Posts
    14
    Answers
    1

    Default

    The version I'm using is Ext JS 4.2. The reports have to be written manually, and then printed. I already got to get it print, as long as the html editor has de correct width size the browser arranges it in the selected printing format. I choose the html editor because it has typing capabilities, such as font size, font family, alignment, etc.

  5. #4
    Sencha User
    Join Date
    Dec 2015
    Posts
    14
    Answers
    1

    Default

    Using the web browser (chrome) inspector, on tab key press, the editor sets an span tag, like the following:

    HTML Code:
    <span style="white-space:pre">    </span>
    (using netbeans connector)
    HTML Code:
    <span class="Apple-tab-span" style="white-space:pre">    </span>
    (without using netbeans connector)

    When typing space key the editor sets an
    HTML Code:
     &nbsp;

  6. #5
    Sencha User
    Join Date
    Dec 2015
    Posts
    14
    Answers
    1

    Default First Fix

    I fixed adding to Ext.form.field.HtmlEditor private method fixKeys: the following code

    Code:
    if (Ext.isChrome) {
                return function(e){
                    var me = this,
                        k = e.getKey(),
                        readOnly = me.readOnly;
                    if (k === e.TAB) {
                        e.stopEvent();
                        if (!readOnly) {
                            me.win.focus();
                            me.execCmd('InsertHTML','&nbsp; &nbsp; &nbsp; &nbsp;');
                            me.deferFocus();
                        }
                    }
                };
            }
    It is working as for now. If someone has a better or more appropriate fix, please post it here.

Similar Threads

  1. Ext.ux.BoxReorderer: disable if container overflows
    By olecom in forum Ext:User Extensions and Plugins
    Replies: 2
    Last Post: 10 Apr 2014, 3:46 AM
  2. text in the qtip overflows
    By xrx215 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 26 Apr 2010, 8:28 AM
  3. Replies: 1
    Last Post: 7 Jun 2008, 12:27 PM
  4. ComboBox with many records overflows page
    By ferr in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 14 Nov 2007, 8:00 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •