Recreate a dialog box from a picture

Is there an easy way to recreate a dialog box that looks exactly like in the picture. With buttons in those cells highlighted in red.

I tried the example from the API, it works, but the structure of the nested elements for my picture will be very complex.

var dialog1 = {
initialize: function (dialog) {
var todayDate = dialog.store()["date"];
todayDate = "Date: " + util.printd("mmmm dd, yyyy", new Date());
dialog.load({ "date": todayDate });
},
commit:function (dialog) {
var results = dialog.store();
console.println("Your name is " + results["fnam"]
+ " " + results["lnam"] );
},
description:
{
name: "Personal Data",
align_children: "align_left",
width: 350,
height: 200,
elements:
[
{
type: "cluster",
name: "Your Name",
align_children: "align_left",
elements:
[
{
type: "view",
align_children: "align_row",
elements:
[
{
type: "static_text",
name: "First Name: "
},
{
item_id: "fnam",
type: "edit_text",
alignment: "align_fill",
width: 300,
height: 20
}
]
},
{
type: "view",
align_children: "align_row",
elements:
[
{
type: "static_text",
name: "Last Name: "
},
{
item_id: "lnam",
type: "edit_text",
alignment: "align_fill",
width: 300,
height: 20
}
]
},
{
type: "static_text",
name: "Date: ",
char_width: 25,
item_id: "date"
},
]
},
{
alignment: "align_right",
type: "ok_cancel",
ok_name: "Ok",
cancel_name: "Cancel"
}
]
}
};
app.execDialog(dialog1);