Index: main/plugin-core-ui/resources/js/Ametys/form/field/TextArea.js
===================================================================
--- main/plugin-core-ui/resources/js/Ametys/form/field/TextArea.js	(revision 0)
+++ main/plugin-core-ui/resources/js/Ametys/form/field/TextArea.js	(revision 0)
@@ -0,0 +1,72 @@
+/*
+ *  Copyright 2015 Anyware Services
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+/**
+ * Field that displays a textarea field with a character counter bar 
+ */
+ Ext.define('Ametys.form.field.TextArea', {
+ 	extend: 'Ext.form.field.TextArea',
+ 	alias: ['widget.ametystextarea'],
+ 	
+ 	constructor: function(config)
+ 	{
+ 		config.afterSubTpl = config.afterSubTpl || Ext.create('Ext.XTemplate', [
+ 			'<div id="{id}-counter" style="padding: 2px; font-size: 0.8em; background-color: #CCCCCC; clear: both;">',
+	 			'<div style="padding-left: 5px; padding-right: 5px; color: #222222;">',
+	 				'<i18n:text i18n:key="PLUGINS_CORE_UI_FIELD_CARACTERS_COUNTER_1"/> ',
+	 				'<span id="{id}-counter-val">0</span>',
+	 				(config.maxLength == null ? '' : (' <i18n:text i18n:key="PLUGINS_CORE_UI_FIELD_CARACTERS_COUNTER_2"/> ' + config.maxLength)),
+	 			'</div>',
+ 			'</div>'
+ 		]);
+ 		this.callParent(arguments);
+ 		
+ 		this.on({
+ 			'change': this._updateCharCounter,
+ 			'keyup': this._updateCharCounter
+ 		});
+ 		
+ 	},
+    
+    /**
+     * @private
+     * Updates the char counter under the textarea field.
+     */
+    _updateCharCounter: function()
+    {
+        var count = this.getValue().length;
+        
+        var counter = document.getElementById(this.id + "-counter-val"); 
+        if (counter != null)
+        {
+            counter.innerHTML = count;
+        }
+        
+        // is there a maxlength ?
+        if (this.maxLength != Number.MAX_VALUE)
+        {
+            if (count > this.maxLength)
+            {
+                counter.style.color = "#ff0000";
+            }
+            else
+            {
+                counter.style.color = "";
+            }
+        }
+    }
+ 	
+ });
\ No newline at end of file
Index: main/plugin-core-ui/resources/js/Ametys/form/widget/DefaultWidgets.js
===================================================================
--- main/plugin-core-ui/resources/js/Ametys/form/widget/DefaultWidgets.js	(revision 33262)
+++ main/plugin-core-ui/resources/js/Ametys/form/widget/DefaultWidgets.js	(working copy)
@@ -335,7 +335,7 @@
  * It does NOT handle multiple values. 
  */
 Ext.define('Ametys.form.widget.TextArea', {
-	extend: "Ext.form.field.TextArea",
+	extend: "Ametys.form.field.TextArea",
 	
 	statics:
 	{
Index: main/plugin-core-ui/stylesheets/kernel.xsl
===================================================================
--- main/plugin-core-ui/stylesheets/kernel.xsl	(revision 33262)
+++ main/plugin-core-ui/stylesheets/kernel.xsl	(working copy)
@@ -134,6 +134,7 @@
 	        <script>/plugins/core-ui/resources/js/Ametys/form/field/ChangePassword.js</script>
             <script>/plugins/core-ui/resources/js/Ametys/form/field/ReferencedNumberField.js</script>
             <script>/plugins/core-ui/resources/js/Ametys/form/field/RichText.js</script>
+            <script>/plugins/core-ui/resources/js/Ametys/form/field/TextArea.js</script>
             <script>/plugins/tiny_mce/resources/js/tiny_mce<xsl:if test="$debug-mode">_src</xsl:if>.js</script>
             <script>/plugins/core-ui/resources/js/Ametys/form/field/Code.js</script>
             <script>/plugins/codemirror/resources/js/codemirror.js</script>