Javascript 如何使extjs accordion布局示例动态化？
我已经从extjs示例中取出了accordion layout.html和.js文件（如下） 下一步是什么使其动态化，例如链接的语法看起来如何，使得填充左侧面板下一部分的HTML具有填充右侧内容的链接 是否有人知道超出此shell的教程，并介绍如何使其动态化，即如何将其集成到工作应用程序中？Javascript 如何使extjs accordion布局示例动态化？,javascript,extjs,Javascript,Extjs,我已经从extjs示例中取出了accordion layout.html和.js文件（如下） 下一步是什么使其动态化，例如链接的语法看起来如何，使得填充左侧面板下一部分的HTML具有填充右侧内容的链接 是否有人知道超出此shell的教程，并介绍如何使其动态化，即如何将其集成到工作应用程序中？ <html> <head> <title>Accordion Layout</title> <link rel="stylesheet"
<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>
手风琴布局
html，正文{
字体：普通12px verdana；
保证金：0；
填充：0；
边界：0无；
溢出：隐藏；
身高：100%；
}
.空。x面板-主体{
填充顶部：20px；
文本对齐：居中；
字体：斜体；
颜色：灰色；
字体大小：11px；
}
Ext.onReady（函数（）{
var item1=新的外部面板({
标题：“开始”，
html:“这是开始内容”，
cls:“空的”
});
var item2=新的外部面板({
标题:"申请",，
html:“空面板”，
cls:“空的”
});
var item3=新的外部面板({
标题：“模块”，
html:“空面板”，
cls:“空的”
});
var accordion=新的外部面板({
地区：'西部'，
边距：'5 05'，
斯普利特：是的，
宽度：210，
布局：'手风琴'，
项目：[项目1、项目2、项目3]
});
var viewport=新的外部视口({
布局：'边框'，
项目：[
手风琴{
地区：'中心'，
边距：'5 0'，
cls:“空”，
车身样式：“背景：#f1f1”，
html:“这是每个选择的内容所在。”
}]
});
});
有十亿种方法可以做到这一点。这个问题很模糊。。。但这里有一个非常简单的例子。只要有一个Ajax函数调用服务器并动态添加面板。 假设您的服务器通过调用/links.JSON提供以下JSON
{links: ['http://www.google.com'], ['http://www.yahoo.com']}
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);
}
});
});
Ext.onReady（函数（）{
var accordion=新的外部面板({
地区：'西部'，
边距：'5 05'，
斯普利特：是的，
宽度：210，
布局：“手风琴”
});
新外部视口({
布局：'边框'，
项目：[
手风琴，
{region:'center'，html:'这是每个选择的内容所在。}]
});
Ext.Ajax.request({
url:“/links.json”，
回调：函数（响应）{
var json=Ext.decode（响应）；
var cfgs=[]；
for（var i=0；i