APIhttp://dorado7.bsdn.org/jsdoc/
快速入门案例
1，HelloWorld
映射规律-&HelloWorld.view.xml文件的资源路径为com/bstek/dorado/sample/basic/HelloWorld.view.xml。相应的，我访问该视图时使用的URI是/com.bstek.dorado.sample.basic.HelloWorld.d。可以自定义映射。
ViewConfig根节点
&Button&按钮
&ClientEvent name="onClick"&dorado.MessageBox.alert(&Hello World!&);（js响应）&/ClientEvent&点击事件
&Property name="caption"&Greeting from Dorado7 ...&/Property&按钮名称
2，停靠式布局
停靠式布局将整个容器的空间划分为五种，分别是left、top、right、bottom和center，对应五种停靠方式。
当一个控件被分配了上述五种停靠方式中的一种时，它总是尽可能占据那个区域的所有空间，然后将剩余的空间留给后面的控件。
DockLayout中允许除center之外的每一种停靠方式出现多次，具体空间被如何划分取决于它们被添加到布局管理器的顺序。
&Arguments&参数集
&Argument name="layoutRegion" value="background:#FDFEDA; border:1px #DBB74A padding:4 white-space: overflow:visible" /&参数名layoutRegion
&/Arguments&
&HtmlContainer content="1) left"文本内容 layoutConstraint="left"停靠left style="${argument.layoutRegion}" /&容器（类似div）参数使用方式${argument.layoutRegion}
3，锚定式布局
锚定式布局的基本思路就是设定控件的边界与容器或其它控件之间的距离。
锚定式布局不仅支持对left和top边的定位，还支持对right和bottom边的定位。
锚定式布局不仅可以将容器的边界作为锚定目标进行定位，还支持将其他控件的边界作为锚定目标进行定位。
锚定式布局不但支持以数值作为锚定值，也支持以百分比作为锚定值。
dialog1.show();显示弹出框
id="dialog1" layout="Anchor"设置布局 caption="场景1"标题栏内容 contentOverflow="hidden"隐藏超出内容 height="300" maximizeable="true" width="600"&定义弹出框
content="1) left:20; top:20" layoutConstraint="left:20; top:20" style="${argument.layoutRegion}"/&
layoutConstraint锚定布局取值
anchorLeft:previous对上一个元素左靠
anchorRight:previous对上一个元素右靠
anchorTop:previous对上一个元素顶靠
heightOffset: -40权重40%并减去40像素
4，视图拦截器
视图拦截器代码动态添加按钮，每个按钮还被指定了各自的布局条件、单击事件。
视图拦截器中的onReady方法自动注入参数。
listener="spring:dynaView#onViewInit" layout="padding:20" title="Dyna View"&//listener对应java中的类和方法,监听初始化事件
id="panelButtons" layout="Anchor"&
name="height"&200&
name="width"&600&
@Component
public class DynaView {
public void onViewInit(Panel panelButtons) {
panelButtons.setCaption("此标题是通过视图拦截器设置的");
for (int i = 1; i &= 8; i++) {
Button button = new Button();
button.setCaption("Button " + i);
AnchorLayoutConstraint layoutConstraint = new AnchorLayoutConstraint();
layoutConstraint.setAnchorLeft(AnchorMode.previous);
layoutConstraint.setLeft("5");
layoutConstraint.setTop("10");
button.setLayoutConstraint(layoutConstraint);
button.addClientEventListener(
"onClick",
new DefaultClientEvent(
"dorado.MessageBox.alert('You clicked ' + self.get('caption'));"));
panelButtons.addChild(button);
可暴露服务
JavaScript中调用异步操作
部分布局容器View子节点
layout="hbox"
&AjaxAction id="toUpperCaseAction" parameter="Hello World!"&
name="onSuccess"&dorado.MessageBox.alert(self.get(&returnValue&));&//returnValue返回值
name="caption"&转成大写&按钮名称，属性名称caption
name="service"&#toUpperCase&对应Ajax类的toUpperCase方法，属性名称service
action="toUpperCaseAction"/&定义的AjaxAction 标签id
&AjaxAction id="multiplyAction"&
&Property name="executingMessage"&正在计算...&/Property&
&Property name="service"&#multiply&/Property&
&/AjaxAction&
&ClientEvent name="onClick" signature="multiplyAction"&dorado.MessageBox.prompt(&请在这里输入任意两个乘数&, {
defaultText: &3*5&,
callback: function(text) {
var nums = text.split(&*&);
var parameter = {
num1: nums[0],
num2: nums[1]
multiplyAction.set(&parameter&, parameter).execute(function(result) {
dorado.MessageBox.alert(nums[0] + & * & + nums[1] + & = & + result);
&/ClientEvent&
&Property name="caption"&Ajax乘法&/Property&
public int multiply(int num1, int num2) {
return num1 * num2;
//捕获异常
id="errorAction"&定义errorAction
name="onFailure"&dorado.MessageBox.alert(&我就知道一定会出错！\n错误原因：& + arg.error.message);
arg.processDefault =&
name="caption"&捕获异常&//点击事件
name="service"&#errorAction&//映射方法
name="action"&errorAction&//使用action
public void errorAction() {
System.out.println(100 / 0);
layout="vbox align:left"&
id="getMemInfo"&
name="onSuccess" signature="self, arg, labelMemInfo, progressBarMemInfo, buttonGetMemInfo"&labelMemInfo.set(&text&, &空闲内存: & + arg.result.freeMemory + & 总内存: & + arg.result.totalMemory);//labelMemInfo下面定义id为labelMemInfo的&
progressBarMemInfo.set({//下面定义的ProgressBar 滚动条id为progressBarMemInfo
maxValue: arg.result.totalMemory,//滚动条最大值
value: arg.result.totalMemory - arg.result.freeMemory//滚动条当前值
if (buttonGetMemInfo.get(&toggled&)) {
setTimeout(function(){
self.execute();//self表示ClientEvent
}, 800);//0.8秒执行一次ClientEvent
name="beforeExecute" signature="labelRetrievingMemInfo"&labelRetrievingMemInfo.set(&visible&, true);&//执行前
name="onExecute" signature="labelRetrievingMemInfo"&labelRetrievingMemInfo.set(&visible&, false);//设置visible属性值&//执行后
name="caption"&提取Server端内存使用情况&
name="service"&#getMemInfo&
name="modal"&false&
id="buttonGetMemInfo"&
name="action"&getMemInfo&
name="toggleable"&true&
layout="hbox regionPadding:20"&
name="height"&20&
id="labelMemInfo"&
name="text"&------&
id="labelRetrievingMemInfo"&
name="visible"&false&
name="text"&Retrieving&
name="style"&
name="fontWeight"&bold&
name="color"&green&
id="progressBarMemInfo"&
name="width"&300&
如何点击之后改变buttonGetMemInfo.get(&toggled&)即按钮buttonGetMemInfo的toggled属性，猜测是button之后自动改变Button的toggled属性
6，javascript控制器
引入js文件
1）直接引用，view的子属性标签javaScriptFile，多个js，逗号分隔
&Property name="javaScriptFile"&&/Property&
相同目录下自动加载同名js
2）配置引用
packages-config.xml配置方式，在每一个项目的dorado-home文件夹下都有packages-config.xml配置文件
&Patterns&
&Pattern name="js" contentType="text/javascript" charset="UTF-8" mergeRequests='${configure["view.mergeJavaScript"]}' resourceSuffix=".js" /&
&Pattern name="css" contentType="text/css" charset="UTF-8" mergeRequests='${configure["view.mergeStyleSheet"]}' resourceSuffix=".css" /&
&/Patterns&
&Packages&
&Package name="common" pattern="js"&&/Package&
&Package name="syntax-highlighter-css" pattern="css" baseUri="&libraries/syntax-highlighter"&
/libraries/syntax-highlighter/shCore,
/libraries/syntax-highlighter/shThemeDefault
&/Package&
&Package name="syntax-highlighter" pattern="js" depends="jquery,syntax-highlighter-css"&
/libraries/syntax-highlighter/jquery.beautyOfCode,
/libraries/syntax-highlighter/jquery.beautyOfCode.init,
/libraries/syntax-highlighter/shCore,
/libraries/syntax-highlighter/shBrushJava,
/libraries/syntax-highlighter/shBrushJScript,
/libraries/syntax-highlighter/shBrushXml
&/Package&
&/Packages&
js绑定Xml方式
利用Javascript中的"Annotation"来完成事件的挂接
#buttonOK.onClick */按钮绑定点击事件
function buttonOK() {}
^readOnlyEditor.onCreate */批量绑定事件 button子标签属性&Property name="tags"&readOnlyEditor&/Property&
function setReadOnly(self) {}
以支持EL表达式
alert("${request.getRequestURI()}");
#buttonOK.onClick */
!function() {
alert("buttonOK Clicked.");
声明式公用方法
@View和@Global区别
@View用于标注某个方法在View中可见，@Global用于标注某个方法全局可见。
function showMessage(text) {
dorado.MessageBox.alert(text);
我们可以在其他地方（包括view.xml中或其他js文件中）通过 view.showMessage() 来调用它了
@Global的作用的是把方法标注成全局方法，我们可以在其他地方直接通过 showMessage() 来调用它。
出现多个View实例
强烈推荐首先考虑使用@View，@View可以在几乎所有场景下替代@Global。
7，单表数据维护
如何配置基本的DataType？
使用Annotation快速的定义DataProvider和DataResolver。
DataSet的概念以及DataSet如何通过DataProvider获得数据。
数据绑定控件的基本使用方法。
数据提交（即UpdateAction）的基本使用方法。
初步了解Dorado提供的HibernateDAO。
&//定义表格数据类型（列结构）
name="ProductType" parent="Bean" meta="x:75;y:45"&//定义ProductType表格显示的数据列
name="creationType"&com.bstek.dorado.sample.entity.Product&//自动导入实体类的属性作为PropertyDef
name="autoCreatePropertyDefs"&true&//开启自动创建PropertyDef
name="id" readOnly="true"/&//添加PropertyDef
name="productName" required="true"/&
title="Product Maintain"&
name="packages"&font-awesome&
id="dsProducts"&//定义数据集
name="dataProvider"&#getAll&
name="dataType"&[ProductType]&
name="pageSize"&100&
id="actionSave"&//定义数据提交action调用java
name="successMessage"&保存成功！&
name="dataResolver"&#saveAll&//调用saveAll
name="caption"&Save&//按钮文字
name="iconClass"&fa fa-save&//小图标
&//更新参数
name="dataPath"&!DIRTY_TREE&//用于描述希望提交DataSet中哪些数据的数据路径
name="dataSet"&dsProducts&//使用数据集
layoutConstraint="top"&
name="ignored"&false&
name="dataSet"&dsProducts&
name="itemCodes"&pages,|,pageSize,|,+,-,x&
name="action"&actionSave&
name="dataSet"&dsProducts&//表格
name="scrollMode"&viewport&//滚动条
@Component
public class SimpleCRUD {
private ProductDao productD
@DataProvider
public Collection&Product& getAll() throws Exception {
return productDao.getAll();
@DataProvider
public void getAll(Page&Product& page) throws Exception {
productDao.getAll(page);
page.setEntities(p.getResults());
page.setEntityCount(p.getTotalCount());
@DataResolver
@Transactional
public void saveAll(Collection&Product& products) {
productDao.persistEntities(products);
DataPilot是数据导航条控件，主要用于数据分页导航显示等
在@DataProvider方法的参数中加Page&T& page对象自动注入
8，主从表视图
SplitPanel
主要作用是通过分隔栏将页面上的空间分为两块，继承Control控件， SplitPanel的direction属性设置（上下左右）默认左右，支持局部区域最小化缩进，position设置位置大小，子标签MainControl主组件，SideControl
Container继承Control控件，是一个容器控件
DataType 的属性
meta="child:Product" 被Product继承
parent="BaseProduct" 继承BaseProduct
name="Category" parent="global:Category" meta="x:75;y:15"&
name="products"/&
dataSet="dsCategories"&
name="selectionMode"&none&
name="products"/&
name="products"&
name="dataProvider"&productInterceptor#getProductsByCategoryId&
name="parameter"&$${this.id}&
可以在DataGrid中使用以下方式来获得数据表。
name="dataPath"&#.products&
name="dataSet"&dsCategories&
每点击DataGrid
dsCategories一行数据，重新获取一次DataGrid products的数据
10，MapValue映射
实现改写表的一列数据，将对应显示值通过一一映射改写（ajax方式）
&DataType name="Employee" parent="global:Employee"&
&PropertyDef name="titleOfCourtesy"&
&Property name="mapping"&
&Property name="mapValues"&${dorado.getDataProvider(&employeeInterceptor#getTitlesOfCourtesy&).getResult()}&/Property&
&/Property&
&/PropertyDef&
&/DataType&
@DataProvider
public Map&String, String& getTitlesOfCourtesy() {
Map&String, String& mapValue = new LinkedHashMap&String, String&();
mapValue.put("Mr.", "Mister");
mapValue.put("Mrs.", "Mistress");
mapValue.put("Ms.", "Miss");
mapValue.put("Dr.", "Doctor");
return mapV
&DataColumn&方式修改显示的字段样式
&ClientEvent name="onRenderCell"&
$(arg.dom).empty();
var status=arg.data.get(&status&);
if(status==&失败&){
arg.dom.innerHTML=&<strong&<font color='red'&失败</font&</strong&&;
&/ClientEvent&
11，递归树
动态生成的可打开式菜单
//categories:是一个CategoryNode组合的数组对象，其数据来自"main#getCategories";
//examples:是一个BaseExample组合的数组对象，其数据来自"main#getExamplesByCategoryId";
//$${this.id}以当前CategoryNode的id属性作为两个reference的dataProvider调用时的参数传入。
name="CategoryNode" parent="BaseExampleCategory"&
name="categories" dataType="[CategoryNode]" dataProvider="main#getCategories" parameter="$${this.id}" /&
name="examples" dataType="[BaseExample]" dataProvider="main#getExamplesByCategoryId" parameter="$${this.id}" /&
id="dsCategories" dataType="[CategoryNode]" dataProvider="main#getCategories" /&
//treeExamples绑定了dsCategories对象,并通过BindingConfig定义节点属性。
id="treeExamples" dataSet="dsCategories" width="300" height="400"&
childrenProperty="categories" labelProperty="label" recursive="true" icon="&images/folder.gif"&
childrenProperty="examples" labelProperty="label" icon="&images/file.gif" /&
//childrenProperty="categories"表示子节点通过CategoryNode的categories获取
//labelProperty表示树节点初始化时,默认以树节点所绑定对象的哪个属性(本例为label)作为节点标题显示。
//recursive属性是用来定义是否一个递归的BindingConfig,如果递归则内部会继续按照如下的规则加载树节点
12，虚拟属性下拉选择
DataSetDropDown
@DataProvider
public Collection&Product& getProducts(Map&String, Object& parameter) {
String productName = (String)parameter.get("filterValue");
return productDao.find("from Product where category.productName ='" + productName + "'");
onSetFilterParameter
!function(self, arg) {
arg.filterValue = "自定义的值";
!function(self, arg) {
arg.dataSet.set("parameter",{
categoryId:1,
deptId:"SH001"
filterOnTyping = false 模糊搜索 默认关闭
reloadDataOnOpen 是否在打开下拉框时重新加载（上下联动）
useDataBinding true下拉框与DataSet之间建立数据绑定，onFilterItem不会触发,数据过滤动作也将交由DataSet来
false 则一次性读取下拉数据，之后与DataSet不再产生关系，并且后续的数据过滤等操作也将与dorado.widget.ListDropDown的实现方式一致。
ListDropDown
items属性定义下拉框的数据
1利用逗号分割符定义，2利用IDE的向导工具定义，3利用JSON定义，4通过DataProvider提供数据
通过displayProperty定义下拉数据默认显示对象中那个属性。
望以表格的形式展现多个属性的时候，就需要利用ListDropDown的DataColumn子元素
DataColumn通过property与对应的下拉框行数据对象的某一个属性绑定：
Trigger与编辑框相关联的事件触发器。
onExecute事件我们可以定义上图按钮图标的单击事件
AutoForm是一种自动表单，是AutoFormElement的一个集合，内部可以定义多个AutoFormElement
cols="*" dataSet="dsOrders"&
表单文本框
name="property"&shipCity&
表单下拉框
id="ddEmployees" dynaFilter="true"&
name="dataSet"&dsEmployees&
name="autoOpen"&true&
name="assignmentMap"&employeeId=id,employeeName=firstName&
name="displayProperty"&firstName&
name="property"&employeeName&
name="trigger"&ddEmployees&
property="orderDate"&
name="type"&date&
name="trigger"&defaultDateDropDown&
表单不可操作文本
name="property"&employeeId&
name="readOnly"&true&
13，简单查询 1
AutoForm表单数据
AutoForm对象formCondition,如果我们直接通过.get("entity")方法，会自动返回给我们一个JSON对象。我们将这个 JSON对象直接赋值给dsOrders的parameter参数,并调用dsOrders的flushAsync激活Java服务层定义好的query 方法，执行查询。
dsOrders.set("parameter", formCondition.get("entity")).flushAsync()
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：7050次
排名：千里之外
原创：50篇
(2)(18)(2)(6)(17)(9)(4)dorado前台控件属性js技巧 -
- ITeye技术网站
博客分类：
1.前台取系统时间${Util.getDate("yyyy-MM-dd")}
设置序列oracle.sequence
OMS_SEQUENCE
前台取session的值
${Session.omsuser.userName}
取request的值
"${Request.TASK_NO}"
2.Label，TextEditor，Label，Element Renderer等 FieldLabel的ID为: formName_fieldlabel_fieldName TextEditor以及CheckBox的ID为: formName_eidtor_fieldName Label的ID为:formName_label_fieldName Element Renderer的ID为:formName_groupName_ElementName_renderer FormGroup的id的生成规则是：AutoForm ID_group+index，其中index为Group的顺序，从0开始。 比如该示例的第二个FormGroup的ID是formEmployee_group1
3.第一个问题，若根据的条件是根据dataset的某一列的值，在DataTable的该Column的onRefresh (column, row, cell, value, record)事件中，根据value的值，来改变column的颜色。 column.style.color = "red"; 第二个问题：DataTable有Column有readOnly属性，Dataset的Field有readOnly属性，设置这两个都是可以的。 取得DataTable有Column：table.getColumn("") 取得Dataset的Field：dataet.getField(""); 最后可能需要刷新一下： table这么使用：table.refresh(); dataset这么使用：dataet.refreshControls(); row.style.color = "#00000"; if(value==9) { row.style.backgroundColor="#D83A3A"; }else { row.style.backgroundColor="";
if(value & 3000){
row.style.backgroundColor = "red"; } cell.innerHTML =
4.由于客户端没有AutoForm对象，所以无法直接AutoForm对象，不过AutoForm生成的label和texteditor还是有规律可循的。在页面中： FieldLabel的ID为: formName_fieldlabel_fieldName TextEditor以及CheckBox的ID为: formName_eidtor_fieldName Label的ID为:formName_label_fieldName Element Renderer的ID为:formName_groupName_ElementName_renderer
若要控制AutoForm中组件的数据，则建议操作Dataset对象，而不是具体的组件。一般来说，我们只是控制AutoForm中的组件显示以及只读属性。 示例代码如下：
/** *控制TextEditor的可见性 */ formName_eidtor_fieldName.style.display="none"; /** *控制TextEditor的可读性 */ formName_eidtor_fieldName.setReadOnly(true);
若是控制AutoForm中的组件的只读，建议使用setReadOnly方法，不要直接调用formName_eidtor_fieldName.readOnly=true，因为dorado对TextEditor进行了一些封装，所以只设置readOnly属性是不能达到目的目的。
5.select sequencetable.NextVal from dual ----查询ORACLE序列
6.关闭tabset的标签
7.修改表格的样式&style&.DataTable .HeaderGrid
{ text-align:
8.各种subwindow的关闭requestCommand请求新的页面
SubWindow.hideParent();customDropdown请求的
DropDown.closeFrame();一般的SubWindow请求的
SubWindow.hide();
9./*datasetDropdown的自动匹配功能，
*应用：在from表单对应字段的textEdit的onKeyDown(editor,evt)中调用
对应dropdown的数据集要配置parameters
*editor是文本框；dropdown是dropdown下拉框,str是labelfield字段
*/function autocomplete(editor, dropdown,str) {
var dataset = dropdown.getDataset();
var keyCode = window.event.keyC
var oldValue = dataset.parameters().getValue(str);
if ((keyCode &= 48 && keyCode &= 90)||(keyCode &= 96 && keyCode &= 105)
|| keyCode == 8 || keyCode == 32 || keyCode == 40 || keyCode == 46
|| keyCode == 229) {
setTimeout(function () {
var v = editor.
if (v != oldValue) {
dataset.parameters().setValue(str, v+"%");
dataset.flushData();
if(!dropdown.isOpened(editor) && keyCode != 13) {
dropdown.open(editor);
10./*给列表做一个排序号
*ds目标数据集，index指虚拟的排序号
*调用方法是在dataset的afterscroll中调用该方法，并给数据添加一个index的虚拟字段
*/function refreshIndex(ds,index){
var record = ds.getFirstRecord();
while (record) {
record.setValue(index,i++);
record = record.getNextRecord();
转自： 谢谢
浏览: 13730 次
来自: 上海
原有date类型的样式全部变了,怎么能不变呢
怎么不改变原有日期控件的样式?
正是我想要的！
我的服务给我关了找了半天都没找着
woguanqihu 写道我觉得你发例子效果会更好,呵呵建议建 ...下拉框中的下拉数据的来源可以有多方面的，下面我们为你介绍的是DataSetDropDown控件，DataSetDropDown控件可以将视图中的一个DataSet中包含的数据作为下拉框中数据的来源。创建视图在sample.chapter09下新建视图DataSetDropDown，由于DataSetDropDown控件支持DataSet绑定，需要为视图添加一个DataSet对象作为数据的来源，本例中我们直接将sample.chapter05中SimpleCRUD视图中的dsProducts复制过来，并在视图中添加一个TextEditor控件和一个DataSetDropDown控件。设定控件的相关属性设定DataSetDropDown的属性：属性值 说明iddropdown1控件dropdown的IDdataSetdsProduct设定下拉框的数据来源设定TextEditor的属性：属性值 说明triggerdropdown1利用trigger机制，关联dropdown1控件浏览测试保存后可以查看页面。displayProperty和property在页面中的下拉框已经显示，但是其中的显示数据是Entity对象，下面我们改进显示效果，设定DataSetDropDown的属性：属性值 说明displayPropertyproductName用于显示propertyproductName实际回写的值保存当前的视图，并重新测试效果：对于一个实体对象，我们可以通过displayProperty与property属性控制下拉框展示的数据内容以及最终下拉选择后实际赋值的处理逻辑。assignmentMap在一些场景下，可能会有多个回填的值，如选择一个产品，希望能同时回填产品名称，产品价格，库存数量等多个属性，则可以通过DropDown的assignmentMap属性设定，如:productName,unitPrice,unitsInStock多个属性之间以逗号分割。另外当两个不同的数据实体间进行赋值时，有可能属性名称不完全一样，则可以做map映射：proName=productName,uPrice=unitPrice,uStock=unitsInStock等号后面的值代表下拉项中的属性名，等号前面的值代表被赋值属性名。宽度调整本例中由于产品名称稍长，我们修改DataSetDropDown的width属性：属性值width300保存视图，并重新刷新页面测试下拉框，可以发现下拉框的宽度已经改变。数据过滤对于DataSetDropDown，在某些场景下由于下拉的数据量较大，如果让用户通过下拉滚动栏定位到自己需要的下拉选项可能比较费劲。因此提供一个数据过滤查询功能就特别重要。数据trigger过滤为了支持数据过滤，首先我们调整dsProducts的dataProvider方法为我们在sample.chapter05中SimpleCRUD.java里面定义的query1方法,便于做查询处理:然后我们打开DataSetDropDown的过滤功能(设置dynaFilter属性为true)：保存视图，并在浏览器中刷新页面:打开下拉框后，在上面的页面中我们看到出现了两个新的trigger图标。这两个trigger图标分别代表过滤查询和刷新的功能.这个时候我们将SimpleCRUD.java中的query1方法中增加一个断点:然后尝试着在编辑框中输入T，并单击第一个trigger按钮，这个时候会自动激活debug调试界面:在调试界面中我们看到查询的trigger按钮将编辑框中的&T&上传到query1方法中，query1执行结束后，在浏览器中我们就能看到所有产品名称中含T的产品的一个列表:如果我们再单击第二个刷新的trigger图标按钮，则下拉框的数据就会恢复原样。
数据实时过滤上面的例子中，数据过滤是发生在打开下拉框后，输入数据，并单击过滤按钮时才触发的，如果我们希望实时触发，则可以设置DataSetDropDown的autoOpen属性为true,且filterOnTyping的属性为true:设置autoOpen属性为true是为了光标激活所绑定的TextEditor控件的时候就自动打开下拉框:filterOnTyping属性是为了，当我们在编辑框中输入值的时候自动的根据输入的内容做过滤，如我们输入T:下拉框就自动的将数据过滤出来。