I've pulled out the accordion layout .html and .js files from the extjs examples (below).
What is the next step to make this dynamic e.g. how the syntax of a link looks so that the HTML that fills a section under a panel on the left has links which fill the content on the right.
Does anyone know of tutorials which go beyond this shell and show how to make it dynamic, i.e. integrate it in a working application?
<html>
<head>
<title>Accordion Layout</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-all.js"></script>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.empty .x-panel-body {
padding-top:20px;
text-align:center;
font-style:italic;
color: gray;
font-size:11px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
var item1 = new Ext.Panel({
title: 'Start',
html: '<this is the start content>',
cls:'empty'
});
var item2 = new Ext.Panel({
title: 'Application',
html: '<empty panel>',
cls:'empty'
});
var item3 = new Ext.Panel({
title: 'Module',
html: '<empty panel>',
cls:'empty'
});
var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2, item3]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[
accordion, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'This is where the content goes for each selection.'
}]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>
I've pulled out the accordion layout .html and .js files from the extjs examples (below).
What is the next step to make this dynamic e.g. how the syntax of a link looks so that the HTML that fills a section under a panel on the left has links which fill the content on the right.
Does anyone know of tutorials which go beyond this shell and show how to make it dynamic, i.e. integrate it in a working application?
<html>
<head>
<title>Accordion Layout</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-all.js"></script>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.empty .x-panel-body {
padding-top:20px;
text-align:center;
font-style:italic;
color: gray;
font-size:11px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
var item1 = new Ext.Panel({
title: 'Start',
html: '<this is the start content>',
cls:'empty'
});
var item2 = new Ext.Panel({
title: 'Application',
html: '<empty panel>',
cls:'empty'
});
var item3 = new Ext.Panel({
title: 'Module',
html: '<empty panel>',
cls:'empty'
});
var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1, item2, item3]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[
accordion, {
region:'center',
margins:'5 5 5 0',
cls:'empty',
bodyStyle:'background:#f1f1f1',
html:'This is where the content goes for each selection.'
}]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>
2 Answers
Reset to default 1There's a billion ways to do it. The question is vague... but here's a very simplistic one. Just have an Ajax function that calls the server and adds the panels dynamically. Say your server provides the following JSON, by calling /links.json
{links: ['http://www.google.'], ['http://www.yahoo.']}
You would do the following
Ext.onReady(function() {
var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion'
});
new Ext.Viewport({
layout:'border',
items:[
accordion,
{region:'center', html:'This is where the content goes for each selection.'}]
});
Ext.Ajax.request({
url: '/links.json',
callback: function(response) {
var json = Ext.decode(response);
var cfgs = [];
for (var i = 0; i < json.links.length; i++) {
cfgs.push({
html: json.links[i]
})
}
accordion.add(cfgs);
}
});
});
But there's nothing that I coded here that you didn't already know, is there?
Here's a very good source of information that will probably help you get forward: Saki's Ext Examples Page.