Ext.net常见问题收集

本文对Ext.NET使用中的常见问题进行收集，有新问题或补充的请在下方留言，内容随之持续更新，谢谢。需要大家的共同努力。

Ext.Net官方Demo

Ext.Net官方API

Ext.Net社区版源码下载

ExtJS官方站点包括Demo和API

Q:前台js中怎么判断GridPanel里面是否有数据?

A:

?
1
2
3
4
5
6
7
var rowsCount = gridPanel1.store.getTotalCount();
var hasData = Boolean((rowsCount) > 0);
if (!hasData)
{
    Ext.MessageBox.alert('温馨提示', '请增加明细信息!');
    return false;
}

Q:如何执行删除前确认?

A:

?
1
2
3
4
5
6
7
8
<ext:Button runat="server" ID="btnDelete" Text="删除" Icon="Delete" Disabled="true">
    <DirectEvents>
        <Click OnEvent="btnDelete_Click">
            <Confirmation ConfirmRequest="true" Message="删除后不可恢复,确定删除所选的数据吗?" Title="温馨提示" />
            <EventMask ShowMask="true" />
        </Click>
    </DirectEvents>
</ext:Button>

Q:如何后台遍历GridPanel中的数据?

A:

参见

  1. http://examples.ext.net/#/GridPanel/Selection_Models/Submitting_Values/
  2. http://examples.ext.net/#/GridPanel/Selection_Models/Row_Selection/

要点，前台提取数据，后台解析JSON字符串。

前台:

?
1
2
3
4
5
6
7
8
9
10
11
<Buttons>
            <ext:Button runat="server" Text="Submit selection">
                <DirectEvents>
                    <Click OnEvent="SubmitSelection">
                        <ExtraParams>
                            <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly : true}))" Mode="Raw" />
                        </ExtraParams>
                    </Click>
                </DirectEvents>
            </ext:Button>
        </Buttons>

后台:

?
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
protected void SubmitSelection(object sender, DirectEventArgs e)
{
    string json = e.ExtraParams["Values"];
     
    if (string.IsNullOrEmpty(json))
    {
        return;
    }
     
    //XML will be represent as
    //<records>
    //   <record><Name>Alcoa Inc</Name><Price>29.01</Price><Change>0.42</Change><PctChange>1.47</PctChange></record>
    //        ... 
    //   <record>...</record>
    //</records>
    XmlNode xml = JSON.DeserializeXmlNode("{records:{record:" + json + "}}");
 
    foreach (XmlNode row in xml.SelectNodes("records/record"))
    {
        string name = row.SelectSingleNode("Name").InnerXml;
        string price = row.SelectSingleNode("Price").InnerXml;
        string change = row.SelectSingleNode("Change").InnerXml;
        string pctChange = row.SelectSingleNode("PctChange").InnerXml;
         
        //handle values
    }
     
    List<Company> companies = JSON.Deserialize<List<Company>>(json);
 
    foreach (Company company in companies)
    {
        string name = company.Name;
        double price = company.Price;
        double change = company.Change;
        double pctChange = company.PctChange;
 
        //handle values
    }
     
    Dictionary<string, string>[] companies1 = JSON.Deserialize<Dictionary<string, string>[]>(json);
 
    foreach (Dictionary<string, string> row in companies1)
    {
        string name = row["Name"];
        string price = row["Price"];
        string change = row["Change"];
        string pctChange = row["PctChange"];
 
        //handle values
    }
     
    this.ResourceManager1.AddScript("Ext.Msg.alert('Submitted', 'Please see source code how to handle submitted data');");
}
?
1
  

Q: GridPanel怎么实现服务器端分页、排序、查询?

A:

学习分页之前不得不提的是Ext.Net提供的一个很有用的集合类Ext.Net.Paging<T> 类,有兴趣的可以去看看API 或 下载源码看看。

以下是官方给出的各种服务器端分页方式:

  1. HttpHandler


    采用XML为数据，以Store的HttpProxy实现服务器端数据查询、分页及排序，与服务器GET方法交互，服务器返回Ext.Net.Paging<T>实例的JSON串;

    <Proxy>
    <ext:HttpProxy Method="GET" Url="http://www.cnblogs.com/Shared/PlantHandler.ashx" />
</Proxy>

  2. JSON WebService


    采用XML为数据，以Store的HttpProxy调用远端公开的WebService方法实现远端数据查询、分页及排序，与服务器POST方法交互，服务器返回Ext.Net.Paging实例;

  3. local paging


    官方Demo上面列出了本地分页的优势:

    A.本地分页(PS:这也是个优势); 
    B.可以使用一次请求提交GridPanel的所有页的数据; 
    C.如果你在GridPanel的多个页上编辑数据，可以在一次请求时保存，且在多页之间切换时不会丢失编辑的数据； 
    D.在所有页面获取用户选择的数据; 
    E.Navigate on page by record(PS:我的理解是，当选择某条记录时，可自动跳转到某页,待修正). 

  4. Local Paging for Remote Data


    这是本地分页与远端分页的组合产物，思路很强大，值得借鉴;

  5. Multiple Sorting


    多条件排序的一个Demo，值得一提的是，本例用了ToolbarDroppable插件，实现了将任意列头移动至排序栏(试试将Name列拖动至上方工具栏中Cool:)!)

  6. With ObjectDataSource


    本例用ObjectDataSource为Store提供数据，服务器端分页、查询、排序，DAO采用Linq to sql ，采用最新的Entity Framework或许会更好:)

  7. XML WebService


    调用WebService公开的方法实现服务器端数据查询、分页及排序，前面几个都认真看了的话，此处可跳过。

  8. 一个相对完整的服务器端分页Demo

  9. 群友提供的一个服务器端分页Demo

    使用数据库中储存过程的方式与GridPanel配合完成，每次访问仅读出分页的数据。by-无情,QQ:873***901

    A.前端aspx文件

    i.store定义
    <ext:Store ID="StoreQGD" runat="server" AutoLoad="true" RemoteSort="true" OnRefreshData="StoreQGD_Refresh">
    <reader>
    <ext:JsonReader IDProperty="mKey">
        <Fields>
            <ext:RecordField Name="mKey"  Type="Int"/>
            <ext:RecordField Name="tKey" Type="String" />
            <ext:RecordField Name="zlkey" Type="String" />
            <ext:RecordField Name="nCorr" Type="String"/>
            <ext:RecordField Name="HUID" Type="String" />
            <ext:RecordField Name="tDtm" Type="Date"  />
            <ext:RecordField Name="State" Type="String"/>
            <ext:RecordField Name="LEUID" Type="String" />
            <ext:RecordField Name="LEDtm" Type="Date" />
            <ext:RecordField Name="Remark" Type="String"/>
        </Fields>
        </ext:JsonReader>
    </reader>
    <proxy>
    <ext:PageProxy></ext:PageProxy>
    </proxy>
    <baseparams>
    <ext:Parameter Name="sort" Value="" />
    <ext:Parameter Name="dir" Value="" />
</baseparams>
    <sortinfo field="mKey" direction="DESC" />
</ext:Store>
    ii.Gridpanel定义
    <ext:GridPanel ID="GridPanelQGD" runat="server" StoreID="StoreQGD">
    <columnmodel id="ColumnModel3" runat="server">
    <Columns>
            <ext:Column Header="ID" DataIndex="mKey" Hidden="true" Align="Center"/>
            <ext:Column Header="请购单号" DataIndex="tKey" Align="Center"/>                  
            <ext:Column Header="制令号" DataIndex="zlkey" Align="Center"/>
            <ext:Column Header="所属客户" DataIndex="nCorr" Align="Center"/>
            <ext:Column Header="经手人" DataIndex="HUID" Align="Center"/>
            <ext:Column Header="生效时间" DataIndex="tDtm" Align="Center">
                <Renderer Fn="Ext.util.Format.dateRenderer('Y/m/d')" />
            </ext:Column>
            <ext:Column Header="状态" DataIndex="State" Align="Center">
                <Renderer Fn="State" />
            </ext:Column>
            <ext:Column Header="更新用户" DataIndex="LEUID" Align="Center"/>
            <ext:Column Header="更新日期" DataIndex="LEDtm" Align="Center">
                <Renderer Fn="Ext.util.Format.dateRenderer('Y/m/d')" />
            </ext:Column>
            <ext:Column Header="备注" DataIndex="Remark" Width="200" Align="Center"/>
               
        </Columns>
    </columnmodel>
    <plugins>
        <ext:GridFilters runat="server" ID="GridFilters3" Local="false">
            <Filters>
                <ext:NumericFilter DataIndex="mKey"/>
                <ext:StringFilter DataIndex="tKey"/>
                <ext:StringFilter DataIndex="zlkey"/>
                <ext:StringFilter DataIndex="nCorr" />
                <ext:StringFilter DataIndex="HUID" />
                <ext:DateFilter DataIndex="tDtm">
                        <DatePickerOptions runat="server" TodayText="Now"/>
                </ext:DateFilter>
                <ext:ListFilter DataIndex="State" Options="作废,待审核,已审核,记账,结案"/>
                <ext:StringFilter DataIndex="LEUID"/>
                <ext:DateFilter DataIndex="LEDtm">
                    <DatePickerOptions runat="server" TodayText="Now"/>
                </ext:DateFilter>
                <ext:StringFilter DataIndex="Remark" />

                </Filters>
            </ext:GridFilters>
    </plugins>
    <loadmask showmask="true" />
    <selectionmodel>
    <ext:RowSelectionModel ID="RowSelectionModel2" runat="server">
    </ext:RowSelectionModel>
    </selectionmodel>
    <bottombar>
        <ext:PagingToolbar 
            ID="PgbQGD" 
            runat="server" 
            PageSize="10" 
            StoreID="StoreQGD"> 
</ext:PagingToolbar>        
    </bottombar>
</ext:GridPanel>

    B.后端aspx.cs文件

    protected void StoreQGD_Refresh(object sender, StoreRefreshDataEventArgs e)
{
    string conditions = e.Parameters[GridFilters3.ParamPrefix];//GridFilters3是GridFilters是id
    int Pagesize = PgbQGD.PageSize;
    int Currentpage = e.Start / Pagesize + 1;
    int count = 0;
    string fldName = e.Parameters["sort"];
    string OrderType = e.Parameters["dir"];
    if (!string.IsNullOrEmpty(conditions))
    {
        string m = MyBean.Sql.DataQuery.GetConditonSQL(conditions);//过滤条件
        DataTable dt = MyBean.Sql.DataQuery.Pagination("View_Web_QGD", m, fldName, Currentpage, Pagesize, OrderType, out count);
        e.Total = count;
        this.StoreQGD.DataSource = dt;
        this.StoreQGD.DataBind();
    }
    else
    {
        DataTable dt = MyBean.Sql.DataQuery.Pagination("View_Web_QGD", "", fldName, Currentpage, Pagesize, OrderType, out count);
        e.Total = count;
        this.StoreQGD.DataSource = dt;
        this.StoreQGD.DataBind();

    }

}


/// <summary>
/// 根据filter的条件进行过滤
/// </summary>
/// <param name="conditions"></param>
/// <returns></returns>
public static string GetConditonSQL(string conditions)
{
    string _con = "";
    if (!string.IsNullOrEmpty(conditions))
    {
        FilterConditions fc = new FilterConditions(conditions);
        foreach (FilterCondition condition in fc.Conditions)
        {
            Comparison comparison = condition.Comparison;
            string field = condition.Name;
            FilterType type = condition.FilterType;
            switch (condition.FilterType)
            {
                case FilterType.Date:
                    if (comparison.ToString() == "Lt")
                        _con += "and " + field + " < '" + condition.Value + "'";
                    else if (comparison.ToString() == "Gt")
                        _con += "and " + field + " > '" + condition.Value + "'";
                    else
                        _con += "and " + field + " = '" + condition.Value + "'";
                    break;
                case FilterType.Numeric:
                    if (comparison.ToString() == "Lt")
                        _con += "and " + field + " < '" + condition.Value + "'";
                    else if (comparison.ToString() == "Gt")
                        _con += "and " + field + " > '" + condition.Value + "'";
                    else
                        _con += "and " + field + " = '" + condition.Value + "'";
                    break;
                case FilterType.String:
                    _con += "and " + field + " like '%" + condition.Value + "%' ";
                    break;
                case FilterType.List:
                    if (condition.ValuesList[0].ToString() == "作废")
                        _con += "and " + field + " = ' 5 '";
                    else if (condition.ValuesList[0].ToString() == "待审核")
                        _con += "and " + field + " = '10'";
                    else if (condition.ValuesList[0].ToString() == "已审核")
                        _con += "and " + field + " = '15'";
                    else if (condition.ValuesList[0].ToString() == "记账")
                        _con += "and " + field + " = '20'";
                    else
                        _con += "and " + field + " = '25'";
                    break;


            }


        }
        _con = _con.Substring(3);

    }
    return _con;
}

    C.存储过程SQL

    create  procedure [dbo].[fnWebPage]
(
--1,参数的括号可要可不要,有默认值的参数,在调用的时候,可以不写出来
--2,调用：
--declare @i int
--exec fnWebPage 'list','id,title','id',3,4,1,'classid=6',@i out
@tblName      varchar(100),       -- 表名
@fldCow   varchar(100)='*',   -- 要查询的列
@fldName      varchar(255),       -- 排序列
@PageSize     int ,           -- 页尺寸
@PageIndex    int = 1,            -- 页码
@OrderType   varchar(50),            -- 设置排序类型, 1则降序
@strWhere     varchar(Max) = '',  -- 查询条件 (注意: 不要加 where)
@count int  output      --输出符合条件的记录的总数
)
AS
declare @strSQL   varchar(1000);       -- 主语句
declare @strOrder varchar(500)  ;      -- 排序类型
declare @strTmp   varchar(100) ;   --临时变量
declare @endIndex int;      -- 结束的索引
declare @startIndex int;     -- 开始的索引
declare @countSql nvarchar(500);    --查询记录总数的sql
--得到索引
set @startIndex=(@PageIndex-1)*@PageSize + 1;--注意，这里要加1
set @endIndex=@PageIndex*@PageSize;
--生成排序语句
--为了多表联合查询，这里要把表名字和排序字段的［］去掉-
if @OrderType != 'ASC'
set @strOrder = ' order by ' + @fldName + ' DESC'
else
set @strOrder = ' order by ' + @fldName + ' ASC'
set @strSQL = '(select top ' + ltrim(str(@endIndex)) + ' '+@fldCow+','
+ 'row_number() over ('+ @strOrder +') as rownumber from '
+ @tblName + '' ;
set @countSql= 'select @count=count('+@fldName+') from '+ @tblName ;

if @strWhere! = ''
begin
set @strSQL =@strSQL+ ' where ('+ @strWhere + ') ';
set @countSql=@countSql + ' where ('+ @strWhere + ') ';
end
set @strSQL =@strSQL+ ') as tblTmp'
--得到记录总数
set @countSql=N'select @count=count(*) from ' + @tblName;
if @strWhere! = ''
set @countSql=@countSql+ N' where ' + @strWhere;
EXEC sp_executesql @countSql,N'@count int out',@count out
set @strSQL = 'select * from ' + @strSQL + ' where rownumber between ' + ltrim(str(@startIndex)) + ' and '
+ ltrim(str(@endIndex));
--执行主语句
set nocount on -- 防止显示有关受影响的行数的信息
exec (@strSQL)
--print @strSQL

最后奉上Ext.Net.Paging<T>源码

using System.ComponentModel;
using System.Collections.Generic;

namespace Ext.Net
{
    /// <summary>
    /// 
    /// </summary>
    [Description("")]
    public partial class Paging<T>
    {
        private List<T> data;
        private int totalRecords;

        /// <summary>
        /// 
        /// </summary>
        [Description("")]
        public Paging() { }

        /// <summary>
        /// 
        /// </summary>
        [Description("")]
        public Paging(IEnumerable<T> data, int totalRecords)
        {
            this.data = new List<T>(data);
            this.totalRecords = totalRecords;
        }

        /// <summary>
        /// 
        /// </summary>
        [Description("")]
        public List<T> Data
        {
            get { return data; }
            set { data = value; }
        }

        /// <summary>
        /// 
        /// </summary>
        [Description("")]
        public int TotalRecords
        {
            get { return totalRecords; }
            set { totalRecords = value; }
        }
    }
}

Q:EXT.NET中如何在执行完一段后台代码后，再执行一段前台js？

A:

两个静态方法:

?
1
2
3
4
5
6
7
Ext.Net.X.AddScript(string script);//script:参数为要执行的脚本
 
Ext.Net.X.AddScript(string script, params object[] params);//script:参数为要执行的脚本,params:参数;
 
Ext.Net.X.Call(string functionName);//functionName:要调用的js方法名称;
 
Ext.Net.X.Call(string functionName, params object[] params);//functionName:要调用的js方法名称;params:参数;
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/leischen/p/2617221.html