Appcelerator Titanium - почему моя кнопка не отображается?

Question

В Titanium, у меня есть следующий код:

var dbWindow = Ti.UI.currentWindow; 

var Cloud = require('ti.cloud'); 

var data = []; 

var rowid; 
var rowindex; 
var table; 

var db; 

/** 
* Creates TableView from database 
*/ 
function makeTable() { 
    db = Ti.Database.open('myDb'); 

    try { 
     var rows = db.execute('SELECT * from boatData'); 
     var boatName; 
     var rowLabel; 

     while (rows.isValidRow()) { 
      tableRow = Ti.UI.createTableViewRow({ 
       backgroundSelectedColor : 'red', 
       rowid : rows.fieldByName('id'), 
       loa : rows.fieldByName('loa'), 
       lwl : rows.fieldByName('lwl'), 
       beam : rows.fieldByName('beam'), 
       displacement : rows.fieldByName('displacement'), 
       sailArea : rows.fieldByName('sailArea') 
      }); 
      boatName = rows.fieldByName('boatName'); 
      rowLabel = Ti.UI.createLabel({ 
       text : boatName, 
       color : 'black', 
       font : { 
        fontSize : 22 
       }, 
       touchEnabled : false 
      }); 
      tableRow.add(rowLabel); 
      tableRow.Label = rowLabel; 
      data.push(tableRow); 
      rows.next(); 
     } 
     rows.close(); 
     db.close(); 

     table = Titanium.UI.createTableView({ 
      data : data, 
      backgroundColor : 'pink', 
      headerTitle : 'Boats', 
      height : '75%', 
      allowsSelection : true 
     }); 

    } catch (e) {//database table not found 
     db.close(); 
     var alertWindow = Titanium.UI.createAlertDialog({ 
      message : 'No data found! Please save data first', 
      buttonNames : ['OK'] 
     }); 

     alertWindow.addEventListener('click', function(e) { 
      dbWindow.close(); 
     }); 

     alertWindow.show(); 
    } 
} 

makeTable(); 

table.addEventListener('click', function(e) { 
    rowid = e.rowData.rowid; 
    rowindex = e.index; 
    Ti.App.loaBox.value = e.rowData.loa; 
    Ti.App.lwlBox.value = e.rowData.lwl; 
    Ti.App.beamBox.value = e.rowData.beam; 
    Ti.App.displacementBox.value = e.rowData.displacement; 
    Ti.App.saBox.value = e.rowData.sailArea; 
    openButton.title = 'Get Data'; 
    selected.text = 'Your selection: ' + e.row.Label.text; 
    deleteButton.visible = true; 
}); 

var parentView = Titanium.UI.createView({ 
    width : '100%', 
    height : '100%', 
    layout : 'vertical' 
}); 

parentView.add(table); 

var selectionView = Ti.UI.createView({ 
    top : 5, 
    height : '10%', 
    layout : 'vertical' 
}); 

var info = Ti.UI.createLabel({ 
    text : 'Click on a boat name to get data or delete.', 
    color : 'black', 
    font : { 
     fontSize : 25 
    } 
}); 

var selected = Ti.UI.createLabel({ 
    color : 'red', 
    font : { 
     fontSize : 25 
    } 
}); 

selectionView.add(info); 
selectionView.add(selected); 

parentView.add(selectionView); 

var buttons = Ti.UI.createView({ 
    top : 5, 
    layout : 'horizontal' 
}); 

var lowerButtons = Ti.UI.createView({ 
    top : 5, 
    layout : 'horizontal' 
}); 

var openButton = Ti.UI.createButton({ 
    backgroundColor : 'pink', 
    borderColor : 'red', 
    borderWidth : 2, 
    font : { 
     fontSize : 22 
    }, 
    title : 'Back', 
    right : 5 
}); 

openButton.addEventListener('click', function(e) { 
    dbWindow.close(); 
}); 

var deleteButton = Ti.UI.createButton({ 
    backgroundColor : 'pink', 
    borderColor : 'red', 
    borderWidth : 2, 
    font : { 
     fontSize : 22 
    }, 
    title : 'Delete', 
    left : 5 
}); 

deleteButton.visible = false; 

deleteButton.addEventListener('click', function(e) { 
    var db = Ti.Database.open('myDb'); 
    db.execute('DELETE FROM boatData WHERE id=' + rowid); 
    db.close(); 
    table.deleteRow(rowindex); 
    Ti.App.loaBox.value = ''; 
    Ti.App.lwlBox.value = ''; 
    Ti.App.beamBox.value = ''; 
    Ti.App.displacementBox.value = ''; 
    Ti.App.saBox.value = ''; 

    deleteButton.visible = false; 
    openButton.title = 'Back'; 
    selected.text = ''; 
}); 


var saveToCloudButton = Ti.UI.createButton({ 
    backgroundColor : 'pink', 
    borderColor : 'red', 
    borderWidth : 2, 
    font : { 
     fontSize : 22 
    }, 
    title : 'Save boats to cloud', 
    left : 5 
}); 

saveToCloudButton.addEventListener('click', function(e) { 
    saveToCloud(); 
}); 

buttons.add(openButton); 
buttons.add(deleteButton); 
lowerButtons.add(saveToCloudButton); 

parentView.add(buttons); 
parentView.add(lowerButtons); 
dbWindow.add(parentView); 

/** 
* Saves database to cloud 
*/ 
function saveToCloud() { 
    var dbName = 'myDb'; 
    var dbPath; 
    var dbFile; 

    if (Ti.Platform.osname == 'android') { 
     dbPath = 'file:///data/data/' + Ti.App.getID() + '/databases/'; 
     dbFile = Ti.Filesystem.getFile(dbPath + dbName); 
    } else { 
     dbPath = Ti.Filesystem.applicationSupportDirectory + '/database/'; 
     dbFile = Ti.Filesystem.getFile(dbPath + dbName + '.sql'); 
    } 

    Cloud.Users.secureLogin({ 
     title : 'Sign In' 
    }, function(e) { 
     if (e.success) { 
      Cloud.Files.create({ 
       name : dbName, 
       file : dbFile 
      }, function(e) { 
       if (e.success) { 
        var file = e.files[0]; 
        alert('Boats successfully backed up to cloud!'); 
       } else { 
        alert('Error:\n' + ((e.error && e.message) || JSON.stringify(e))); 
      } 

      }); 
     } else { 
      alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e))); 
     } 
    }); 
} 

Однако, по какой-то причине, мой saveToCloudButton не появляется. Я попытался вручную настроить видимость, и это не сработало. Кто-нибудь знает, что я делаю неправильно?

EDIT: добавлен полный код.

Answer 1

я понял мою проблему. Мне нужно было установить значения высоты buttons и lowerButtons.

Answer 2

сделать верхний различен для обоих взглядов

var buttons = Ti.UI.createView({ 
    top : 5, 
    layout : 'horizontal' 
}); 

var lowerButtons = Ti.UI.createView({ 
    top : 60, 
    layout : 'horizontal' 
}); 

Благодарности