JxLib Form Demo

by jonlb

HTML

<script src="http://jxlib.org/reference/3.1.1/examples/lib/jxlib.standalone.uncompressed.js"></script>
<script src="http://jxlib.org/reference/3.1.1/examples/js/locale.js"></script>
<link rel="stylesheet" href="http://jxlib.org/reference/3.1.1/examples/lib/themes/crispin/jxtheme.uncompressed.css">
<link rel="stylesheet" href="http://jxlib.org/reference/3.1.1/examples/css/tests.css">
<div id="formBasic" class="formBox"></div>

JavaScript

var form;
function drawBasicForm() {
  form = new Jx.Form({
    name: 'testForm',
    formClass: 'jxFormInline'
  }).addTo('formBasic');
  
// First Fieldset

  var fieldSet1 = new Jx.Fieldset({
    legend: 'Inline-Block Form',
    id: 'FieldSet1',
    fieldsetClass: 'jxFormInlineblock'
  }).addTo(form);
  
  new Jx.Field.Text({
    id: 'Text11',
    name: 'Text11',
    label: 'Text One',
    value: 'Initial Value',
    tag: 'a tag',
    required: true
  }).addTo(fieldSet1);

  var c1 = new Jx.Field.Combo({
    id: 'Select11',
    name: 'Select11',
    label: 'Combo Test',
    readonly: true,
    tag: 'another tag',
    items: [
        {image: 'http://jxlib.org/reference/3.1.1/examples/images/swatches.png', imageClass: 'comboRed', label: 'red'},
        {image: 'http://jxlib.org/reference/3.1.1/examples/images/swatches.png', imageClass: 'comboMagenta', label: 'magenta'},
        {image: 'http://jxlib.org/reference/3.1.1/examples/images/swatches.png', imageClass: 'comboBlue'},
        {label: 'cyan'},
        {image: 'http://jxlib.org/reference/3.1.1/examples/images/swatches.png', imageClass: 'comboGreen'},
        {image: 'http://jxlib.org/reference/3.1.1/examples/images/swatches.png', imageClass: 'comboYellow'}
      ]
  }).addTo(fieldSet1);
    
  new Jx.Field.Select({
    id: 'Select12',
    name: 'Select12',
    label: 'Select One',
    tag: 'another tag',
    comboOpts: [{
        value: 'opt11',
        text: 'Option #1',
        selected: false
    },{
        value: 'opt12',
        text: 'Option #2',
        selected: true
    },{
        value: 'opt13',
        text: 'Option #3',
        selected: false
    }]
  }).addTo(fieldSet1);
  
  new Jx.Field.Select({
    id: 'Select13',
    name: 'Select13',
    label: 'Select One',
    tag: 'another tag',
    size: 5,
    multiple: true,
    comboOpts: [{
        value: 'opt121',
        text: 'Option #1',
        selected: false
    },{
        value: 'opt122',
        text: 'Option #2',
        selected:...