ExtJS-3.4.0系列：Ext.Panel

1、Ext.Panel简单示例

代码：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Scripts/ext-3.4.0/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/ext-3.4.0/adapter/ext/ext-base.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/ext-3.4.0/ext-all.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/ext-3.4.0/src/locale/ext-lang-zh_CN.js")" type="text/javascript"></script>
    @RenderSection("Header")
</head>
<body>
    @RenderBody()
</body>
</html>
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Header{
    <script type="text/javascript">
        Ext.onReady(function () {
            var pnl = new Ext.Panel({
                el: 'test',
                title: '标题',
                collapsible: true,
                titleCollapse: true,
                width: 200,
                height: 150,
                html: '内容'
            });

            pnl.render();
        });
    </script>
}
<div id="test">
</div>

效果图：

posted @ 2012-10-02 13:57  libingql  阅读(1904)  评论(0)  编辑  收藏  举报