预览

基本使用

ListBox中的元素通过items属性定义，如:

listBox.set("items",[
	"Chai",
	"Chang",
	"Aniseed Syrup",
	"Chef Anton's Cajun Seasoning",
	"Chef Anton's Gumbo Mix"
]);

技巧一:IDE设计items

如果不想通过JS定义，也可以直接在IDE中设计：

选择Edit..按钮打开设计器设置：

技巧二:利用JSON定义items

listBox.set("items",[
	{productId:"1", productName:"Chai"},
	{productId:"2", productName:"Chang"},
	{productId:"3", productName:"Aniseed Syrup"},
	{productId:"4", productName:"Chef Anton's Cajun Seasoning"},
	{productId:"5", productName:"Chef Anton's Gumbo Mix"}
]);

listBox.set("property", "productName");

通过上面的代码我们将一个JSON数组设置到ListBox的items属性中，之后再设置列表中显示内容对应JSON中的那个属性。

技巧三:利用现有的EntityList或JSON数组

listBox.set("items", dataSet.getData());

当然了，如果数据是来自DataSet，则建议直接使用DataListBox

技巧四：JS动态设置当前行

var items = ["Chai", "Chang", "Aniseed Syrup", "Chef Anton's Cajun Seasoning", "Chef Anton's Gumbo Mix" ];
listBox.set("items", items);
listBox.set("currentIndex", 2);

重要属性说明

selectionMode

ListBox支持多选设定功能，使用时需要将其selectionMode设置为singleRow或multiRows，这样我们就可以通过ListBox的如下方法获取当前选中的行：

var selectionMode = listBox.get("selectionMode");
var datas = listBox.get("selection");
if (selectionMode=="singleRow"){
      dorado.MessageBox.alert(datas.productName);
}
if (selectionMode=="multiRows"){
	for (var i=0; i<datas.length; i++){
	      dorado.MessageBox.alert(datas[i].productName);
	}
}

需要特别指出的如果selectionMode的值为multiRows的时候还支持 shift 和 ctrl 的快捷键操作，效果：

highlightCurrentRow

一些特殊场景下，ListBox可能不需要有交互功能，仅仅用来展现数据，那么其当前行可能没有任何意义，这种情况下我们可以设置highlightCurrentRow为false。效果：

默认情况下highlightCurrentRow为true。效果：

highlightHoverRow

highlightHoverRow是用于控制当鼠标暂停在ListBox中的某一数据行上的时候是否高亮显示，如下图左侧就是highlightHoverRow为true的效果，右侧是highlightHoverRow为false的效果

allowNoCurrent

highlightCurrentRow为true情况下，如果我们选择其中一行数据就会有高亮的背景显示，如图：

并且这个时候ListBox会将这一行作为自身的currentItem属性，你可以直接通过如下的JS代码获取：

var data = listBox.get("currentItem");
var productName = data.get("productName");//如果listBox中的数据是EntityList的话
var productName = data.productName;//如果listBox中的数据是JSON数组的话

currentItem用于界面操作的一个辅助属性，因而是一个只读属性，你无法通过JS代码动态设置currentItem的值。如果你希望清空currentItem的值，只要将ListBox的allowNoCurrent设置为true，之后只要在ListBox的空白区域单击即可取消currentItem的设置：

快捷键说明

快捷键	功能说明
home	当前光标定位到第一行
end	当前光标定位到最后一行
up	向上移动一行
down	向下移动一行

Dorado 9 : ListBox(DCUG)

预览