《Ext.net》處女做，（內容包括EXT自帶圖標庫文件和Font Awesome圖標庫），筆記特別詳細，適合剛剛自學的朋友。

時間 2019-11-16

標籤 Ext.net 內容包括 ext 自帶圖標文件 font awesome 筆記特別詳細適合剛剛自學朋友简体版

原文原文鏈接

徹底處於自學啊，壓力，不過好在有個asp.net的師傅。不過都數都是本身作，本身百度。程序員就應該多找度娘。能不麻煩別人就不要麻煩別人。css

我自學的方式是：參考官網API、而後英文看不懂用有道翻譯、而後多練習，結合項目一塊兒作、最後纔去問師傅。html

官網API地址：http://examples.ext.net/程序員

參考學習資料地址：http://www.qeefee.com/article/extnet-learn-01-using-extnet-in-webformweb

這裏面很詳細，相信慢慢來必定能成爲大神。服務器

開始正題：框架

效果：asp.net

純屬無聊，能夠感動女神哦。撩妹技能。哈哈哈ide

前面學過，要作個東西就要有一個容器，有容器才能放東西。工具

Panel容器：經常使用的容器之一，是FormPanel、Window等的基礎。開始作吧。oop

代碼說明：

進來把Body的裏面的東西都刪了，使用EXT.Net必需要添加的：<ext:ResourceManager runat="server" />，解釋的話就是這是一個容器建立，如今body就是一個容器。

<ext:Panel runat="server"     這些都是服務器控件，因此要加這個。不要忘記。
ID="panel"             這個容器的名稱
Title="你愛她嗎？"    容器的窗口標題
Layout="HBoxLayout"     這個容易用什麼佈局？  前輩的博客文章有說，我用的是橫向佈局。
Width="600"       容器的寬
Height="200"      容器的高
Closable="true"   窗體上面的X是否顯示
CloseAction="Hide"   字面上的理解就是關閉動做隱藏
>

<LayoutConfig>   佈局配置
<ext:HBoxLayoutConfig Align="Stretch" />  
</LayoutConfig>
<TopBar>   工具欄顯示的東西
<ext:Toolbar runat="server">  定義工具欄
<Items>  在裏面建立內容
<ext:Button runat="server" Text="+2" ToolTip="添加愛" />    toopltip=鼠標停在控件上面顯示的文本 
<ext:ToolbarSeparator runat="server" />              這裏是顯示分隔線的意思
<ext:Button runat="server" Icon="Disk" ToolTip="保存她的愛" />   ICON=控件前面的圖標，EXT.NET有自帶的，圖片在文章有上傳。  還有一個圖標庫，Font Awesome一套絕佳的圖標字體庫和CSS框架

</Items>

</ext:Toolbar>   結束標籤
</TopBar>
<Buttons> 建立一個按鈕容器
<ext:Button runat="server" Text="保存" Scale="Medium" UI="Primary" />   text=按鈕顯示的文本   scale=按鈕的大小  它的屬性有  medium：中等的  Large：大小  small：小的
<ext:Button runat="server" Text="請執行左邊" Scale="Large" />
</Buttons>

        <Items>
            <ext:Panel runat="server" ID="loveme" Html="<b>對她滿滿的的愛</b>" Flex="1" Border="true" BodyStyle="color:red" />  Html=表示在控件裏面顯示的內容  flex表示這兩個佔得寬度，
flex只在當layOut爲vbox,hbox中起做用。  border=表示是否使用邊框，當前是開啓的，全部上面有個框。   bodystyle=就是裏面的樣式啦，字體爲紅色。
            <ext:Panel runat="server" ID="love" Html="<b>對她滿滿的的愛</b>" Flex="2" Border="true" BodyStyle="color:red"/> flex佔2分之1的寬，本身對着效果看
        </Items>
        <Tools>　　　　　　　　　　　　　　工具控件
            <ext:Tool Type="Help" ToolTip="幫助" />  type=表示工具的類型，裏面有不少  tooltip=表示停在控件上顯示的文本
            <ext:Tool Type="Gear" ToolTip="設置" />
        </Tools>

下面是所有的代碼。請忽略本條。

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

<!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>LOVE is LYS</title>
    <link rel="stylesheet" href="font-awesome.min.css" />
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Panel runat="server" 
        ID="panel" 
        Title="你愛她嗎？"
        Layout="HBoxLayout" 
        Width="600" 
        Height="200" 
        Closable="true" 
        CloseAction="Hide"
        >
        <LayoutConfig>
            <ext:HBoxLayoutConfig Align="Stretch" />
        </LayoutConfig>
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="+2" ToolTip="添加愛" />
                    <ext:ToolbarSeparator runat="server" />
                    <ext:Button runat="server" Icon="Disk" ToolTip="保存她的愛" />
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Buttons>
            <ext:Button runat="server"  Text="保存" Scale="Large" UI="Primary" />
            <ext:Button runat="server"  Text="請執行左邊" Scale="Large" />
        </Buttons>
        <Items>
            <ext:Panel runat="server" ID="loveme" Html="<b>對她滿滿的的愛</b>" Flex="1" Border="true" BodyStyle="color:red" />
            <ext:Panel runat="server" ID="love" Html="<b>對她滿滿的的愛</b>" Flex="2" Border="true" BodyStyle="color:red"/>
        </Items>
        <Tools>
            <ext:Tool Type="Help" ToolTip="幫助" />
            <ext:Tool Type="Gear" ToolTip="設置" />
        </Tools>
    </ext:Panel>
</body>
</html>