Script UI layout

Question

Hi everyone,
I made a Script UI like this:
the code:
var myDialog = app.dialogs.add({name:"Modify current years' cells"});
with(myDialog.dialogColumns.add()){
  with(dialogRows.add()){
   with(dialogColumns.add()){
    with(borderPanels.add()){
     staticTexts.add({staticLabel:"Column fill colour?"});
     var myVerticalAlignmentButtons = radiobuttonGroups.add();
     with(myVerticalAlignmentButtons){
      radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
      radiobuttonControls.add({staticLabel:"No"});
    with(dialogColumns.add()){
        with(dialogRows.add()){
   staticTexts.add({staticLabel:"Color:"});
           var mySelection = dropdowns.add({stringList:["Red", "Green"], selectedIndex:1});
    with(dialogRows.add()){
   staticTexts.add({staticLabel:"Tint:"});
        with(dialogColumns.add()){
           var mySelection = dropdowns.add({stringList:["10%", "15%", "20%", "25%", "30%"], selectedIndex:2});
with(myDialog.dialogColumns.add()){
  with(dialogRows.add()){
   with(dialogColumns.add()){
    with(borderPanels.add()){
     staticTexts.add({staticLabel:"With stroke?"});
     var myVerticalAlignmentButtons = radiobuttonGroups.add();
     with(myVerticalAlignmentButtons){
      radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
      radiobuttonControls.add({staticLabel:"No"});
    with(dialogColumns.add()){
        with(dialogRows.add()){
   staticTexts.add({staticLabel:"Stroke colour:"});
           var mySelection = dropdowns.add({stringList:["Red", "Green"], selectedIndex:1});
    with(dialogRows.add()){
   staticTexts.add({staticLabel:"Stroke weight:"});
        with(dialogColumns.add()){
           var mySelection = dropdowns.add({stringList:["0.5pt", "1pt", "1.5pt", "2pt"], selectedIndex:1});
with(myDialog.dialogColumns.add()){
  with(dialogRows.add()){
   with(dialogColumns.add()){
    with(borderPanels.add()){
     staticTexts.add({staticLabel:"With stroke?"});
     var myVerticalAlignmentButtons = radiobuttonGroups.add();
     with(myVerticalAlignmentButtons){
      radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
      radiobuttonControls.add({staticLabel:"No"});
    with(dialogColumns.add()){
        with(dialogRows.add()){
   staticTexts.add({staticLabel:"In which row:"});
           var mySelection = dropdowns.add({stringList:["1st", "2nd", "3rd", "4th", "5th", "th"], selectedIndex:1});
myDialog.show();
but I want this layout,
Can someone help me to reorder it?
John

Answer 1

Hi, Jongware
I change it into this:
var myDialog = app.dialogs.add({name:"Modify current years' cells"});
with(myDialog.dialogColumns.add()){
  with(dialogRows.add()){
   with(dialogColumns.add()){
    with(borderPanels.add()){
     staticTexts.add({staticLabel:"Column fill colour?"});
     var myVerticalAlignmentButtons = radiobuttonGroups.add();
     with(myVerticalAlignmentButtons){
      radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
      radiobuttonControls.add({staticLabel:"No"});
    with(dialogColumns.add()){
    with(borderPanels.add()){
        with(dialogRows.add()){
   staticTexts.add({staticLabel:"Color:"});
           var mySelection = dropdowns.add({stringList:["Red", "Green"], selectedIndex:1});
    with(dialogRows.add()){
   staticTexts.add({staticLabel:"Tint:   "});
        with(dialogColumns.add()){
           var mySelection = dropdowns.add({stringList:["10%", "15%", "20%", "25%", "30%"], selectedIndex:2});
with(myDialog.dialogColumns.add()){
  with(dialogRows.add()){
   with(dialogColumns.add()){
    with(borderPanels.add()){
     staticTexts.add({staticLabel:"With stroke?"});
     var myVerticalAlignmentButtons = radiobuttonGroups.add();
     with(myVerticalAlignmentButtons){
      radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
      radiobuttonControls.add({staticLabel:"No"});
    with(dialogColumns.add()){
    with(borderPanels.add()){
        with(dialogRows.add()){
   staticTexts.add({staticLabel:"Stroke colour:"});
           var mySelection = dropdowns.add({stringList:["Red", "Green"], selectedIndex:1});
    with(dialogRows.add()){
   staticTexts.add({staticLabel:"Stroke weight:"});
        with(dialogColumns.add()){
           var mySelection = dropdowns.add({stringList:["0.5pt", "1pt", "1.5pt", "2pt"], selectedIndex:2});
with(myDialog.dialogColumns.add()){
  with(dialogRows.add()){
   with(dialogColumns.add()){
    with(borderPanels.add()){
     staticTexts.add({staticLabel:"Dollar sign Italic?"});
     var myVerticalAlignmentButtons = radiobuttonGroups.add();
     with(myVerticalAlignmentButtons){
      radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
      radiobuttonControls.add({staticLabel:"No"});
    with(dialogColumns.add()){
    with(borderPanels.add()){
        with(dialogRows.add()){
   staticTexts.add({staticLabel:"In which row:"});
           var mySelection = dropdowns.add({stringList:["1st", "2nd", "3rd", "4th", "5th", "6th"], selectedIndex:1});
      myDialog.show();
but the outcome like this:
no what I want
How can I move second and third cloumn under the first?
John