请教一个KendoUI的布局问题

我之前是用ExtJS的,见到Kendo后准备做个小DEMO玩玩,然而上来的布局就把我弄晕了:
ExtJS可以页面中只有一个DIV,各种组件像搭积木一样往DIV上搭;而Kendo在布局之前必须把各种DIV的依赖关系写好?还是说其实不必这么麻烦?
<head>
<script>
$(document).ready(function() {
// 竖直方向
$('#vertical').kendoSplitter({
orientation: "vertical",
panes : [
{ collapsible: true, size: '50px'},
{ collapsible: false },
{ collapsible: true, size: '50px'}
]
});

// 水平方向
$("#horizontal").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "200px"},
{ collapsible: false}
]
});

});
</script>
</head>
<body>
<div id="vertical">
<div id="top-pane">
<div class="pane-content">
<p>头部</p>
</div>
</div>
<div id="middle-pane">
<div id="horizontal" style="padding:0px; margin: 0px; width: 100%;height: 100%;">
<div id="left-pane">
<div class="pane-content">
<div id="mainPanel">功能菜单</div>
</div>
</div>
<div id="right-pane">
<div class="pane-content">
<h3>主面板</h3>
</div>
</div>
</div>
</div>
<div id="bottom-pane">
<div class="pane-content">
<p>底部</p>
</div>
</div>
</div>
</body>

搜索了一圈看到的例子似乎还都是如此,如果这样的话,似乎有点不爽啊……
我想像中应该是这样:页面上只有一个<div id="main"></div>,然后我可以控制在里面渲染一个“布局”,比如上左右三块,然后在“上”里面放一张图,“左”里面放一个“树形组件”,“右”里放一个grid,等等。
已邀请:

admin

赞同来自:

Kendo的 splitter 需要手动显式指定div占位符。我觉得这样对于pane里面的样式布局,一些逻辑控制,可能更清楚一些。

要回复问题请先登录注册