ext.net随笔记录

来源：伴沃教育

源于：

按控件功能来讲

最普通的BUTTON

<ext:Button runat="server" Text="Click Me" IconCls="custom-icon1" //可以自定义图标 Icon="Add"

Height="128" Width="128">

<ToolTips> \\加个提示信息

            <ext:ToolTip runat="server" Title="Title" Html="Description" />

        </ToolTips>

        <DirectEvents>

            <Click OnEvent="Button_Click">

                <EventMask ShowMask="true" />

                <ExtraParams>

                    <ext:Parameter Name="Item" Value="One" />

                </ExtraParams>

            </Click>

        </DirectEvents>

       //加个菜单

<Menu>

            <ext:Menu runat="server">

                <Items>

                 <ext:MenuItem runat="server" Text="Item 1" Icon="GroupAdd" />

                 <ext:MenuItem runat="server" Text="Item 2" Icon="GroupDelete" />

                 <ext:MenuItem runat="server" Text="Item 3" Icon="GroupEdit" />

                </Items>

            </ext:Menu>

        </Menu>

    </ext:Button>

特殊的 BUTTON

<ext:SplitButton runat="server" Text="Text">

        <Menu>

            <ext:Menu runat="server">

                <Items>

                    <ext:MenuItem runat="server" Text="Item 1" Icon="GroupAdd" />

                    <ext:MenuItem runat="server" Text="Item 2" Icon="GroupDelete" />

                    <ext:MenuItem runat="server" Text="Item 3" Icon="GroupEdit" />

                </Items>

            </ext:Menu>

        </Menu>

    </ext:SplitButton>

<ext:CycleButton runat="server" ShowText="true" PrependText="View As ">

        <Menu>

            <ext:Menu runat="server">

                <Items>

                    <ext:CheckMenuItem runat="server" Text="Text Only" Icon="Note" />

                    <ext:CheckMenuItem runat="server" Text="Html" Icon="Html" Checked="true" />

                </Items>

            </ext:Menu>

        </Menu>

    </ext:CycleButton>

<ext:ImageButton

runat="server"

Disabled="true" //是否可用

       EnableToggle="true"  //控制 选中以后的显示状态

       ToggleGroup="Group1"  //几个 按钮在一起时 还可以分在一组，选中的只有一个.  这个 不需要 EnableToggle属性

ImageUrl="button.gif"

OverImageUrl="overButton.gif"

DisabledImageUrl="disabled.gif"

PressedImageUrl="pressed.gif">

</DirectEvents>

<Menu>  //还可以加下拉菜单

            <ext:Menu runat="server">

                <Items>

                    <ext:MenuItem runat="server" Text="Add" Icon="Add" />

                    <ext:MenuItem runat="server" Text="Accept" Icon="Accept" />

                </Items>

            </ext:Menu>

        </Menu>

</ext:ImageButton>

<script runat="server">

    protected void Button_Click(object sender, DirectEventArgs e)

        X.Msg.Alert("Server Time", DateTime.Now.ToLongTimeString()).Show();

</script>

LinkButton 说明：

跟ImageButton类似 也可以带菜单、分组

<ext:LinkButton runat="server" Icon="Accept" Text="Click">

        <DirectEvents>

            <Click OnEvent="Button_Click" />

        </DirectEvents>

    </ext:LinkButton>

有了这些按钮做工具栏菜单的功能按钮是不是容易一些呢？

来看一下DataView的强大功能，主要是查看功能。

定义一个数据源

<ext:Store runat="server" ID="Store1">

            <Reader>

                <ext:JsonReader IDProperty="name">

                    <Fields>

                        <ext:RecordField Name="name" />

                        <ext:RecordField Name="url" />

                        <ext:RecordField Name="size" Type="Int" />

                        <ext:RecordField Name="lastmod" Type="Date" />

                    </Fields>

                </ext:JsonReader>

            </Reader>

<AutoLoadParams> //是不是分页时候用

                <ext:Parameter Name="start" Value="0" Mode="Raw" />

                <ext:Parameter Name="limit" Value="5" Mode="Raw" />

            </AutoLoadParams>

        </ext:Store>

数据源数据绑定:

this.Store1.DataSource = GetJsonData();

                this.Store1.DataBind();

   <ext:Panel

            runat="server"

            ID="ImagePanel"

            Cls="images-view"

            Frame="true"

            AutoHeight="true"

            Width="535"

            Collapsible="true"

            Layout="Fit"

            Title="Simple DataView (0 items selected)">

            <Items>

<ext:DataView ID="ImageView" runat="server"

                    StoreID="Store1"

                    AutoHeight="true"

                    MultiSelect="true"

                    OverClass="x-view-over"

                    ItemSelector="div.thumb-wrap"

                    EmptyText="No images to display">

                    <Template runat="server">

                        <Html>

                          <tpl for=".">

                          <div class="thumb-wrap" id="{name}">

                          <div class="thumb"><img src="{url}" title="{name}"></div>

                          <span class="x-editable">{shortName}</span>

                          </div>

                          </tpl>

                          <div class="x-clear"></div>

                          </Html>

                    </Template>

                    <PrepareData Fn="prepareData" />

                    <Listeners>

                        <SelectionChange Fn="selectionChaged" />

                    </Listeners>

                    <Plugins>

<ext:GenericPlugin runat="server" InstanceName="Ext.DataView.DragSelector" />

                    </Plugins>

                </ext:DataView>

</Items>

            <BottomBar>

//分页的数据源 StoreID PageSize 为分页大小

<ext:PagingToolbar runat="server" StoreID="Store1" PageSize="5" HideRefresh="true" />

            </BottomBar>

        </ext:Panel>

//准备数据

    <script type="text/javascript">

        var prepareData = function (data) {

            data.shortName = Ext.util.Format.ellipsis(data.name, 15);

            data.sizeString = Ext.util.Format.fileSize(data.size);

            data.dateString = data.lastmod.format("m/d/Y g:i a");

            return data;

};

        var selectionChaged = function (dv,nodes) {

        var l = nodes.length;

        var s = l != 1 ? 's' : '';

        ImagePanel.setTitle('Simple DataView (' + l + ' item' + s + ' selected)');

};

    </script>

Grouping DataView Example

可以参考做内部导航图标。

开始一下这种桌面的界面。

<ext:Desktop

ID="MyDesktop"

runat="server"

BackgroundColor="Black"

ShortcutTextColor="White"

Wallpaper="desktop.jpg"> //背景图片

<%-- NOTE: Body Controls must be added to a container with position:absolute --%>

//在这个里面可以加PANEL

</Content>

<ext:DesktopModule ModuleID="DesktopModule1" WindowID="winCustomer" AutoRun="true">

</ext:DesktopModule>

<ext:DesktopModule ModuleID="DesktopModule2" WindowID="winCompany" AutoRun="true">

</ext:DesktopModule>

<ext:DesktopModule ModuleID="DesktopModule3" WindowID="winBrowser">

</ext:DesktopModule>

</Modules>

<ext:DesktopShortcut ModuleID="DesktopModule1" Text="Add Customer" IconCls="shortcut-icon icon-user48" />

<ext:DesktopShortcut ModuleID="DesktopModule2" Text="Company Info" IconCls="shortcut-icon icon-grid48" />

<ext:DesktopShortcut ShortcutID="scTile" Text="Tile windows" IconCls="shortcut-icon icon-window48" X="{DX}-90" Y="{DY}-90" />

<ext:DesktopShortcut ShortcutID="scCascade" Text="Cascade windows" IconCls="shortcut-icon icon-window48" X="{DX}-90" Y="{DY}-170" />

</Shortcuts>

</Listeners>

//定义开始菜单

// 系统设置与注销用户

<ext:MenuItem Text="Settings" Icon="Wrench">

</Listeners>

</ext:MenuItem>

<ext:MenuItem Text="Logout" Icon="Disconnect">

</Click>

</DirectEvents>

</ext:MenuItem>

<ext:MenuSeparator />

<ext:ComponentMenuItem runat="server" Shift="false">

<ext:GridPanel ID="QuickSearchGrid" runat="server" Width="210" Height="275" StoreID="QuickSearchStore" AutoExpandColumn="SearchItem">

<ext:CommandColumn Width="30">

<ext:GridCommand Icon="Note" />

</Commands>

</ext:CommandColumn>

<ext:Column ColumnID="SearchItem" Header="SearchItem" DataIndex="SearchItem" />

</Columns>

</ColumnModel>

<ext:RowSelectionModel runat="server" SingleSelect="true" />

</SelectionModel>

</ext:GridPanel>

</Component>

</ext:ComponentMenuItem>

<ext:ComponentMenuItem runat="server" Target="#{QuickSearchFilter}" Shift="false" ComponentElement="Wrap">

<ext:TriggerField ID="QuickSearchFilter" runat="server" Width="210">

<ext:FieldTrigger Icon="Search" />

<ext:FieldTrigger Icon="Clear" HideTrigger="true" />

</Triggers>

</Listeners>

</ext:TriggerField>

</Component>

</ext:ComponentMenuItem>

</ToolItems>

//这是一块内容

<Items>

// 所有显示

<ext:MenuItem ID="MenuItem1" runat="server" Text="All" Icon="Folder" HideOnClick="false">

<Menu>

<ext:Menu ID="Menu1" runat="server">

<Items>

<ext:MenuItem Text="Add Customer" Icon="Add">

</Listeners>

</ext:MenuItem>

</Items>

</ext:Menu>

</Menu>

</ext:MenuItem>

<ext:MenuSeparator />

</Items>

</StartMenu>

</ext:Desktop>

最核心的二个 Form 与 GridPanel

先看 ArrayGrid

注意了没有 <Store> 在<ext:GridPanel></ext:GridPanel> 里面，所以用GridPanel1.GetStore()得到数据源，然后再绑定数据

如果<ext:GridPanel>中 <ext:Store runat="server" ID=”定义ID”> </ ext:Store >

   private void BindData()

        var store = this.GridPanel1.GetStore();

        store.DataSource = this.Data;

        store.DataBind();

    <ext:GridPanel

            ID="GridPanel1"

            runat="server"

            StripeRows="true"

            Title="Array Grid"

            Width="600"

            Height="290"

            AutoExpandColumn="Company">

           //定义数据源

            <Store>

                <ext:Store runat="server" OnRefreshData="MyData_Refresh">

                    // 还可以 指定请求的方式

<Proxy>

                        <ext:HttpProxy Method="POST" Url="http://www.cnblogs.com/Shared/PlantService.asmx/Plants" />

                    </Proxy>

                    <Reader>

                        <ext:ArrayReader>

                            <Fields>

                                <ext:RecordField Name="company" />

                                <ext:RecordField Name="price" Type="Float" />

                                <ext:RecordField Name="change" Type="Float" />

                                <ext:RecordField Name="pctChange" Type="Float" />

                                <ext:RecordField Name="lastChange" Type="Date" />

                            </Fields>

                        </ext:ArrayReader>

                    </Reader>

                   //指定排列的信息

                   <SortInfo Field="Common" Direction="ASC" />

                </ext:Store>

            </Store>

            //定义数据列

            <ColumnModel runat="server">

                <Columns>

                    <ext:RowNumbererColumn />

                    <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />

                    <ext:Column Header="Price" Width="75" DataIndex="price">

                        <Renderer Format="UsMoney" />

                    </ext:Column>

                    <ext:Column Header="Change" Width="75" DataIndex="change">

                        <Renderer Fn="change" /> //函数的调用

                        // 还可以 在数据列中 添加 命令

<Commands>

                            <ext:ImageCommand CommandName="Edit" Icon="NoteEdit" Text="Edit">

                                <ToolTip Text="Edit" />

                            </ext:ImageCommand>

                        </Commands>

                    </ext:Column>

                    <ext:Column Header="Change" Width="75" DataIndex="pctChange">

                        <Renderer Fn="pctChange" />

                    </ext:Column>

                    <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />

                </Columns>

            </ColumnModel>

            <SelectionModel> //行选择模式

                <ext:RowSelectionModel runat="server" />

            </SelectionModel>

            <LoadMask ShowMask="true" />

            //添加 事件的处理

<Listeners>

                <Command Handler="Ext.Msg.alert('Command', 'Command = '+ command + '<br/>'+ 'Column = ' + this.getColumnModel().getDataIndex(colIndex));" />

            </Listeners>

// 分页按钮与功能

            <BottomBar>

                 <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10">

                    <Items>

                        <ext:Label runat="server" Text="Page size:" />

                        <ext:ToolbarSpacer runat="server" Width="10" />

                        <ext:ComboBox runat="server" Width="80">

                            <Items>

                                <ext:ListItem Text="1" />

                                <ext:ListItem Text="2" />

                                <ext:ListItem Text="10" />

                                <ext:ListItem Text="20" />

                            </Items>

                            <SelectedItem Value="10" />

                            <Listeners>

                                <Select Handler="#{PagingToolbar1}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.doLoad();" />

                            </Listeners>

                        </ext:ComboBox>

                    </Items>

                </ext:PagingToolbar>

            </BottomBar>

        </ext:GridPanel>

二种Details 展示方式

转载于:https://www.cnblogs.com/chenqw/archive/2012/03/06/2381370.html

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文