Dorado 9 : TextEditor(DCUG)

效果预览

如上图中的id, 名和姓都是使用TextEditor控件展现数据的,并且可以编辑操作。

基本使用

TextEditor在不做数据绑定情况下,其基本使用方式与<input type="text"></input>基本一样。

TextEditor提供dataSet,dataPath和property属性,支持与DataSet中指定Entity对象的一个属性绑定。

关于DataSet和DataPath的设定和使用技巧请参考:DataControl(DCUG)#显示单实体对象的一个属性

绑定后的TextEditor控件会自动与Entity对象同步,例如如果我们希望通过代码修改TextEditor中的值,就没必要直接访问TextEditor对象,而是直接修改Entity对象的值,修改好之后DataSet会自动刷新TextEditor控件中的显示值。

另外TextEditor从从dorado.widget.Control继承下来的,一些基本的属性请参考:Control(DCUG)

另外TextEditor中有关数据校验的设定,都是在其数据模型对象DataType上定义的:

有关DataType中定义校验器的详细说明参考:Validator使用说明

详细属性说明

blankText

如图,blankText属性是用于该编辑框内容为空的时候你希望出现如下的一个提示信息。

displayFormat

displayFormat属性较少使用,一般情况下都我们都是设定所绑定的DataType中对应PropertyDef的displayFormat属性。根据TextEditor的数据绑定特性,它会自动继承PropertyDef中配置的displayFormat特性。

只有以下两种情况,我们才有可能会使用这个属性:

  • 在TextEditor未绑定Dataset,并且希望对数据的现实格式做自定义的处理;
  • 一个DataType的PropertyDef关联了多个不同的TextEditor,并且这些TextEditor控件需要有不同的displayFormat特性的时候;

displayFormat一般情况下我们都是针对数字或日期做格式化处理,举例:

var date = new Date();
date.formatDate("Y-m-d");   // 返回类似"2000-09-25"的字符串
date.formatDate("H:i:s");   // 返回类似"23:10:30"的字符串
date.formatDate("Y年m月d日 H点i分s秒");  

数字格式化:

var $formatFloat = dorado.util.Common.formatFloat;
$formatFloat(123456789.789, "#,##0.00"); // 123,456,789.79
$formatFloat(123456789.789, "#"); // 123456790
$formatFloat(123456789.789, "0"); // 123456790
$formatFloat(123, "#.##"); // 123
$formatFloat(123, "0.00"); // 123.00
$formatFloat(0.123, "0.##"); // 0.12
$formatFloat(0.123, "#.##"); // .12
$formatFloat(-0.123, "0.##"); // -0.12
$formatFloat(-0.123, "#.##"); // -.12
$formatFloat(1234.567, "$#,##0.00/DAY"); // $1,234.57/DAY
$formatFloat(02145375683, "(###)########"); // (021)45375683

根据以上范例的格式设置displayFormat属性,如:

详细格式说明请参考JSDOC中的

  • Date的formatDate()函数
  • dorado.util.Common的formatFloat()函数

editable

editorable用与控制编辑框的可编辑属性,与readOnly属性类似,唯一不同之处在于,如果此时编辑框还绑定了下拉框,则readOnly为true会禁止下拉框操作,而editable为false时,并不会禁止下拉框的操作,而仅仅是编辑框本身不能编辑和修改数据。

设置readOnly为true情况下的效果图(出生日期,此时日期下拉框单击无法打开):

 

maxLength和minLength

设置编辑文本的最大长度和最小长度值

required

如果将TextEditor的required设置为true,那么在页面编辑的时候如果将这个TextEditor的内容清空,就会有"内容不能为空。"的提示信息。

selectTextOnFocus

如下为selectTextOnFocus为true情况下,当光标从别处移动到编辑框时,会自动将当前所有的文本选中:

如下为selectTextOnFocus为false情况下,当光标从别处移动到编辑框时,不会将当前所有的文本选中:

supportsDirtyFlag

是否支持脏状态标记的显示。

如果将该属性设置为true,你修改了编辑框的值后,在编辑框的右上角有一个红色的脏状态标记,表示该记录被修改过(注意看产品名称编辑框的右上角)

如果将该属性设置为false,则修改数据后不会在编辑框的右上角提供脏状态标记:

text

文本编辑器中的文本内容.

你可以通过该属性访问和设置TextEditor中的文本内容。不过这种用法并不常用,大多数情况下TextEditor与DataSet绑定,我们应该通过DataSet直接访问和修改绑定的Entity对象的值,而让DataSet自动的刷新TextEditor控件中的值,而不是直接访问TextEditor控件。

只有在TextEditor未绑定任何DataSet的的情况下才有可能直接使用这个属性。

typeFormat

同:DataColumn(DCUG)#typeFormat

mapping

详细参考:01. mapping

大多数情况下,我们不需要在TextEditor中设置mapping,而是将这个配置设置到DataType中,这样更方便使用

text和value的差别

由于TextEditor具有displayFormat特性,因此当你通过text属性获取的值,并不一定是真正的值,如果想获取内部值,请通过value属性获取:

var value = editor.get("value");

特别注意:

大多数情况下,我们不需要通过TextEditor中设置或获取vlaue值,而是直接通过绑定的Entity对象获取:

var value = entity.get("productName");

entity.set("unitPrice", 3000);

trigger

可以通过trigger属性设置Trigger按钮,详情参考:Trigger(DCUG)

如果希望设置多个Trigger,用逗号或分号隔开:

数据校验

特别注意:

大多数情况下,我们不需要通过TextEditor中设置数据校验特性,而是直接通过DataType设置,这样更方便。

TextEditor中的以下几个特性请参考DataType中的相关说明

  • validators
  • validationState
  • validationMessages

快捷键说明

esc快捷键说明

当我们在一个编辑中修改编辑框的默认值的时候,在光标离开这个编辑框之前,如果按Esc快捷键,就会自动取消当前的数据修改,恢复到原始值,如下的:

当我们修改Chai为Chai123456后,再按Esc快捷键,值就会恢复到Chai

f7快捷键说明

当编辑框中包含Trigger按钮的时候,按f7就会自动调用trigger按钮的onClick事件,如过是下拉框其作用就是打开这个下拉框:

如果TextEditor控件有多个Trigger按钮,那么默认只触发第一个Trigger按钮的onClick事件。

enter快捷键

触发TextEditor的post()事件,并自动将焦点切换到下一个控件上。

alt+down

同F7快捷键功能