显示弹出面板答案

【问题标题】：Displaying PopupPanel显示弹出面板
【发布时间】：2013-10-10 17:17:51
【问题描述】：

三个问题：

为什么我的 popupPanel 显示不正确？
如何才能让它在多次点击时只出现一次？
如何向 popupPanel 添加关闭按钮？

function showPassword(e){
  var app = UiApp.getActiveApplication();
  var vrtPanel = app.getElementById("vrtPanel");
  //Create Spreadsheet Source

  var spSheet = SpreadsheetApp.openById('0Aur3owCpuUY-dF92dGp3c2RORGNkY011dGFnMjBXbXc');
  var spTeacherList = spSheet.getSheetByName('TeacherList');

  //Create the form elements
  var hdlTeacherName = app.createServerHandler('getTeacherName').addCallbackElement(vrtPanel);
  var lbxTeacherName = app.createListBox().setId('lbxTeacherName').setName('lbxTeacherName').addChangeHandler(hdlTeacherName);
  var lstTeacherNames = spTeacherList.getRange(1,1,spTeacherList.getLastRow(),1).getValues();
  lstTeacherNames.sort();

  for (var l = 0; l < lstTeacherNames.length; l++) {
    lbxTeacherName.addItem(lstTeacherNames[l],l);
  }

  var lblTeacherName = app.createLabel('Teacher Name:');
  var txtTeacherName = app.createTextBox().setName('txtTeacherName').setId('txtTeacherName').setVisible(false);

  var lblExt = app.createLabel('Ext:');
  var txtExt = app.createTextBox().setName('txtExt').setId('txtExt');

  var lblEmail = app.createLabel('Email:');
  var txtEmail = app.createTextBox().setName('txtEmail').setId('txtEmail');

  var lblSchool = app.createLabel('School:');
  var txtSchool = app.createTextBox().setName('txtSchool').setId('txtSchool');

  var btnCreate = app.createButton('Create Event');

  //Create validation handler
  var valSubmit = app.createServerClickHandler('valSubmit');
  valSubmit.addCallbackElement(vrtPanel);

  //Add this handler to the button
  btnCreate.addClickHandler(valSubmit);

  //Add all the elemnts to the panel
  var formTable = app.createFlexTable().setCellPadding(3);
  vrtPanel.add(formTable);
  formTable
  .setWidget(0,0,lbxTeacherName)
  .setWidget(0,1,txtExt)
  .setWidget(0,2,txtTeacherName)
  .setWidget(1,0,txtEmail)
  .setWidget(2,0,btnCreate);

  //Add all the panel to the popup
  var popPassword = app.createDecoratedPopupPanel(false, true).setId("popPassword");
  popPassword.add(vrtPanel);

  app.add(vrtPanel);
  app.add(popPassword);
  return app;
}

【问题讨论】：

个人评论：你学得很快！你现在的版本看起来很棒 ;-) 我很高兴我在这方面提供了帮助。
个人评论：我真的很喜欢它的外观，尽管我必须在学习过程中进行一些修改。感谢您的称赞，当然也感谢您提供的所有帮助。我真的很期待成品，这有助于我管理计算机实验室和工作订单。
我添加了一个小编辑以使其更加详尽:-)

标签： google-apps-script popuppanel

【解决方案1】：

您使用 popupPanel 的方式有些混乱，您必须将其添加到主面板并将要在其中显示的表格添加到弹出窗口本身。您还应该决定要在哪里显示它。这是您的代码工作的相关部分：

  //Add all the elemnts to the panel
  var formTable = app.createFlexTable().setCellPadding(3);
  formTable
  .setWidget(0,0,lbxTeacherName)
  .setWidget(0,1,txtExt)
  .setWidget(0,2,txtTeacherName)
  .setWidget(1,0,txtEmail)
  .setWidget(2,0,btnCreate);

  var popPassword = app.createDecoratedPopupPanel(false, true).setPopupPosition(150,300).setId("popPassword");

  vrtPanel.add(popPassword.add(formTable));

  popPassword.show();
  return app;
}

回答第二点：我不会出现多次，只会出现一次。

第 3 点：如果你想用一个按钮关闭它，你必须添加一个按钮和一个服务器处理程序来关闭它（通过像任何其他小部件一样使用 ID 获取它）但它会更容易和用户友好利用自动隐藏功能，只需像这样更改定义参数：

  var popPassword = app.createDecoratedPopupPanel(true).setPopupPosition(150,300).setId("popPassword");

edit : 在上面的例子中你也可以使用

app.getElementById('popPassword').hide()

在你的“valSubmit”函数（由按钮调用）中，即使没有自动隐藏，所以当处理函数执行时弹出窗口会隐藏。

【讨论】：