用EXT 写一个前端界面 不用JS 创建 用ASPX 编写顶部一个大TextField 组件,中间水平两个TextField 组件 2行,底部一个GridPanel
时间: 2024-03-01 20:50:08 浏览: 87
好的,以下是一个使用ASP.NET编写的前端界面代码,满足您的需求。请注意,由于这是ASP.NET,因此我们将使用ASPX页面来编写前端界面,而不是使用JavaScript。
```aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyPage.aspx.cs" Inherits="MyNamespace.MyPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>My Page</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- 顶部大TextField组件 -->
<asp:Panel ID="topPanel" runat="server" Width="100%">
<ext:TextField ID="topField" runat="server" FieldLabel="顶部大TextField" Width="100%" Height="100"></ext:TextField>
</asp:Panel>
<!-- 中间水平两个TextField组件(2行) -->
<asp:Panel ID="middlePanel" runat="server" Width="100%">
<ext:Panel ID="middleFields" runat="server" Layout="Table" LayoutConfig='{ "columns": 2, "rows": 2 }'>
<Items>
<ext:TextField ID="middleField1" runat="server" FieldLabel="中间TextField 1" Width="50%" />
<ext:TextField ID="middleField2" runat="server" FieldLabel="中间TextField 2" Width="50%" />
<ext:TextField ID="middleField3" runat="server" FieldLabel="中间TextField 3" Width="50%" />
<ext:TextField ID="middleField4" runat="server" FieldLabel="中间TextField 4" Width="50%" />
</Items>
</ext:Panel>
</asp:Panel>
<!-- 底部GridPanel -->
<asp:Panel ID="bottomPanel" runat="server" Width="100%">
<ext:GridPanel ID="bottomGrid" runat="server" Title="底部GridPanel" Width="100%" Height="300">
<Store>
<ext:Store ID="store1" runat="server">
<Model>
<ext:Model ID="model1" runat="server">
<Fields>
<ext:ModelField Name="name" Type="String" />
<ext:ModelField Name="age" Type="Int" />
<ext:ModelField Name="email" Type="String" />
</Fields>
</ext:Model>
</Model>
<Data>
<ext:Record Name="John" Age="25" Email="john@example.com" />
<ext:Record Name="Jane" Age="30" Email="jane@example.com" />
<ext:Record Name="Bob" Age="35" Email="bob@example.com" />
</Data>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="nameColumn" runat="server" Header="姓名" DataIndex="name" />
<ext:Column ID="ageColumn" runat="server" Header="年龄" DataIndex="age" />
<ext:Column ID="emailColumn" runat="server" Header="邮箱" DataIndex="email" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</asp:Panel>
</div>
</form>
</body>
</html>
```
这段代码会创建一个包含顶部大TextField组件、中间水平两个TextField组件(2行)和底部GridPanel的前端界面。请注意,我们使用了EXT.NET库来创建前端组件。此外,我们使用了ASP.NET的服务器控件来创建包含组件的容器。
阅读全文