现在大多数使用Extjs的程序都使用Java来编写后台服务器程序,下面简单介绍一下如何使用Asp.net来编写后台服务器程序.
使用Asp.net编写Extjs的后台服务器程序大概有下面几种方式:
1.使用 .net Framework 3.5中的WCF来实现,因为.net 3.5 中的WCF 中新增加了一个Attributes来支持这种方式,但是具体没有使用过,有兴趣的朋友可以关注一下.
2.在Asp.net中定义一个.aspx页面,然后在aspx.cs中文件中添加一个方法来相应Extjs的web 请求,具体方式如下:
2.1:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ExtJsRequest();
}
}
public string ExtJsRequest()
{
string sRtn = string.Empty;
string sReq = Request["req"].ToString();
sRtn = "{'success':true,'Message':" + sReq + "}";
return sRtn;
}
}
这种方法使用起来比较简单,但是会在Server 端生成很多不需要的aspx页面,基本上每定义一个方法就需要在服务端定义一个页面,不利于代码的维护.
3:借鉴Java 中的Servlet原理,将Extjs的请求分流到Server端具体的类中去,避免了不需要的aspx页面的生成,具体的实现如下:
3.1:在Server端实现一个继承IHttpHandler接口的类,在其中实现对Extjs请求的分流.
public class Servlet : System.Web.IHttpHandler
{
public DataSet ds;
public Servlet()
{
ds = new DataSet();
string path = HttpContext.Current.Server.MapPath("../Config.xml");
ds.ReadXml(path);
}
public void ProcessRequest(HttpContext ctx)
{
try
{
string name = ctx.Request.Url.AbsolutePath;
name = name.Substring(0, name.IndexOf('.'));
DataRow[] dc = ds.Tables[0].Select("url ='" + name + "'");
if (dc.Length > 0)
{
Type ht = Type.GetType(dc[0]["Class"].ToString());
object obj = Activator.CreateInstance(ht);
MethodInfo mi = ht.GetMethod(dc[0]["function"].ToString());
object objRtn = mi.Invoke(obj, new object[] { ctx.Request });
ctx.Response.Write(objRtn as string);
}
}
catch (Exception ex)
{
throw ex;
}
}
public bool IsReusable
{
get
{
return true;
}
}
}
代码中标记为黄色的部分是一个自定义的配置文件格式.
3.2 :自定义配置文件
<?xml version="1.0" encoding="utf-8" ?>
<ConfigNode>
<Mapping url="/YouProject/User/List" Class="WebUI.Bll.User" Function="List"></Mapping>
</ConfigNode>
配置文件中相关属性介绍:
URL:请求ExtJs的请求地址;
Class:该请求分流到的Server端具体的类;
Function:Server具体类中的对应Extjs请求的方法;
标记为红色的代码是使用反射来定位到Server端具体类的具体方法;
3.3:定义相关实体类
WebUI.Bll.User 定义如下:
namespace WebUI.Bll
{
public class User
{
public string List(HttpRequest request)
{
...具体逻辑
}
}
}
需要注意的是:
1.WebUI.Bll.User 的方法必须定义为public;
2.List 方法必须带一个HttpRequest的参数,因为要获取相应的Extjs的请求参数;
3.4:在WebConfig 进行配置
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="/YouProject/login.aspx" type="System.Web.UI.PageHandlerFactory"/> ---不拦截
<add verb="*" path="*.aspx" type="Servlet"/> ---使用自定义的Httphander 来进行处理
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
因为Asp.net会对.aspx页面使用默认的HttpHandler来进行拦截:System.Web.UI.PageHandlerFactory,所以如果在你的程序中你有的页面不想拦截比如:login.aspx,logout.aspx,Index.aspx ,那你可以在<httpHandler>配置节中进行配置。
通过第3种方法,在Server 端可以很好的组织代码,并且无需增加不必要的.aspx页面,可以将实体类定义到 Bussiness Layer 中,符合三层架构.
由于公司需要使用Extjs来做一个项目,所以花点时间研究了一下Ext。
该项目基于.net2.0+Extjs来实现,具体的架构以后会慢慢贴出,这里只是简单介绍一下Ext.data库中几个常用的类的实现原理和使用.
Ext.data 库主要包括以下几个类：
Ext.data.Store ==>DataSet
Ext.data.Record ==>DataSet.Row
Ext.data.DataProxy ==>SqlConnection
Ext.data.DataReader ==>SqlDataAdapter
以下分别进行介绍:
1.Ext.data.Record
可以用来定义一行数据的格式,它有几个重要的属性和方法:
data:实际的数据
modified:如果dirty==true 这modified中存放的是修改前的数据否则为空
e.g:
if(dirty){var a = modified['Name']};
构造函数：
Record( Array data, [Object id] )
e.g:
var a = new Ext.data.Record([
{name:'Name'},
{name:'Address'}
],{id:'Name'}) ;
其中第2个参数可以不写
等价于
var a = Ext.data.Record.create([
{name:'Name'},
{name:'Address'}
],{id:'Name'}) ;
生成一行实际数据
var record = new a({
Name:'test',
Address:'where'
});
Ext.Msg.alert('test',record.get('Name')) 输出:'test'
Ext.Msg.alert('test',record.data.Name)输出:'test'
定义好行的格式之后我们就可以生成DataProxy去获取数据
DataProxy 分为3种,我们主要使用其中的2种MemoryProxy 和HttpProxy,其中最重要的方法:
load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void
MemoryProxy( Object data )
e.g:
MemoryProxy只可以识别数据对象的数据格式如下:
var data = [['tt','shenzhen'],['tt2','shenzhen']];
定义reader 可以又多种方法:
1.var reader = new Ext.data.ArrayReader({id:'Name'},r);
2.var reader = new Ext.data.ArrayReader({id:'Name',fields:['Name','Address']});
一般使用第2种方法,因为代码量少
DataReader ,ArrayReader ,JsonReader 的继承关系如下:
JsonReader 继承DataReader ,ArrayReader 继承JsonReader ,ArrayReader 于JsonReader 唯一的区别就是readRecords方法的实现不一样;
下面就着源码讲解一下为什么DataReader 可以用多种方法去生成
DataReader:
Ext.data.DataReader = function(meta, recordType){
/**
* This DataReader's configured metadata as passed to the constructor.
* @type Mixed
* @property meta
*/
this.meta = meta;
this.recordType = Ext.isArray(recordType) ?
Ext.data.Record.create(recordType) : recordType;
};
---------------------------------------------------------
JsonReader:
Ext.data.JsonReader = function(meta, recordType){
meta = meta || {};
Ext.data.JsonReader.superclass.constructor.call(this, meta, recordType || meta.fields);
};
JsonReader 的构造函数中调用了DataReader的构造函数就是我用黄颜色标记的地方,如果JsonReader 的Config对象中提供了fields属性则调用的方法如下:
DataReader(meta,meta.fields);
否则就只能只用使用原来Ext.data.Record.create()生成的对象去初始化DataReader(meta,r.prototype.fields);
var proxy = new Ext.data.MemoryProxy(data);
proxy.load(null,reader,callback,this,{req:'123'});
function callback(Records,arg,bFlag){alert(Records.records[0].get('Name'))} 输出:'tt';
proxy的load 方法中调用了reader.readerRecords(data)来读取数据 结果就是callback函数中的Records{records:[],recordsCount}:records为读出的数据的数据对象,recordsCount表示记录的行数;
当然也可以生成一个JsonReader 对象来读取数据
e.g:
var jsonReader = new Ext.data.JsonReader({
id:'Name',
root:'data',
totalProperty:'totalCount',
fields:['Name','Address']
});
var jsonData = {
'totalCount':2,
'data':[
{'Name':'tt','Address':'shenzhen'},
{'Name':'tt1','Address':'shenzhen'}
]
};
var proxy = new Ext.data.MemoryProxy(jsonData);
proxy.load(null,reader,callback,this,{req:'123'});
function callback(Records,arg,bFlag){alert(Records.records[0].get('Name'))} 输出:'tt';
Ext.data库中最重要的就是Ext.data.Store ,它可以为Ext.grid.GridPanel ,Ext.form.Combox ...提供数据源
有2种Store都继承自Ext.data.Store:Ext.data.JsonStore 和Ext.data.SimpleStore
Ext.data.JsonReader 对应 Ext.data.JsonReader ;Ext.data.SimpleStore 对应 Ext.data.ArrayReader
Ext.data.Store的主要Config属性有:
url:请求数据的Url地址;
data:直接提供的数据源;
proxy:Ext.data.DataProxy(从哪里取数据);
reader:Ext.data.DataReader(取什么样的数据);
baseParams:请求时要附加的参数:{req:'123'};
以上的配置属性之间有一些联系,主要表现在url和proxy上面
现在讲解一下store中各个对象的生成关系和顺序:
1.初始化baseParams:{start:,limit:sort:dir:}
2.判断有没有直接传入数据集合==>config.data==null ;this.inlineData = data;
3.config.url !=null 同时config.proxy没有数值
就用config 的url直接生成一个this.proxy=HttpProxy();
this.proxy在后面的load()函数中会使用到，这就是为什么有时我们在配置store的时候提供了config.data 和config.reader,而没有提供config.proxy就会报错的原因
因为在load()函数中会调用Ext.data.DataProxy.load()方法
4.判断是否提供了config.reader,生成this.recordType 和this.fields
JsonStore 的构造函数源码如下:
Ext.data.JsonStore = function(c){
/**
* @cfg {Ext.data.DataReader} reader @hide
*/
/**
* @cfg {Ext.data.DataProxy} proxy @hide
*/
Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(c, {
proxy: c.proxy || (!c.data ? new Ext.data.HttpProxy({url: c.url}) : undefined),
reader: new Ext.data.JsonReader(c, c.fields)
}));
};
生成原理：
1.调用Ext.data.Store的构造函数,其中我标为黄色的语句表达的意思就是:如果提供了proxy配置属性就使用当前配置的Proxy去获取数据,没有提供则判断是否有直接数据源提供,没有则用
url配置属性去生成一个HttpProxy去获取数据,绿色语句是生成Ext.data.DataReader对象,在Store 的Load()方法会使用他去读取数据;
在这里顺便介绍一下在源码中使用最多的一种语句 (c = a||b )== (c=a==undefinde ? b:a)
---------------------------------------------------------------------
SimpleStore 的构造函数源码如下:
Ext.data.SimpleStore = function(config){
Ext.data.SimpleStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new Ext.data.ArrayReader({
id: config.id
},
Ext.data.Record.create(config.fields)
)
}));
};
SimpleStore的生成原理与JsonStore大体一致,
在以上的2段代码中都要注意到的是config.fields配置属性,他们都被用来去生成Ext.data.Record对象;
现在举几个生成Store对象的例子
1.
var data =[['tt','shenzhen'],['tt2','shenzhen']];
var store = new Ext.data.SimpleStore({
data:data,
fields:['Name','Address']
});
2.
var jsonData = {
'totalCount':2,
'data':[
{'Name':'tt','Address':'shenzhen'},
{'Name':'tt1','Address':'shenzhen'}
]
};
var store = new Ext.data.JsonStore({
data:jsonData ,
fields:['Name','Address'],
id:'Name',
root:'data',
totalProperty:'totalCount'
});
3.
var store = new Ext.data.JsonStore({
URL：
fields:['Name','Address'],
id:'Name',
root:'data',
totalProperty:'totalCount'
});
其中以第3中方法使用最为广泛.
写了这么多,写的很乱,希望对大家有所帮助!