动态创建列表框的处理程序设计

Question

我正在尝试创建一个允许用户为电子表格中的每个议程项目选择操作的用户界面。用户选择操作后，我想用选择更新电子表格。由于电子表格中的数据不是静态的，因此UI是动态编写的。

这就是我创建列表框的方式：

// add labels and a drop down box of actions for each agenda item mark for today
for (i = 0; i < labels.length; i++) {
// labels is an array of objects
var topic = labels[i]['topic'];

// add label to grid
myGrid.setWidget(i, 0, myApp.createLabel(topic));

// the id of each listbox is the content of its corresponding label
var id = ObjApp.camelString(topic)
var lboxActions = myApp.createListBox().setId(id);

//add items to listbox
lboxActions.addItem('Select');
lboxActions.addItem('Add to agenda');
lboxActions.addItem('Move to another meeting');
lboxActions.addItem('Move to a special meetin');
lboxActions.addItem('Move to email');

//add drop down list to grid
myGrid.setWidget(i, 1, lboxActions);

}

我有3个问题：

1）哪种设计更好？

a）设计1 ：每个列表框旁边的保存按钮。

b）设计2 ：底部有一个提交按钮以保存每个条目

2）我如何收集用户选择的信息？我该如何编写这样的处理程序？我为每个设计添加了以下代码，但我认为我做得不对。

a）设计1 ：以下几行代码被添加到上述for循环中

var buttonSave = myApp.createButton('Save');
myGrid.setWidget(i, 2, buttonSave);

var handlerSelection = myApp.createServerHandler('selectAction');
handlerSelection.addCallbackElement(mainPanel);
buttonSave.addClickHandler(handlerSelection);

b）设计2 ：在for循环之外添加了以下代码行

//update spreadsheet when user click "submit"
var handlerUpdate = myApp.createServerHandler('responseToSubmit');
handlerUpdate.addCallbackElement(mainPanel);
buttonSubmit.addClickHandler(handlerUpdate);

mainPanel.add(myGrid);
mainPanel.add(buttonSubmit);
myApp.add(mainPanel);

3）如何为处理程序编写函数？这些不正确，因为我无法从列表框中提取信息。

a）设计1

function responseToSave(e) {

   var name = e.parameter.source;
   var selection = e.parameter.name;

   var selectionObj = new Object();

   selectionObj['status'] = selection;
   selectionObj['name'] = name;

   choicesMade.push(selectionObj)

   Logger.log(choicesMade);
   return choicesMade;
}

b）设计2

function responseToSubmit(e) {
  var myApp = UiApp.getActiveApplication();

  for (i=0; i < labels.length; i++) {
     var lboxId = ObjApp.camelString(labels[i]['topic']);

     //[EDIT] e.parameter.lboxId would not work because lboxId is a string 
     var selection = e.parameter[lboxId];

     choicesMade[labels[i]] = selection;
     }

  Logger.log(choicesMade);
  return choicesMade;
}

由于

Answer 1

Q1： 设计纯粹取决于您的应用程序的用途以及用户的使用方式。没有“更好”的设计 - 每个都有自己的优点和缺点，选择将取决于您的应用程序的使用方式。 但是，还要考虑设计3，它会在下拉框更改时保存更改。用户只需点击一下

Q2和Q3： 您应该在listBox上使用setName

var lboxActions = myApp.createListBox().setId(id).setName(id); 

我通常使用相同的字符串作为id和名称以避免混淆，但是你应该使用setName 之后，您可以访问在处理函数中选择的项目

e.parameter.id

最后，在buttonSave上，您应该使用addClickHandler而不是addChangeHandler。