FancyGrid Form Aligns

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container">
  <div id="form" style="margin-top: 30px;"></div>
  <div id="form1" style="margin-top: 30px;"></div>
  <div id="form2" style="margin-top: 30px;"></div>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var comboData = [{
    index: 0,
    country: 'USA'
  }, {
    index: 1,
    country: 'Canada'
  }];


  new FancyForm({
    renderTo: 'form',
    title: 'labelAlign - left(default)',
    width: 350,
    height: 400,
    defaults: {
      type: 'string'
    },
    items: [{
      label: 'Name',
      emptyText: 'Name',
      name: 'name'
    }, {
      label: 'SurName',
      emptyText: 'SurName',
      name: 'surname'
    }, {
      type: 'number',
      label: 'Age',
      name: 'age',
      min: 20,
      max: 100
    }, {
      type: 'combo',
      label: 'Country',
      name: 'country',
      data: comboData,
      displayKey: 'country',
      valueKey: 'index',
      value: 0
    }, {
      type: 'textarea',
      label: 'About',
      name: 'about'
    }, {
      type: 'date',
      label: 'Birthday',
      name: 'birthday'
    }],
    buttons: ['side', {
      text: 'Values',
      handler: function() {
        console.log(this.get());
        console.log(this.get('name'));
      }
    }, {
      text: 'Clear',
      handler: function() {
        console.log('clear');
        this.clear();
      }
    }]
  });

  new FancyForm({
    renderTo: 'form1',
    title: 'labelAlign - right',
    width: 350,
    height: 400,
    defaults: {
      type: 'string',
      labelAlign: 'right'
    },
    items: [{
      label: 'Name',
      emptyText: 'Name',
      name: 'name'
    }, {
      label: 'SurName',
      emptyText: 'SurName',
      name: 'surname'
    }, {
      type: 'number',
      label: 'Age',
      name: 'age',
      min: 20,
      max: 100
    }, {
      type: 'combo',
      label: 'Country',
      name: 'country',
      data: comboData,
      displayKey: 'country',
      valueKey: 'index',
      value: 0
    }, {
      type: 'textarea',
      label: 'About',
      name: 'about'
    }, {
      type: 'date',
      label: 'Birthday',
      name: 'birthday'
    }],
    buttons: ['side', {
    ...