function drawContainerLayout() {
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.Container({
parent: 'containerBox',
layoutManager: 'anchored',
topLevel: true,
items: [{
//Top
id: 'layoutOffsetElement1' ,
layoutOpts: {
height: 50
}
},{
//left
'class': Jx.Panel,
options: {
image: 'http://jxlib.org/reference/3.1.1/examples/images/page_white_world.png',
label: 'Just a Panel',
content: 'layoutOffsetElement2',
loadOnDemand: true, // this option is ignored in panels
menu: true,
height: 200,
id: 'leftPanel'
},
layoutOpts: {
top: 50,
bottom: 50,
width: 200
}
},{
//center panel
'class': Jx.TabBox,
options: {
id: 'centerTabBox',
items: [{
'class': 'tab',
options: {
image: 'http://jxlib.org/reference/3.1.1/examples/images/star.png',
content: 'starContent'
}
},{
'class': 'tab',
options: {
label: 'Embedded Panel',
items: [{
'class': 'panel',
options: {
label: 'Panel in a Tab',
collapse: false,
content: '<p>This is a panel embedded in a tab.</p>'
}
}]
}
},{
'class': 'tab',
options: {
label: 'A Form in a tab',
image: 'http://jxlib.org/reference/3.1.1/examples/images/page_white_world.png',
items: [{
'class': 'form',
options: {
name: 'testForm',
formClass: 'jxFormInlineblock',
items: ['layoutOffsetElement4',
new Element('p', {
html: 'This is a paragraph that was added to the form.'
}),{
'class': 'text',
options: {
label: 'First example textbox',
name: 'textbox-1',
id: 'textbox-1'
}
},{
'class': 'fieldset',
options: {
legend: 'Fieldset #1',
items: [
{
'class': 'text',
options: {
label: 'first child in frameset',
id: 'frame-text-1',
name: 'frame-text-1',
required: true
}
},{
'class': 'checkbox',
options: {
label: 'a checkbox',
id: 'checkbox-1',
name: 'checkbox-1'
}
}
]
}
},{
'class': 'editor',
options: {
name: 'description',
label: 'Description',
id: 'description',
required: true,
value: '',
editorOptions: {
editorCssFile: 'css/editor.css',
buttons: [
['bold','italic','underline','strikethrough','separator','alignment',
'separator','orderedlist','unorderedlist','indent','outdent','separator','undo','redo'],
[{ name: 'customStyles',
options: {
styles: ['small','large','hide','quiet','loud','highlight',
'added','removed','first','last','top','bottom']
}
},'block', 'separator', 'link','unlink', 'image','separator', 'toggle']
]
}
}
}
],
plugins: [{
name: 'validator',
options: {
fields: {
'textbox-1': {
validators: ['minLength:5', 'maxLength:10']
},
'frame-text-1': {
//Need to add the empty validators array which will force it to
//also pick up the required option in the field itself.
validators: []
},
'description': {
validators: []
}
}
}
},{
name: 'notifier',
options: {
notifierType: 'inline'
}
}]
}
}]
}
},{
'class': 'tab',
options: {
label: 'A Tab using Split Layout Manager',
image: 'http://jxlib.org/reference/3.1.1/examples/images/page_white_code.png',
items: [{
'class': 'container',
options: {
layoutManager: {
name: 'split',
//This just holds the Jx.Splitter options
options: {
containerOptions: [{
width: 400
},{
width: null
}]
}
},
items: [{
'class': 'panel',
options: {
label: 'A Panel',
toolbars: [new Jx.Toolbar().add(
new Jx.Button({ label:'b1' }),
new Jx.Button({ label:'b2' })
)]
},
layoutOpts: {
split: 0
}
},{
'class': 'container',
options: {
layoutManager: {
name: 'split',
//This just holds the Jx.Splitter options
options: {
layout: 'vertical',
containerOptions: [{height: 300},{ height: null}]
}
},
items: [{
'class':'panel',
options: {
label: 'Top-Right Panel'
},
layoutOpts: {
split: 0
}
},{
'class':'panel',
options: {
label: 'Bottom-Right panel'
},
layoutOpts: {
split: 1
}
}]
},
layoutOpts: {
split: 1
}
}]
}
}]
}
},{
'class': 'tab',
options: {
label: 'Center Panel',
image: 'http://jxlib.org/reference/3.1.1/examples/images/page_white_code.png',
content: 'layoutOffsetElement3'
}
},{
'class': 'tab',
options: {
label: 'Closeable Tab',
close: true,
contentURL: 'tab_content.html'
}
}]
},
//id: 'layoutOffsetElement3',
layoutOpts: {
top: 50,
bottom: 50,
right: 200,
left: 200
}
},{
'class': Jx.Panel,
options: {
image: 'http://jxlib.org/reference/3.1.1/examples/images/page_white_world.png',
label: 'ListView in a Panel',
loadOnDemand: true, // this option is ignored in panels
menu: true,
//height: 200,
id: 'rightPanel',
layoutManager: 'fill',
items: [{
'class': 'listView',
options: {
id: 'listViewBox',
plugins: [{
name: 'Fill',
options: {
itemTemplate: "<li class='jxListItemContainer'><a class='jxListItem' href='javascript:void(0);'>{item}</a></li>",
template: '{label}',
emptyMessage: "<p>No items.</p>",
store: store
}
}]
}
}]
},
layoutOpts: {
left: null,
top: 50,
bottom: 50,
width: 200
}
},{
id: 'layoutOffsetElement5',
layoutOpts: {
top: null,
height: 50
}
}]
});
};
drawContainerLayout();
<div id="containerBox"></div>
<div id="layoutOffsetElement1">
<p>This element has variable width and a fixed height, attached to the top of the container.</p>
</div>
<div id="layoutOffsetElement2">
<p>This element has fixed width, variable height, and is attached to the left of the container.</p>
</div>
<div id="layoutOffsetElement3">
<p>This element has variable width and height with fixed left, top, right and bottom offsets.</p>
</div>
<div id="layoutOffsetElement4">
<p>This element was pulled from the HTML and added to this form.</p>
</div>
<div id="layoutOffsetElement5">
<p>This element has variable width and fixed height, attached to the bottom of the container.</p>
</div>
<div id="starContent"><p>This tab just has an image.</p></div>
.jxContainerContent {
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
margin: 2px;
}
.jxContainerContent .jxContainerContent {
margin: 0;
border: none;
}
#containerBox {
position: relative;
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
}