Ext.Net學習筆記11：Ext.Net GridPanel的用法

GridPanel是用來顯示數據的表格，與ASP.NET中的GridView類似。

GridPanel用法

直接看代碼：

<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200">
    <Store>
        <ext:Store runat="server" ID="storeUserInfo">
            <Model>
                <ext:Model ID="UserInfoModel" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" Type="Int"></ext:ModelField>
                        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Gender" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Age" Type="Int"></ext:ModelField>
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    </Store>
    <ColumnModel>
        <Columns>
            <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column>
            <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"></ext:Column>
            <ext:Column runat="server" ID="columnGender" Width="50" Text="性別" DataIndex="Gender"></ext:Column>
            <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年齡" DataIndex="Age"></ext:NumberColumn>
        </Columns>
    </ColumnModel>
</ext:GridPanel>

在這段代碼中，有兩個重要的組成：Store和ColumnModel。

Store是我們之前已經介紹過的，它相當於一個數據倉庫，可以為我們提供要顯示的數據。至於獲取數據的方式，我們這里使用最簡單的一次家在所有數據。

ColumnModel是列模型，它表示列的顯示方式。下面來看一下它的主要屬性：

• DataIndex：要顯示的字段名，與Store中ModelField的Name相對應。
• Text：列頭（標題），相當於HeaderText
• Width：列寬，如果要想該列自動填充，則需要使用Flex屬性

我們后台的代碼如下：

protected void Page_Load(object sender, EventArgs e)
{
    BindStore();
}

public void BindStore()
{
    storeUserInfo.DataSource = UserInfo.GetData();
    storeUserInfo.DataBind();
}

在頁面加載的時候綁定數據。沒有什么新鮮的，之前的章節中已經介紹過Store綁定數據的幾種方式。

整個示例的效果如下：

Ext.Net GridPanel分頁（Paging）

我們這里讓然使用上面的Store，由於用到了分頁，所以需要給Store添加PageSize屬性：

<ext:Store runat="server" ID="storeUserInfo" PageSize="5">
    <Model>
        <ext:Model ID="UserInfoModel" runat="server" IDProperty="ID">
            <Fields>
                <ext:ModelField Name="ID" Type="Int"></ext:ModelField>
                <ext:ModelField Name="Name" Type="String"></ext:ModelField>
                <ext:ModelField Name="Gender" Type="String"></ext:ModelField>
                <ext:ModelField Name="Age" Type="Int"></ext:ModelField>
            </Fields>
        </ext:Model>
    </Model>
</ext:Store>

然后我們為GridPanel添加PagingToolBar：

<BottomBar>
    <ext:PagingToolbar runat="server" ID="gridPaging" StoreID="storeUserInfo"></ext:PagingToolbar>
</BottomBar>

這個PagingToolBar的StoreID屬性設置為GridPanel的Store，這樣就大功告成了。

Ext.Net GridPanel顯示行號

只需要修改ColumnModel，為它添加一個行號列就可以了：

<ColumnModel>
    <Columns>
        <ext:RowNumbererColumn runat="server"></ext:RowNumbererColumn>
        <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column>
        <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"></ext:Column>
        <ext:Column runat="server" ID="columnGender" Width="50" Text="性別" DataIndex="Gender"></ext:Column>
        <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年齡" DataIndex="Age"></ext:NumberColumn>
    </Columns>
</ColumnModel>

Ext.Net GridPanel 顯示選擇框（CheckBox）

Ext.Net GridPanel的選擇框列是通過SelectionModel來實現的。我們來添加一個選擇框列：

<SelectionModel>
    <ext:CheckboxSelectionModel runat="server" Mode="Simple"></ext:CheckboxSelectionModel>
</SelectionModel>

我們來看一下效果：

值得稱贊的是，在使用分頁的情況下，Ext.Net GridPanel能夠保持換頁后的選擇。

今天這篇筆記簡單的介紹了Ext.Net GridPanel的用法，更多復雜的用法將在后面的筆記中介紹。