Results 1 to 5 of 5

Thread: htmlEditor in Grid

  1. #1

    Default htmlEditor in Grid

    I'm using Ext.grid.EditorGridPanel. One column is a string, and can be edited with a htmlEditor.
    I've disabled several tools, that I don't need

    var desc_edit =             new Ext.form.HtmlEditor( {enableFont: false, enableAlignments: false, enableLinks : false, enableSourceEdit: false } );
    When I'm editing the description column and have finished it, only certain settings are applied to the textfield (like backgroundcolor, color of font). When I'm using bullets or numbering, the bullets and numbering is missing and there is also no line-break in the line where the bullet or numbering is.
    Is there a way to show bullets and numbering in the textfield, after editing? Especially the line-break would be important, because otherwise the rest of the line, if a bullet is used, would not be visible

    Update: Line breaks are also not working without bullets and numbering, if I just write a text in the htmleditor . The html editor makes line-breaks automatically when I reach the end of the line, but in the textfield it is just one line after editing.
    So there are no line-breaks and you can't see the rest of the sentence.
    Attached Images Attached Images
    Last edited by sushiBMW; 4 Feb 2010 at 10:06 PM. Reason: line-break is also not working

  2. #2


    Is there no solution for a working line break in the html editor? It's neither working in FF 3.5.7 and IE 7.
    I've found some threads in the forum that had the same problem. But as my thread they got no answer...

  3. #3


    Sorry, I didn't had much time the last days.
    Maybe I should provide more information:

    This is stored in the database in the describtion attribute:

    >> oi = OpenIssue.find(2)
    >> oi.description
    => "<ul>\n<li>description of open issue this is just a test for testing purposes
    </li>\n<li>2 ;lkj;lkj;lkj;lkjl;jlkjl;kjl;kj;lkjl;kj;lkj<br><br>;lkj;lj<br></li><
    As you can see, the HTML tags are stored into the database.

    This is my EditorGridPanel:

              var gridpanel = new Ext.grid.EditorGridPanel({
                title: 'Open Issues associated to project',            
                store: store,
                clicksToEdit: 1,
                //width: 600,
                height: 200,
                plugins : filters,
                //loadMask: true,
                listeners: {
                    afteredit: function(e){
                        var conn = new;
                            url: 'open_issues/updateOpenIssues',
                            params: {
                                method: 'update',
                                field: e.field,
                                value: e.value
                            success: function(resp,opt) {
                            failure: function(resp,opt) {
                colModel: new Ext.grid.ColumnModel({
                    defaults: {
                        width: 100,
                        sortable: true
                    columns: [
                        {id: 'id', header: 'Id', dataIndex: 'id', width: 30 },
                        //{header: 'Entry Date',         dataIndex: 'entry_date',     editor: entry_date_edit, renderer: Ext.util.Format.dateRenderer('m/d/Y') },
                        {header: 'Source',             dataIndex: 'source',         editor: source_edit },
                        {header: 'Initiated by',     dataIndex: 'initiated_by',     editor: initiated_by_edit },
                        {header: 'Priority',         dataIndex: 'priority',         editor: priority_edit, width: 55 },
                        {header: 'N/D/A',             dataIndex: 'nda',             editor: nda_edit, width: 50 },
                        {header: 'Description',     dataIndex: 'description',     editor: desc_edit, width: 250 },
                        {header: 'Responsible',     dataIndex: 'responsible',     editor: responsible_edit },
                        {header: 'Due Date',         dataIndex: 'due_date',         editor: due_date_edit, width: 70, renderer: Ext.util.Format.dateRenderer('m/d/Y') },
                        {header: 'Solution',         dataIndex: 'solution',         editor: solution_edit, width: 250  },
                        {header: 'Status',             dataIndex: 'status',         editor: status_edit }
    After editing, the textfield is not showing the dots or numbering of the HTML tags.

    About the line-break:
    Can I define an automatic line-break for textfields, when the content of the textfield is longer than it's column?

    Can I use a textarea as a grid cell? I think this would solve my line-break problem.

  4. #4

    Question It happens in the example file

    I changed the edit-grid.js example file to use an htmleditor in one of the columns and I am getting the same problem.

    The grid cell receives the HTML as created by the editor, but some of the tags (ul, ol, li) are not being rendered.

    Not sure what the problem is. It may be with the gridView.
    Last edited by hhanna; 10 Feb 2010 at 7:32 AM. Reason: better answer

  5. #5

    Thumbs up Fix for applying lists (ul, ol, li) to cells with htmleditor in EditorGrid

    It is a css issue.

    If you inspect the ol, ul tags using Firebug, you'll see that the ul, ol, li tags are rendering according to the rules defined in ext-all.css (line 7). The list-styles (list-style-position, list-style-type) are being set to 'none'.

    In short, it is rendering properly according to the css rules defined in ext-all.css.

    To fix, you'll have to override the css rules. DO NOT edit the ext-all.css file. I put the following in the edit-grid.html file (these style defs & selectors aren't necessarily the "proper" ones to use, they are just what I used):
    <style type="text/css">
      .allow-lists * ul, .allow-lists * ol {
        display: block;
        margin-left: 40px;
        margin-top: 0;
        margin-bottom: 0;
      .allow-lists * ul {
        list-style-image: none;
      .allow-lists * ol {
        list-style-image: none;
      .allow-lists * li {
        display: list-item;
    You can apply the new css a number of ways. You can use a column's css config property or apply a new css rule via a renderer function. Read the documentation for both of those:

    I used the following in the edit-grid.js file to set the css in the column's config:
    var cm = new Ext.grid.ColumnModel([{
       id: 'common',
       header: 'Common Name',
       dataIndex: 'common',
       width: 220,
       // use shorthand alias defined above
       editor: new fm.TextField({
           allowBlank: false
       header: 'Light',
       dataIndex: 'light',
       width: 130,
       css: 'allow-lists',
       editor: {xtype: 'htmleditor'}
    If I were you, I'd research the default css rules for displaying lists. may be a good place to start if you want the actual default styles for the lists (the styles I posted here were thrown together).
    Attached Images Attached Images
    Last edited by hhanna; 10 Feb 2010 at 11:40 AM. Reason: added code, images, fixed typos

Posting Permissions

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