PDA

View Full Version : htmlEditor in Grid



sushiBMW
4 Feb 2010, 9:54 PM
Hello,
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.

sushiBMW
7 Feb 2010, 5:31 PM
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...

sushiBMW
9 Feb 2010, 7:22 PM
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><
/ul>"
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 Ext.data.Connection();
conn.request({
url: 'open_issues/updateOpenIssues',
params: {
method: 'update',
id: e.record.id,
field: e.field,
value: e.value
},
success: function(resp,opt) {
e.commit();
},
failure: function(resp,opt) {
e.reject();
}
});
}
},


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.

hhanna
10 Feb 2010, 6:42 AM
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.

hhanna
10 Feb 2010, 8:21 AM
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;
list-style-position:outside;
list-style-type:disc;
}
.allow-lists * ol {
list-style-image: none;
list-style-position:outside;
list-style-type:decimal;
}
.allow-lists * li {
display: list-item;
}
</style>

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: http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.Column (http://www.extjs.com/forum/../deploy/dev/docs/?class=Ext.grid.Column)

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. http://www.w3.org/TR/css3-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).