控件与基本布局

最新推荐文章于 2022-03-09 21:16:50 发布

rockywu

最新推荐文章于 2022-03-09 21:16:50 发布

阅读量693

点赞数

分类专栏： ExtNet 文章标签： server ext extjs layout object assembly

本文链接：https://blog.csdn.net/rockywu/article/details/7032677

版权

ExtNet 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

近期发现Extjs比较火,可能由于ExtJs用户体念比较好好吧,故学习.Net版的ExtJs Ext.Net,以便记下每一个脚印.学习资料主要参考了http://examples.ext.net/例子进行学习体验..
Ext.Net是一个开源的ASP.NET(WebForm+MVC)组件库，对Extjs javascript库进行的封装。虽然Ext.Net是经过封装成Net的组件，但在VS设计时工具箱的拖拽控件用处没有什么用处，且不能可视化使用。
先看基本界面布局设计效果

在该界面通过一个Viewport容器下放置一个FormPanel以至整个界面风格一致，又由于备注并非两列的布局，故放置一个Container1和HtmlEditor形成一列布局，然后将Container1的Layout设置为ColumnLayout以便进行列布局。
看下面前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FormPanel.aspx.cs" Inherits="ExtNet.FormPanel" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>控件与基本布局</title>    
</head>
<body>
    <form id="form1" runat="server">
     <ext:ResourceManager ID="ResourceManager1" runat="server">
     </ext:ResourceManager>
     <ext:Viewport ID="ViewPortUserInfo" runat="server" Layout="FitLayout">
      <%--Viewport将整个页面以ExtNet风格显示--%>
        <Items>
            <ext:FormPanel ID="FormPanelUserInfo" runat="server"  Title="填写用户信息" Frame="True">
            <%--Frame="True" 设置FormPanel 为框架,这样FormPanel容器下控件处于统一风格--%>
                <Items>
                    <ext:Container ID="Container1" runat="server"  Layout="ColumnLayout" Height="115"
                        LabelAlign="Left">
                        <%--Height设置容器高度为200,默认为0,设置Layout为列显示.LabelWidth="80" Label宽80，根据Label文字总宽度手动设定--%>
                        <Items>
                            <ext:Container ID="Container2" runat="server" Layout="FormLayout"  ColumnWidth=".5">
                            <%-- Layout="FormLayout" Form布局,ColumnWidth=".5" 列宽50% --%>
                                <Items>
                                    <ext:TextField ID="txtUserName" runat="server" FieldLabel="姓名" AnchorHorizontal="95%" AllowBlank="false">
                                    </ext:TextField>
                                    <ext:TextField ID="txtTel" runat="server" FieldLabel="电话" AnchorHorizontal="95%">
                                    </ext:TextField> 
                                    <ext:TextField runat="server" ID="txtEmail"  FieldLabel="邮箱" AnchorHorizontal="95%">
                                    </ext:TextField>
                                    <ext:DateField runat="server" ID="dfBirthDay" FieldLabel="生日" AnchorHorizontal="95%" Editable="false" 
                                    AllowBlank="false" Format="yyyy-MM-dd" >
                                    </ext:DateField>
                                </Items>
                            </ext:Container>
                            <ext:Container ID="Container3" runat="server" Layout="FormLayout"  ColumnWidth=".5">
                                <Items>
                                   <%--AnchorHorizontal="95%",总体宽95% ,AllowBlank是否允许空白,即是否必填--%>
                                    <ext:RadioGroup ID="rdoSex" FieldLabel="性别" runat="server">
                                      <Items>
                                          <ext:Radio ID="rdoMen" runat="server" BoxLabel="男" Checked="true">
                                          </ext:Radio>
                                           <%--FieldLabel与BoxLabel不同,FieldLabel是字段标识，是值标识--%>
                                          <ext:Radio ID="rdoWomen" runat="server" BoxLabel="女">
                                          </ext:Radio>
                                      </Items>  
                                    </ext:RadioGroup>
                                       <ext:TextField ID="txtMobile" runat="server" FieldLabel="手机" AnchorHorizontal="95%">
                                    </ext:TextField>  
                                    <ext:SelectBox ID="SelectBox1" runat="server" ValueField="Code" DisplayField="Name" FieldLabel="省份" AnchorHorizontal="95%" EmptyText="请选择...">
                                        <Store>
                                            <ext:Store ID="Store1" runat="server">
                                                <Reader>
                                                    <ext:ArrayReader>
                                                        <Fields>                                                            
                                                            <ext:RecordField Name="Code" />   
                                                            <ext:RecordField Name="Name" />                                                         
                                                        </Fields>
                                                    </ext:ArrayReader>
                                                </Reader>            
                                            </ext:Store>    
                                        </Store>    
                                    </ext:SelectBox>         
                                     <ext:TextField ID="txtAdd" runat="server" FieldLabel="地址" AnchorHorizontal="95%">
                                    </ext:TextField>
                               </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                     <ext:HtmlEditor ID="editNoteText" runat="server" AnchorHorizontal="98%"  FieldLabel="备注" >
                      </ext:HtmlEditor>
                </Items>               
            </ext:FormPanel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ExtNet
{
    public partial class FormPanel : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)LoadData();
        }
        private void LoadData()
        {
            var store = this.SelectBox1.GetStore();
            store.DataSource = new object[]
                    {
                        new object[] { "GD", "广东"},
                        new object[] { "GX", "广西"},
                        new object[] { "BJ", "北京"},
                        new object[] { "SH", "上海"},
                        new object[] { "HN", "湖南"}
                    };
            store.DataBind();
        }
    }
}

后台代码主要SelectBox1的数据源.

rockywu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
控件与基本布局

近期发现Extjs比较火,可能由于ExtJs用户体念比较好好吧,故学习.Net版的ExtJs Ext.Net,以便记下每一个脚印.学习资料主要参考了http://examples.ext.net/例子进行学习体验..Ext.Net是一个开源的ASP.NET(WebForm+MVC)组件库，对Extjs javascript库进行的封装。虽然Ext.Net是经过封装成Net的组件，但在VS设计时
复制链接

扫一扫