ExtJs+MonoRail 使用XML传递数据
看了园子里的朋友介绍使用ExtJs，觉得很漂亮，也试用了一下，把发现的问题及其解决方法记录下来，以备忘。
1. 使用XML传递数据
园子里很多朋友的介绍到Ext的Grid时，多是使用JSON方式来传递数据，其中使用了WCF或是LINQ等.Net3.5中的技术，其实如果使用.Net2.0,可以使用XML传递数据。好处是可以直接使用现在的WebService,也可以方便的将DataTable，DataSet通过序列化成XML方式被ExtJs使用。
客户端代码示例：
1
var row = Ext.data.Record.create([
2 'Name', // "mapping" property not needed if it's the same as "name"
3 'Caption' ,
4 'Code'
5]);
6 // create the Data Store
7
var store = new Ext.data.Store({
8
// load using HTTP
9 url: 'FindName.rails?id=CAXU7414881',
10 // the return will be XML, so lets set up a reader
11
reader: new Ext.data.XmlReader({
12 record: 'sss'
13
}, row)
14
});
15
16 // create the grid
17 var grid = new Ext.grid.GridPanel({
18 id:'CtnPanel',
19 loadMask: true,
20 store: store,
21 columns: [
22 {header: "Name", width: 120, dataIndex: 'Name', sortable: true},
23 {header: "Caption", width: 180, dataIndex: 'Caption', sortable: true},
24 {header: "Code", width: 100, dataIndex: 'Code', sortable: true}
25 ],
26 renderTo:'SearchResult',
27 width:540,
28 height:200
29 });
30
31 store.load();
var row = Ext.data.Record.create([2
'Name', // "mapping" property not needed if it's the same as "name"3
'Caption' , 4
'Code'5
]);6
// create the Data Store7
var store = new Ext.data.Store({
8
// load using HTTP9
url: 'FindName.rails?id=CAXU7414881',10
// the return will be XML, so lets set up a reader11
reader: new Ext.data.XmlReader({
12
record: 'sss'13
}, row)14
});15
16
// create the grid17
var grid = new Ext.grid.GridPanel({18
id:'CtnPanel',19
loadMask: true,20
store: store,21
columns: [22
{header: "Name", width: 120, dataIndex: 'Name', sortable: true},23
{header: "Caption", width: 180, dataIndex: 'Caption', sortable: true},24
{header: "Code", width: 100, dataIndex: 'Code', sortable: true}25
],26
renderTo:'SearchResult',27
width:540,28
height:20029
});30
31
store.load();服务端方法直接返回XML即可，如果使用MonoRail和DataTable，也很简单：
1DataSet ds = sqlp.ExecuteDataSet(sqlp.GetSqlStringCommand(sql));
2 if (ds.Tables.Count>0)
3 {
4 ds.Tables[0].TableName = "sss";
5 System.IO.StringWriter writer = new StringWriter();
6 ds.Tables[0].WriteXml(writer,XmlWriteMode.IgnoreSchema);
7//必须加上这个，否则不能按XML返回
8 Response.ContentType= "text/xml";
9 RenderText(writer.ToString());
10 }
DataSet ds = sqlp.ExecuteDataSet(sqlp.GetSqlStringCommand(sql));2
if (ds.Tables.Count>0)3
{4
ds.Tables[0].TableName = "sss";5
System.IO.StringWriter writer = new StringWriter();6
ds.Tables[0].WriteXml(writer,XmlWriteMode.IgnoreSchema);7
//必须加上这个，否则不能按XML返回8
Response.ContentType= "text/xml";9
RenderText(writer.ToString());10
}2. 字体和样式
ExtJs提供的CSS中，大多使用了11px字体大小，这样显示中文不好看，我把所有ext_all.css中的11px都改成9pt，似乎没有问题。
ExtJs的Grid样式中，对Grid的单元格使用样式
.x-grid3-row td,.x-grid3-summary-row td{line-height:13px;vertical-align:top;padding-left:1px;padding-right:1px;
-moz-user-select:none;}
这样导致Grid单元格中显示的数据不可选择，同样将他改为：-moz-user-select:normal
另外，我发现ExtJs在加载Grid的过程仍然需要到http://extjs.com/站点去获取一些资源，不知道是些什么图片，暂时还不知道怎么解决。
3. FireFox 和 IE
在ExtJs的控件在IE和Firefox的显示上也需要注意，如果定义控件使用的百分比方式，会导致两者有不同的显示结果。使用固定的宽度和高度成功的几率要高一些，不过最好是在设计的时候两个同时都看看。
