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, 200, height: 150, html: '内容' }); pnl.render(); }); </script> } <div id="test"> </div>
效果图: