Ext.NET-布局

概述

前一篇介绍了Ext.NET基础知识,并对Ext.NET布局进行了简要的说明,本文中我们用一个完整的示例代码来看看Ext.NET的布局。

示例代码下载地址>>>>>


本文目的

本文使用Tree、Grid应该是我们最为常用的控件,实现自适应的页面布局,

顶端:使用Panel,可折叠; 
左侧:使用TreePanel,可折叠; 
中间:使用GridPanel,主要区域,不可折叠; 
底部:使用GridPanel,可折叠;

先看看我们最终实现的效果

整体布局

LayoutDemo_800x600

全部折叠后的效果

全部折叠

当点击gridMain下的新增按钮弹出Window

弹出Window


开始之前


新建WebFrom窗体

新建WebFrom窗体,并在ASPX文件中添加入下代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormDemo.Layouts.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Ext.Net布局示例</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
</body>
</html>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

关于<ext:ResourceManager runat="server" />上一篇中已经讲过,它必须在<body></body>中第一行,因为它负责为Web页面添加所需的js和css文件的引用。


一个最简单的页面布局示例

在开始之前,我们先来看看一个最为简单的Viewport页面布局示例

添加CSS样式

为了演示需要我们为每个区域指定不同的背景颜色,在<head></head>添加如下CSS样式

<style type="text/css">
    .north {
        background-color: #FFFFFF;
    }

    .west {
        background-color: #00FFFF;
    }

    .center {
        background-color: #FF00FF;
    }

    .sourth {
        background-color: #FFFF00;
    }
</style>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

添加Viewport

我们需要实现的是自适应浏览器窗口大小(占满整个<body></body>),所以使用Viewport,首先在<ext:ResourceManager runat="server" />下面添加如下代码

<ext:Viewport runat="server" Layout="BorderLayout">
</ext:Viewport>
 
  • 1
  • 2
  • 1
  • 2

Viewport将自己呈现在<body></body>中,并自动调整自身大小以适应整个浏览器窗口,一个Web页面只允许出现一个Viewport。 
关于Viewport的详细说明参见此处。 
我们将页面分为多个区域,并可以手动调整没个区域的大小,所以,Viewport的属性Layout="BorderLayout";


添加子控件

接着我们为Viewport添加子容器,每个子容器代表一个区域;

<ext:Viewport runat="server" Layout="BorderLayout">
    <Items>
        <ext:Container runat="server" Region="North" Html="<h2>North</h2>"  Cls="north">
        </ext:Container>
        <ext:Container runat="server" Region="West" Html="<h2>West</h2>" Cls="west">
        </ext:Container>
        <ext:Container runat="server" Region="Center" Html="<h2>Center</h2>" Cls="center">
        </ext:Container>
        <ext:Container runat="server" Region="South" Html="<h2>Sourth</h2>" Cls="sourth">
        </ext:Container>
    </Items>
</ext:Viewport>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

运行效果如下

ViewportDemo

说明

  1. Viewport中的<Items>...</Items>,Items中只能定义Ext.NET提供的控件,而有时候我们需要写一些HTML或ASP.NET自带的控件,请使用’‘,如<Content><div>...</div></Content>
  2. Container的Region属性指定了自身在Viewport中的位置,Region的值可以为 
    • North:顶部;
    • South:底部;
    • East:右边;
    • West:左边;
    • Center:占满剩余的空间,在BorderLayout式布局中,必须有一个控件的Region为Center。

最终的ASPX代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormDemo.Layouts.Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ext.Net布局示例</title>
    <style type="text/css">
        .north {
            background-color: #FFFFFF;
        }

        .west {
            background-color: #00FFFF;
        }

        .center {
            background-color: #FF00FF;
        }

        .sourth {
            background-color: #FFFF00;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Container runat="server" Region="North" Html="<h2>North</h2>" Cls="north">
            </ext:Container>
            <ext:Container runat="server" Region="West" Html="<h2>West</h2>" Cls="west">
            </ext:Container>
            <ext:Container runat="server" Region="Center" Html="<h2>Center</h2>" Cls="center">
            </ext:Container>
            <ext:Container runat="server" Region="South" Html="<h2>Sourth</h2>" Cls="sourth">
            </ext:Container>
        </Items>
    </ext:Viewport>
</body>
</html>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

前面说过,Ext.Net是对ExtJs的封装,它将ASPX页面中的EXT.NET标记代码翻译成ExtJS,我们可以看看它为我们生成的ExtJs(JavaScript)代码

Ext.net.ResourceMgr.init({
    id: "ctl01",
    theme: "neptune"
});
Ext.onReady(function () {
    Ext.create("Ext.container.Viewport", {
        renderTo: Ext.getBody(),
        items: [
            {
                cls: "north",
                html: "<h2>North</h2>",
                xtype: "container",
                region: "north"
            },
            {
                cls: "west",
                html: "<h2>West</h2>",
                xtype: "container",
                region: "west"
            },
            {
                cls: "center",
                html: "<h2>Center</h2>",
                xtype: "container",
                region: "center"
            },
            {
                cls: "sourth",
                html: "<h2>Sourth</h2>",
                xtype: "container",
                region: "south"
            }
        ],
        layout: "border"
    });
});
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

使用浏览器的查看源码功能,若是javascript代码没有格式化,请在Web.config文件中进行如下设置

<extnet theme="Crisp"
        scriptMode="Debug"
        sourceFormatting="true"
        licenseKey="** Ext.NET LICENSE KEY HERE **"
        initScriptMode="Linked"/>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

详细的设置请参见上一篇中 WEBCONFIG中extnet 配置说明


实现页面布局

代码

上面的简单示例演示了BorderLayout最基本的布局,接着我们来看看一个实例代码。 
删除上面为了演示添加的代码,我们最初的页面ASPX代码是这样的

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormDemo.Layouts.Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ext.Net布局示例</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
        </Items>
    </ext:Viewport>
</body>
</html>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

我们在<ext:Viewport><Items>...代码...</Items></ext:Viewport>中分别添加Panel(pnlTop)、TreePanel(pnlLeft)、和两个GridPanel(gridMaingridChild),代码如下

<ext:Viewport runat="server" Layout="BorderLayout">
    <Items>
        <ext:Panel runat="server" Header="false" ID="pnlTop" Region="North" Html="The North"
            BodyPadding="10" CollapseMode="Mini" Collapsible="true" Split="true">
        </ext:Panel>
        <ext:TreePanel runat="server" Region="West" Flex="1"
            Title="LeftTree" HideCollapseTool="true" Collapsible="true"
            Split="true" ID="pnlLeft">
            <Tools>
                <ext:Tool Type="Expand" ToolTip="全部展开">
                </ext:Tool>
                <ext:Tool Type="Collapse" AlignTarget="" ToolTip="全部折叠">
                </ext:Tool>
            </Tools>
        </ext:TreePanel>
        <ext:Container runat="server" Region="Center" Flex="4"
            Layout="BorderLayout">
            <Items>
                <ext:GridPanel runat="server" Title="gridMain" Region="Center" Flex="2">
                    <DockedItems>
                        <ext:Toolbar runat="server" Dock="Top">
                            <Items>
                                <ext:Button runat="server" ID="btnMainAdd"
                                    Icon="Add" ToolTip="新建">
                                </ext:Button>
                                <ext:Button runat="server" ID="btnMainDelete"
                                    Icon="Delete" ToolTip="删除">
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                         <ext:PagingToolbar runat="server" ID="pagMain" Dock="Bottom">
                        </ext:PagingToolbar>
                    </DockedItems>
                </ext:GridPanel>
                <ext:GridPanel runat="server" Title="gridChild" Region="South" Flex="1"
                    Collapsible="true" CollapseDirection="Bottom" Split="true">
                    <DockedItems>
                        <ext:Toolbar runat="server" Dock="Top">
                            <Items>
                                <ext:Button runat="server" ID="btnChildAdd" Icon="Add"
                                    ToolTip="新建">
                                </ext:Button>
                                <ext:Button runat="server" ID="btnChildDelete" Icon="Delete"
                                    ToolTip="删除">
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                        <ext:PagingToolbar runat="server" ID="pagChild" Dock="Bottom">
                        </ext:PagingToolbar>
                    </DockedItems>
                </ext:GridPanel>
            </Items>
        </ext:Container>
    </Items>
</ext:Viewport>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

实际运行效果如下

LayoutDemo_800x600

我们对每个Panel分别说明


顶部Panel说明(ID="pnlTop")

  • Header="false":隐藏标题栏;
  • Region="North":在父容器的顶端显示;
  • Html="The North":其中要显示的HTML内容,不能和内部的<items></items>同时出现;
  • BodyPadding="10":同CSS的padding,只能为整数;
  • CollapseMode="Mini":折叠方式为Mini,可选项有DefaultHeaderMini,详细说明见此处
  • Collapsible="true":可折叠;
  • Split="true":可改变尺寸,详细说明见此处

由于我们没有对此Panel的高度做任何定义,所以它会根据其内容自动调整默认高度。 
关于更多的Panel说明见 此处


左侧TreePanel说明(ID="pnlLeft")

本文只是为了说明布局,所以此处的TreePanel中没有任何内容。


属性说明

  • Region="West":在父容器的左侧显示;
  • Flex="1":一个单位宽度,详细说明见 此处
  • Title="LeftTree":标题栏文字;
  • HideCollapseTool="true":隐藏收缩工具按钮;
  • Collapsible="true":可折叠;
  • Split="true":可改变尺寸,详细说明见此处

Tools说明

<Tools>
    <ext:Tool Type="Expand" ToolTip="全部展开">
    </ext:Tool>
    <ext:Tool Type="Collapse" AlignTarget="" ToolTip="全部折叠">
    </ext:Tool>
</Tools>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

如上代码表示了TreePanel标题栏右侧的两个按钮,其中ToolTip属性为鼠标悬停时的提示文字。


Center区域说明

如下代码定义了一个Viewport中4个单位宽(Flex="4")的Center区域(Region="Center"),并指明了其子控件也使用Border布局(Layout="BorderLayout");

<ext:Container runat="server" Region="Center" Flex="4"
    Layout="BorderLayout">
    省略代码......
</ext:Container>
 
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

GridPanel说明

本文只是为了说明布局,所以此处的GridPanel中没有任何内容。 
两个GridPanel除了ID和Flex属性不同外,其余属性基本相同。 
<DockedItems>...</DockedItems>中定义了两个Dock属性的控件,一个Dock="Top"的Toolbar和Dock="Bottom"的PagingToolbar,从字面意思可以看出一个是工具栏,而另一个是分页工具栏;


添加Window

为了实现弹出编辑,我们需要使用Window控件,在</ext:Viewport></body>之间加入如下代码

<ext:Window runat="server" ID="winMain" Icon="ApplicationEdit" Hidden="true" Collapsible="true"
    Constrain="true" MinHeight="400" MinWidth="500" Modal="true" CloseAction="Destroy" Layout="FitLayout">
    <Buttons>
        <ext:Button runat="server" ID="btnMainSave" Text="保存">
        </ext:Button>
        <ext:Button runat="server" ID="btnMainCancel" Text="取消">
            <Listeners>
                <Click Handler="#{winMain}.close();" />
            </Listeners>
        </ext:Button>
    </Buttons>
    <Items></Items>
</ext:Window>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Window属性说明

  • Icon="ApplicationEdit":定义Windows的图标,Ext.NET内置了上百个图标;
  • Hidden="true":此Window是隐藏的,因为我们初次打开页面时不需要显示此Window,当编辑或新增时才显示;
  • Collapsible="true":可折叠;
  • Constrain="true":不允许超出父容器的区域,此时其父容器为body,也就意味着此Window不能超出整个Web页面;
  • MinHeight="400" MinWidth="500":最小高度和最小高度;
  • Modal="true":模式窗体方式显示,类似MicroSoft Windows提供的模式窗体方式,这个已经很常见了;
  • CloseAction="Hide":关闭方式为隐藏,可选项有’Destroy’和’Hide’,因为我们需要重复利用此Window,而不用每次new一个新的Window,达到重用效果;
  • Layout="FitLayout":其内部采用铺满方式的布局。

Window>Buttons说明

  • <Buttons>...</Buttons>中定义了两个按钮,一个用来保存,一个用来取消,点取消按钮时关闭此Window;
  • <Click Handler="#{winMain}.close();" />中的#{winMain}相当于javascript中的App.winMain,表示winMain的实例对象,Window提供了close方法;一般用 Fn指示javascript中的事件方法名称,而Handler一般用来写一些相对简单的实现代码。

弹出显示Window

我们可以通过服务器端事件(Directevents)来弹出显示Window,也可以使用客户端javascript。 
服务器端显示Window示例代码

protected void btnMainAdd_Click(object sender,Ext.Net.DirectEventArgs e)
{
    winMain.Show();
}
 
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

客户端javascript显示Window示例代码

var btnMainAdd_Click = function(sender,e) {
    App.winMain.show();
};
 
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

这里我们采用后者,这样减少了一次与服务器端的交互,由于此处的代码很简单(只有一行实际代码),所以我们可以使用Handler方式来写。修改btnMainAdd的代码如下:

<ext:Button runat="server" ID="btnMainAdd"
    Icon="Add" ToolTip="新建">
    <Listeners>
        <Click Handler="#{winMain}.show()" />
    </Listeners>
</ext:Button>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

这样,当单击gridMain工具栏中的新建按钮时,将弹出winMain,运行效果如下:

弹出Window

接着我们可以在此Window中添加各种文本、数字、日期等控件,编辑/新建实际的数据以存储到实际的数据库中,这个我们放在后面再来细说。


最终代码

最终的ASPX代码如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebFormDemo.Layouts.Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ext.Net布局示例</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel runat="server" Header="false" ID="pnlTop" Region="North" Html="The North"
                BodyPadding="10" CollapseMode="Mini" Collapsible="true" Split="true">
            </ext:Panel>
            <ext:TreePanel runat="server" Region="West" Flex="1"
                Title="LeftTree" HideCollapseTool="true" Collapsible="true"
                Split="true" ID="pnlLeft">
                <Tools>
                    <ext:Tool Type="Expand" ToolTip="全部展开">
                    </ext:Tool>
                    <ext:Tool Type="Collapse" AlignTarget="" ToolTip="全部折叠">
                    </ext:Tool>
                </Tools>
            </ext:TreePanel>
            <ext:Container runat="server" Region="Center" Flex="4"
                Layout="BorderLayout">
                <Items>
                    <ext:GridPanel runat="server" Title="gridMain" Region="Center" Flex="2">
                        <DockedItems>
                            <ext:Toolbar runat="server" Dock="Top">
                                <Items>
                                    <ext:Button runat="server" ID="btnMainAdd"
                                        Icon="Add" ToolTip="新建">
                                        <Listeners>
                                            <Click Handler="#{winMain}.show()" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button runat="server" ID="btnMainDelete"
                                        Icon="Delete" ToolTip="删除">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                            <ext:PagingToolbar runat="server" ID="pagMain" Dock="Bottom">
                            </ext:PagingToolbar>
                        </DockedItems>
                    </ext:GridPanel>
                    <ext:GridPanel runat="server" Title="gridChild" Region="South" Flex="1"
                        Collapsible="true" CollapseDirection="Bottom" Split="true">
                        <DockedItems>
                            <ext:Toolbar runat="server" Dock="Top">
                                <Items>
                                    <ext:Button runat="server" ID="btnChildAdd" Icon="Add"
                                        ToolTip="新建">
                                    </ext:Button>
                                    <ext:Button runat="server" ID="btnChildDelete" Icon="Delete"
                                        ToolTip="删除">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                            <ext:PagingToolbar runat="server" ID="pagChild" Dock="Bottom">
                            </ext:PagingToolbar>
                        </DockedItems>
                    </ext:GridPanel>
                </Items>
            </ext:Container>
        </Items>
    </ext:Viewport>

    <ext:Window runat="server" ID="winMain" Icon="ApplicationEdit" Hidden="true" Collapsible="true"
        Constrain="true" MinHeight="400" MinWidth="500" Modal="true" CloseAction="Destroy" Layout="FitLayout">
        <Buttons>
            <ext:Button runat="server" ID="btnMainSave" Text="保存">
            </ext:Button>
            <ext:Button runat="server" ID="btnMainCancel" Text="取消">
                <Listeners>
                    <Click Handler="#{winMain}.close();" />
                </Listeners>
            </ext:Button>
        </Buttons>
        <Items></Items>
    </ext:Window>
</body>
</html>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

自2010年的 Coolite 时代开始,几乎所有.NET Web项目中使用 Ext.NET ,这篇文章算是表达对他们的敬意。

原文地址:

http://www.cnblogs.com/goga21cn/p/EXT-NET-Layout.html

http://blog.csdn.net/goga21cn/article/details/45672353

https://coding.net/u/guog/p/ExtNetDemo/git

博客园

  1. Ext.NET-基础篇
  2. Ext.NET-布局篇
  3. Ext.Net-Grid篇

CSDN

  1. Ext.NET-基础篇
  2. Ext.NET-布局篇
  3. Ext.Net-Grid篇

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值