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: true
},{
value: 'opt123',
text: 'Option #3',
selected: true
}]
}).addTo(fieldSet1);
new Jx.Field.Textarea({
id: 'TextArea11',
name: 'TextArea11',
label: 'TextArea One',
rows: 6,
columns: 40,
tag: 'textarea tag'
}).addTo(fieldSet1);
var radioSet = new Jx.Fieldset({
legend: 'Radio Group',
fieldsetClass: 'jxInputGroup',
template: '<fieldset class="jxFieldset"><legend><span class="jxFieldsetLegend"></span></legend></fieldset>'
}).addTo(fieldSet1);
new Jx.Field.Radio({
id: 'radio11',
name: 'InputGroup1',
value: 'radio11',
label: 'Radio 1',
labelSeparator: ''
}).addTo(radioSet);
new Jx.Field.Radio({
id: 'radio12',
name: 'InputGroup1',
value: 'radio12',
label: 'Radio 2',
checked: true,
labelSeparator: ''
}).addTo(radioSet);
new Jx.Field.Button({
buttonClass: Jx.Button.Color,
buttonOptions:{label: 'Foreground', color: '#f0f', alpha: 50},
label: 'Choose a Color'
}).addTo(fieldSet1);
new Jx.Field.Color({
label: 'Choose a Color',
buttonOptions: {
color: '#f00'
}
}).addTo(fieldSet1);
new Jx.Field.OptionGroup({
label: 'Select One or More of these',
columns: 3,
asArray: true,
name: 'test',
items: [
{
label: 'test item 1',
value: 'test1'
},{
label: 'test item 2',
value: 'test2'
},{
label: 'test item 3',
value: 'test3'
},{
label: 'test item 4',
value: 'test4'
},{
label: 'test item 5',
value: 'test5'
},{
label: 'test item 6',
value: 'test6'
}
]
}).addTo(fieldSet1);
new Jx.Field.NumberSpinner({
label: 'Pick a positive number',
allowNegative: false,
name: 'spinnerfield'
}).addTo(fieldSet1);
//this is the new Jx.Field.ComboBox
var data = [];
for (i = 1; i < 30; i++) {
data.push({id: i, label: 'test' + i});
}
var parser = new Jx.Store.Parser.JSON();
var paginate = new Jx.Store.Strategy.Paginate({
startingItemsPerPage: 10
});
var store = new Jx.Store({
fields: [{
name: 'label',
type: 'alphanumeric'
}, {
name: 'id',
type: 'numeric'
}],
protocol: new Jx.Store.Protocol.Local(data, {
parser: parser
}),
strategies: [paginate],
record: Jx.Record,
recordOptions: {
primaryKey: 'id'
}
});
store.load();
new Jx.Field.ComboBox({
label: 'Pick something',
store: store,
displayField: 'label',
valueField: 'id',
emptyMessage: '',
name: 'comboBox'
}).addTo(fieldSet1);
new Jx.Field.Date({
label: 'Start Date',
value: '05/05/1984',
format: '%m/%d/%Y',
name: 'startDate'
}).addTo(fieldSet1);
//The new Jx.Field.TreeCombo
var treeData = [{
label: 'test1',
children: [
{
label: 'test1.1',
children: [
{ label: 'test1.1.1'},
{ label: 'test1.1.2'}
]
},
{
label: 'test1.2',
children: [
{label: 'test1.2.1'},
{label: 'test1.2.2'}
]
}
]
},{
label: 'test2'
}]
new Jx.Field.TreeCombo({
protocol: new Jx.Store.Protocol.Local(treeData,{
parser: parser
}),
name: 'treeCombo',
label: 'Choose from the tree'
}).addTo(fieldSet1);
// Second Fieldset
var fieldSet2 = new Jx.Fieldset({
legend: 'Inline Form',
id: 'FieldSet2',
fieldsetClass: 'jxFormInline'
}).addTo(form);
new Jx.Field.Text({
id: 'Text21',
name: 'Text21',
label: 'Text One',
value: 'Initial Value',
tag: 'a tag'
}).addTo(fieldSet2);
new Jx.Field.Select({
id: 'Select21',
name: 'Select21',
label: 'Select One',
comboOpts: [{
value: 'opt21',
text: 'Option #1',
selected: false
},{
value: 'opt22',
text: 'Option #2',
selected: true
},{
value: 'opt23',
text: 'Option #3',
selected: false
}]
}).addTo(fieldSet2);
new Jx.Field.Text({
id: 'Text22',
name: 'Text22',
label: 'Text Two',
value: 'Initial Value',
tag: 'a tag'
}).addTo(fieldSet2);
var checkSet = new Jx.Fieldset({
legend: 'Check Group',
fieldsetClass: 'jxInputGroup',
template: '<fieldset class="jxFieldset"><legend><span class="jxFieldsetLegend"></span></legend></fieldset>'
}).addTo(fieldSet2);
new Jx.Field.Checkbox({
id: 'check21',
name: 'check21',
value: 'check21',
label: 'Check 1',
checked: true,
labelSeparator: ''
}).addTo(checkSet);
new Jx.Field.Checkbox({
id: 'check22',
name: 'check22',
value: 'check22',
label: 'check 2',
checked: false,
labelSeparator: ''
}).addTo(checkSet);
new Jx.Field.Button({
buttonOptions:{label: 'Apply'}
}).addTo(fieldSet2);
new Jx.Field.Button({
buttonOptions:{label: 'Cancel'}
}).addTo(fieldSet2);
// Third Fieldset
var fieldSet3 = new Jx.Fieldset({
// no legend in this one
id: 'FieldSet3',
fieldsetClass: 'jxFormBlock'
}).addTo(form);
new Jx.Field.Text({
id: 'Text31',
name: 'Text31',
label: 'Text One',
value: 'Initial Value',
tag: 'a tag'
}).addTo(fieldSet3);
new Jx.Field.Select({
id: 'Select31',
name: 'Select31',
label: 'Select One',
tag: 'another tag',
comboOpts: [{
value: 'opt31',
text: 'Option #1',
selected: false
},{
value: 'opt32',
text: 'Option #2',
selected: true
},{
value: 'opt33',
text: 'Option #3',
selected: false
}]
}).addTo(fieldSet3);
new Jx.Field.Checkbox({
id: 'check31',
name: 'check31',
value: 'check31',
label: 'Check 1',
labelSeparator: ''
}).addTo(fieldSet3);
new Jx.Field.Checkbox({
id: 'check32',
name: 'check32',
value: 'check32',
label: 'Check 2',
labelSeparator: ''
}).addTo(fieldSet3);
new Jx.Field.Textarea({
id: 'TextArea31',
name: 'TextArea31',
label: 'TextArea One',
rows: 6,
columns: 40
}).addTo(fieldSet3);
new Jx.Field.Button({
buttonOptions:{
label: 'Go',
onClick: function() {
console.log(form.getValues());
}
},
defaultAction: true
}).addTo(form);
}
drawBasicForm();
<div id="formBasic" class="formBox"></div>