oxjs/demos/form/js/form.js

107 lines
2.9 KiB
JavaScript
Raw Normal View History

2011-05-21 17:56:40 +00:00
Ox.load('UI', {debug: true}, function() {
var $items = [
Ox.Input({
id: 'name',
label: 'Name',
labelWidth: 64,
width: 240
}),
Ox.Input({
id: 'geoname',
label: 'Geoname',
labelWidth: 64,
width: 240
}),
Ox.ArrayInput({
id: 'alternativeNames',
label: 'Alternative Names',
max: 10,
//sort: true,
values: [],
width: 240
}),
Ox.Input({
decimals: 8,
id: 'lat',
label: 'Latitude',
labelWidth: 80,
max: Ox.MAX_LATITUDE,
min: Ox.MIN_LATITUDE,
type: 'float',
width: 240
}),
Ox.Input({
decimals: 8,
id: 'lng',
label: 'Longitude',
labelWidth: 80,
max: 180,
min: -180,
type: 'float',
width: 240
})
],
$bar = Ox.Bar({
size: 24
}),
$button = Ox.Button({
id: 'submit',
title: 'check',
type: 'image'
})
.css({
float: 'right',
margin: '4px'
})
.bindEvent({
click: function() {
$foo.html(JSON.stringify($form.values()))
}
})
.appendTo($bar),
$container = Ox.Container(),
$foo = Ox.Element(),
$form = Ox.Form({
items: $items
})
.css({
padding: '8px'
})
.appendTo($container);
Ox.SplitPanel({
elements: [
{
collapsible: true,
element: Ox.SplitPanel({
elements: [
{
element: $container
},
{
element: $bar,
size: 24
}
],
orientation: 'vertical'
})
.bindEvent({
resize: function(foo, size) {
$items.forEach(function($item) {
$item.options({width: size - 16});
});
}
}),
resizable: true,
resize: [128, 256, 384],
size: 256
},
{
element: $foo
}
],
orientation: 'horizontal'
}).appendTo(Ox.UI.$body);
});