Ext.Net控件基础教程：布局、事件与数据库交互

本文档主要介绍了EXT.NET框架中的一些基础控件及其使用方法，包括布局管理、事件处理、Grid的绑定与操作以及表单和DatePicker控件的应用。 EXT.NET是一个基于.NET Framework的开源JavaScript库，它扩展了Sencha Ext JS库，提供了丰富的Web应用程序开发组件。在EXT.NET中，控件的布局和组织方式对于构建用户界面至关重要。 1. 布局 - 绝对布局(Absolute)：允许通过设置x和y坐标来精确定位控件。例如，创建一个Viewport，并在其中添加两个Panel，通过设置X和Y属性来决定它们的位置。 ```xml <ext:Viewport runat="server" Layout="Absolute"> <Items> <ext:Panel runat="server" BodyPadding="15" Width="200" Height="200" Title="Panel1" X="50" Y="50"/> <ext:Panel runat="server" BodyPadding="15" Width="200" Height="200" Title="Panel2" X="125" Y="125"/> </Items> </ext:Viewport> ``` - 手风琴布局(Accordion)：这种布局将所有子项堆叠在一起，每次只能展开一个。例如，创建一个包含三个Panel的Accordion布局，每个Panel都有一个标题。 ```xml <ext:Panel runat="server" Layout="Accordion" Margins="0 0 15 0"> <Items> <ext:Panel runat="server" Title="Item1" Border="false"/> <ext:Panel runat="server" Title="Item2" Border="false"/> <ext:Panel runat="server" Title="Item3" Border="false"/> </Items> </ext:Panel> ``` - 锚点布局(AnchorLayout)：根据容器的大小动态调整控件的大小。例如，创建一个Window，包含两个TextField，使用AnchorHorizontal和AnchorVertical属性来指定它们的尺寸。 ```xml <ext:Window ID="Window1" runat="server" Title="" Width="500" Height="300" MinWidth="200" MinHeight="100" BodyPadding="5" Layout="AnchorLayout"> <Items> <ext:TextField ID="TextField1" runat="server" FieldLabel="Field1" LabelWidth="35" AnchorHorizontal="100%" AnchorVertical="100%"/> <ext:TextField ID="TextField2" runat="server" FieldLabel="Field2" LabelWidth="35" AnchorHorizontal="100%" AnchorVertical="100%"/> </Items> </ext:Window> ``` 2. 事件处理：EXT.NET中的控件支持各种事件，如点击、改变等，可以通过`OnClient`属性绑定客户端事件处理函数，或者在服务器端使用`DirectEvents`或`Listeners`配置项来处理事件。 3. Grid的绑定与操作 - 数据绑定：EXT.NET的Grid控件可以与数据源（如Entity Framework的数据库上下文）绑定，实现数据的展示和操作。使用`Store`属性绑定数据源，`Columns`定义列，`Plugins`添加功能插件，如行编辑、分页等。 - 增删改操作：Grid中的行编辑插件允许用户直接在表格内编辑数据，同时支持添加新记录和删除现有记录。 4. 表单绑定和取值 - 表单组件：EXT.NET提供了多种表单组件，如TextField、ComboBox、CheckBox等，可以用于用户输入和数据展示。 - 表单绑定：表单可以与数据模型绑定，通过`Model`和`Store`属性实现数据的双向绑定。 - 取值：使用`Value`属性获取表单控件的当前值，或者在服务器端通过`Control.Value`获取。 5. DatePicker控件：EXT.NET的DatePicker提供日期选择功能，用户可以选择一个日期并将其值绑定到某个字段。例如： ```xml <ext:DatePicker ID="DatePicker1" runat="server" FieldLabel="选择日期" /> ``` 这些基本控件和布局方式是EXT.NET开发中常见的元素，掌握它们能帮助开发者快速构建功能丰富的Web应用界面。在实际开发中，还需要结合EXT.NET的其他高级特性，如数据验证、远程操作、图表组件等，以实现更复杂的业务需求。