extendscript cant align button or center button below listbox - extendscript

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();