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();

服务端方法直接返回XML即可，如果使用MonoRail和DataTable，也很简单：

 1 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的显示上也需要注意，如果定义控件使用的百分比方式，会导致两者有不同的显示结果。使用固定的宽度和高度成功的几率要高一些，不过最好是在设计的时候两个同时都看看。