extendscript cant align button or center button below listbox

Question

My button is floating on top of the list box. I want it to sit right under the list box.

I will be adding more buttons and just want to know why this is not working.

If anybody can assist on this will be grateful.

var objDlg = new Window ("dialog", "パネル", [0,0,300,150]);
//var objDlg = new Window ("dialog", "Abas", [0,0,0,0]);
objDlgorientation = 'column';
    // w.margins = 5;
    // w.spacing = 10;
objDlg.alignChildren = ['fill', 'fill'];
objDlg.size = [380, 520]



var tpanel = objDlg.add ("tabbedpanel" ,[10,10,0,0],);

var general = tpanel.add ("tab", [0,0,0,0], "Color");
var general1 = tpanel.add ("tab", [0,0,0,0], "general");
var general2 = tpanel.add ("tab", [0,0,0,0], "playstation");
var general3 = tpanel.add ("tab", [0,0,0,0], "xbox 360");
var general4 = tpanel.add ("tab", [0,0,0,0], "xbox 360");
var general5 = tpanel.add ("tab", [0,0,0,0], "xbox 360");
var general6 = tpanel.add ("tab", [0,0,0,0], "xbox 360");
var general7 = tpanel.add ("tab", [0,0,0,0], "xbox 360");


var listBoxxc = general.add("listbox", [10,30,180,110], []);

listBoxxc.selection = 0;
listBoxxc.size = [340, 200];
listBoxxc.add("item", "Create  Angle Control");
listBoxxc.add("item", "Create  Color Control");
listBoxxc.add("item", "Create  Checkbox Control");
listBoxxc.add("item", "Create  Layer Control");
listBoxxc.add("item", "Create  Point Control");
listBoxxc.add("item", "Create  Slider Control");
testBtn = general.add( "button", [40,90,110,110], "Test" );






tpanel.size = [360,300];
objDlg.center();
objDlg.show();

Answer 1

I believe that you will need to group the Listbox and the Button separately. My code is a little different to yours, but this works:

var dialog = new Window("dialog"); 
    dialog.text = "Dialog"; 
    dialog.preferredSize.width = 380; 
    dialog.preferredSize.height = 520; 
    dialog.orientation = "column"; 
    dialog.alignChildren = ["fill","top"]; 
    dialog.spacing = 10; 
    dialog.margins = 16; 

// TPANEL
// ======
var tpanel = dialog.add("tabbedpanel", undefined, undefined, {name: "tpanel"}); 
    tpanel.alignChildren = "fill"; 
    tpanel.preferredSize.width = 348; 
    tpanel.margins = 0; 

// CLRTAB
// ======
var clrTab = tpanel.add("tab", undefined, undefined, {name: "clrTab"}); 
    clrTab.text = "Color"; 
    clrTab.orientation = "column"; 
    clrTab.alignChildren = ["fill","top"]; 
    clrTab.spacing = 10; 
    clrTab.margins = 10; 

// CLRTAB_LSTGRP
// =============
var clrTab_LstGrp = clrTab.add("group", undefined, {name: "clrTab_LstGrp"}); 
    clrTab_LstGrp.orientation = "row"; 
    clrTab_LstGrp.alignChildren = ["left","center"]; 
    clrTab_LstGrp.spacing = 10; 
    clrTab_LstGrp.margins = 0; 

var listBoxxc_array = [
  "Create  Angle Control",
  "Create  Color Control",
  "Create  Checkbox Control",
  "Create  Layer Control",
  "Create  Point Control",
  "Create  Slider Control"
  ]; 

var listBoxxc = clrTab_LstGrp.add("listbox", undefined, undefined, {name: "listBoxxc", items: listBoxxc_array}); 
    listBoxxc.preferredSize.width = 300; 

// CLRTAB_BTNGRP
// =============
var clrTab_BtnGrp = clrTab.add("group", undefined, {name: "clrTab_BtnGrp"}); 
    clrTab_BtnGrp.orientation = "row"; 
    clrTab_BtnGrp.alignChildren = ["left","center"]; 
    clrTab_BtnGrp.spacing = 10; 
    clrTab_BtnGrp.margins = 0; 

var testBtn = clrTab_BtnGrp.add("button", undefined, undefined, {name: "testBtn"}); 
    testBtn.text = "Test"; 

// GENTAB
// ======
var genTab = tpanel.add("tab", undefined, undefined, {name: "genTab"}); 
    genTab.text = "General"; 
    genTab.orientation = "column"; 
    genTab.alignChildren = ["left","top"]; 
    genTab.spacing = 10; 
    genTab.margins = 10; 

// TPANEL
// ======
tpanel.selection = clrTab; 

dialog.show();