0

向小部件添加垂直面板时出现类错误，但似乎无法找到原因。您甚至可以向小部件添加垂直面板吗？或者是否有另一种方法可以添加到垂直面板之外的名称和属性标签？

maxImgs = 6;      // Number of images in grid
colUrl = 45;       // Column containing URL
colName = 48;      // Column containing Name
colAttr = 46;      // Column containing Attributes



function doGet(e) {
var app= UiApp.createApplication().setTitle('Not Here')  
var abspanel= app.createAbsolutePanel();//.setHeight('100%').setWidth('100%');
var stackpanel=app.createStackPanel();
var grid = app.createGrid(8,8);

var titleLabel= app.createLabel('Not Here');
titleLabel.setStyleAttribute("text-align", "center");
titleLabel.setStyleAttribute("font-size", "135%");
titleLabel.setStyleAttribute("font-weight", "bold");
var insertlabel= app.createLabel('Which Schedule? (Insert Document Key)');
var inserttxtbox=app.createTextBox().setId('txtbox').setName('ttbox').setMaxLength(44);
var loadbtn= app.createButton('Load Pictures').setId('loadbtn');
var resetbtn= app.createButton('Refresh').setId('rbtn').setVisible(false);
var daylabel= app.createLabel('Select Day');
var mon= "P - Mon"
var tues= "P - Tues"
var wed= "P - Wed"
var thurs= "P - Thurs"
var fri= "P - Fri"
var dayListBox= app.createListBox().setWidth('140px').setId('day').setName ('sday')
dayListBox.addItem(mon);
dayListBox.addItem(tues);
dayListBox.addItem(wed);
dayListBox.addItem(thurs);
dayListBox.addItem(fri); 
var spinner= app.createImage('http://www.zho.ae/_layouts/ZHO/AR/Images/loader_spinner.gif').setVisible(false).setId('spinner');
var loadSpinner = app.createClientHandler()
              .forTargets(spinner)
              .setVisible(true);
 loadbtn.addClickHandler(loadSpinner);


 var loadhandler=app.createServerHandler('loadPics');
 loadhandler.addCallbackElement(stackpanel);
 loadbtn.addClickHandler(loadhandler);

 grid
.setWidget(1,0,insertlabel)
.setWidget(1,1,inserttxtbox)
.setWidget(2,0, daylabel)
.setWidget(2,1, dayListBox)
.setWidget(3,1, loadbtn)
.setWidget(3,2,resetbtn)
.setWidget(4,2,spinner)


var image = [];
for (var img = 0, row = 5; img < maxImgs; img++) {
image[img] = app.createImage().setPixelSize(250, 250).setId('image' + img).setVisible(false);
var imageName = app.createLabel().setId('name'+img).setVisible(false);
var imageAttr = app.createLabel().setId('attr'+img).setVisible(false);
var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr).add(image);
grid.setWidget(row + Math.floor(img / 3), 1 + (img % 3), vertPan);
}


abspanel.add(titleLabel);
stackpanel.add(grid);
app.add(abspanel);
app.add(stackpanel);

return app;
}


function loadPics(e){
var app= UiApp.getActiveApplication();
var ss= SpreadsheetApp.openById(e.parameter.ttbox);
var list=ss.getSheetByName(e.parameter.sday);
var data = list.getDataRange().getValues().splice(1); // Get whole spreadsheet, without headers
// In this example, URLs are in A, Name in B, Attributes in C

for (var row = 0, img = 0; row < data.length && img < maxImgs; row++) {
var rowData = data[row];
if (rowData[colUrl] != '') {
  var image = app.getElementById('image' + img);
  var imageName = app.getElementById('name'+img);
  var imageAttr = app.getElementById('attr'+img);
        image.setUrl(rowData[colUrl])
       .setTitle(rowData[colName].toString() === '' ? 'image'+img : rowData[colName])
       .setVisible(true);
  imageName.setText(rowData[colName])
       .setVisible(true);
  imageAttr.setText(rowData[colAttr])
       .setVisible(true);
  img++;

 }
}


app.getElementById('spinner').setVisible(false);

return app;  
}
4

1 回答 1

0

错误不是来自垂直面板...您要添加image的是小部件数组，而不是 UiApp 小部件。

尝试在 for 循环中添加数组元素，例如

var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr);
  for(var n in image){vertPan.add(image[n])};

编辑：我在您的另一篇文章中重新阅读了 Mogsdad 的回答，他的代码有所不同...使用此版本的代码您不会得到很好的网格结果...我不确定我是否理解您创建该数组的原因？？？

EDIT2：只是为了测试，我尝试了 Mogsdad 的代码，稍作修改，看看它是如何显示的......

  for (var img = 0, row = 5; img < maxImgs; img++) {
    var image = app.createImage().setPixelSize(250, 250).setId('image' + img).setVisible(true);
    var imageName = app.createLabel('name').setId('name'+img).setVisible(true);
    var imageAttr = app.createLabel('attr').setId('attr'+img).setVisible(true);
    var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr).add(image);
    grid.setWidget(row + Math.floor(img / 3), 1 + (img % 3), vertPan)
  }

我明白了： 在此处输入图像描述

编辑 3：这里是 Mogsdad 代码的修改版本，它应该可以让您更轻松地看到正在发生的事情，并且它位于一个带有可见（和彩色）面板的 2x2 矩阵中......

maxImgs = 4;      // Number of images in grid
colUrl = 3;       // Column containing URL
colName = 0;      // Column containing Name
colAttr = 1;      // Column containing Attributes

function doGet(e) {
  var app = UiApp.createApplication().setTitle('Not Here');
  var abspanel = app.createAbsolutePanel().setStyleAttribute('padding','25px');
  var grid = app.createGrid(8, 8);

  var titleLabel = app.createLabel('Not Here');
  titleLabel.setStyleAttribute('margin-left','85px');
  titleLabel.setStyleAttribute("font-size", "135%");
  titleLabel.setStyleAttribute("font-weight", "bold");
  var insertlabel = app.createLabel('Which Schedule? (Insert Document Key)');
  var inserttxtbox = app.createTextBox().setId('txtbox').setName('ttbox').setMaxLength(44);
  var loadbtn = app.createButton('Load Pictures').setId('loadbtn');
  var resetbtn = app.createButton('Refresh').setId('rbtn').setVisible(false);
  var daylabel = app.createLabel('Select Day');
  var mon = "P - Mon"
  var tues = "P - Tues"
  var wed = "P - Wed"
  var thurs = "P - Thurs"
  var fri = "P - Fri"
  var dayListBox = app.createListBox().setWidth('140px').setId('day').setName('sday')
  dayListBox.addItem(mon);
  dayListBox.addItem(tues);
  dayListBox.addItem(wed);
  dayListBox.addItem(thurs);
  dayListBox.addItem(fri);

  // Borrowed from https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/progress-indicators
  var spinner = app.createImage('https://dl.dropboxusercontent.com/u/211279/loading3T.gif')
                                .setVisible(false)
                                .setId('spinner');
  // Client handler for loadbtn will start spinner when button clicked
  // Server handler will stop spinner when done loading pictures
  var loadSpinner = app.createClientHandler()
                  .forTargets(spinner)
                  .setVisible(true);
  loadbtn.addClickHandler(loadSpinner);  

  var loadhandler = app.createServerHandler('loadPics');
  loadhandler.addCallbackElement(abspanel);
  loadbtn.addClickHandler(loadhandler);

  grid
    .setWidget(1, 0, insertlabel)
    .setWidget(1, 1, inserttxtbox)
    .setWidget(2, 0, daylabel)
    .setWidget(2, 1, dayListBox)
    .setWidget(3, 1, loadbtn)
    .setWidget(3, 2, resetbtn)
    .setWidget(2, 2, spinner)
    .setCellSpacing(5);

  for (var img = 0, row = 5; img < maxImgs; img++) {
    var image = app.createImage().setPixelSize(250, 250).setId('image' + img);
    var imageName = app.createLabel('name').setId('name'+img);
    var imageAttr = app.createLabel('attr').setId('attr'+img);
    var vertPan = app.createVerticalPanel().add(imageName).add(imageAttr).add(image).setStyleAttributes({'padding':'15px','borderStyle':'solid','border-radius':'15px','background':'silver'}).setVisible(false).setId('vertPanel'+img);
    grid.setWidget(row + Math.floor(img / 2), 1 + (img % 2), vertPan)
  }
  abspanel.add(titleLabel);
  abspanel.add(grid);
  app.add(abspanel);

  return app;
}


function loadPics(e) {
    e = {};
    e.parameter = {};
    e.parameter.ttbox = '0AnqSFd3iikE3dGFsUWNpb08zVWx5YjFRckloZ0NFZGc'
    e.parameter.sday = 'Sheet1'
  var app = UiApp.getActiveApplication();
  var ss = SpreadsheetApp.openById(e.parameter.ttbox);
  var list = ss.getSheetByName(e.parameter.sday);
  var data = list.getDataRange().getValues().splice(1); // Get whole spreadsheet, without headers

  for (var row = 0, img = 0; row < data.length && img < maxImgs; row++) {
    var rowData = data[row];
    if (rowData[0] != '') {
      var image = app.getElementById('image' + img);
      var imageName = app.getElementById('name'+img);
      var imageAttr = app.getElementById('attr'+img);
      var vertPan = app.getElementById('vertPanel'+img).setVisible(true);
      image.setUrl(rowData[colUrl])
           .setTitle(rowData[colName].toString() === '' ? 'image'+img : rowData[colName]);
      imageName.setText(rowData[colName]);
      imageAttr.setText(rowData[colAttr]);
      img++;
    }
  }

  // Done loading, hide spinner
  app.getElementById('spinner').setVisible(false);
  return app;
}

SS在这里可见

此处提供演示应用程序

可以看到标签对应图片（只使用了4个第一个链接）

于 2013-08-06T21:42:15.657 回答