ExtJs学习笔记(3)_GridPanel[XML做数据源]

这一节，将学习到除了用JSON做GridPanel的数据源外，还可以使用XML

 

 一。静态示例

1.xml文件内容：

 

<? xml version="1.0" encoding="UTF-8" ?>
< Data >
   < Items >    
     < TotalResults > 203 </ TotalResults >
     < TotalPages > 21 </ TotalPages >
     < Item >
       < ASIN > 0446355453 </ ASIN >      
       < Author > Jimmy.Yang </ Author >
       < Manufacturer > Warner Books </ Manufacturer >
       < ProductGroup > Book </ ProductGroup >
       < Title > Master of the Game </ Title >       
     </ Item >
     < Item >
       < ASIN > 0446613657 </ ASIN >           
       < Author > Sidney Sheldon </ Author >
       < Manufacturer > Warner Books </ Manufacturer >
       < ProductGroup > Book </ ProductGroup >
       < Title > Are You Afraid of the Dark? </ Title >       
     </ Item >
  
   </ Items >
</ Data >

2.ExtJs调用页面

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />
     < link  rel ="stylesheet"  type ="text/css"  href ="../resources/css/ext-all.css"   />
      < script  type ="text/javascript"  src ="../adapter/ext/ext-base.js" ></ script >
     < script  type ="text/javascript"  src ="../ext-all.js" ></ script >  
     < title > ExtJs_Grid_Xml </ title >
</ head >
< body >

< script  type ="text/javascript" >  

    Ext.onReady( function () {
        
         var  store  =   new  Ext.data.Store({           
            url:  ' GridData.xml ' ,
            reader:  new  Ext.data.XmlReader(
                { record:  ' Item '  },                
                [ " ASIN " , " Author " ,  " Manufacturer " ,  " ProductGroup " ,  " Title " ])
        });

        
         var  grid  =   new  Ext.grid.GridPanel({
            store: store,
            columns: [
                { id:  " ASIN " , header:  " 出版号 " , width:  120 , dataIndex:  ' ASIN ' , sortable:  true  },
                { header:  " 作者 " , width:  120 , dataIndex:  ' Author ' , sortable:  true  },
                { header:  " 书名 " , width:  180 , dataIndex:  ' Title ' , sortable:  true  },
                { header:  " 制作商 " , width:  115 , dataIndex:  ' Manufacturer ' , sortable:  false  },
                { header:  " 产品组 " , width:  100 , dataIndex:  ' ProductGroup ' , sortable:  false  }],
            renderTo:  ' example-grid ' ,
            viewConfig: { columnsText:  ' 显示列 ' , sortAscText:  ' 升序 ' , sortDescText:  ' 降序 '  },
            width:  640 ,
            height:  100
        });

        store.load();
    });

</ script >

< div  id ="example-grid" ></ div >
</ body >
</ html >

 

运行效果如下图：

转载请注明来自"菩提树下的杨过" http://www.cnblogs.com/yjmyzz/archive/2008/08/28/1278949.html

 

二。结合WCF动态读取

1.WCF端关键代码
定义一个可序列化的类(当然也可以是Linq to Sql中自动生成的类，不过要手动加DataContract和DataMember标记，以满足WCF的数据契约要求)

 [DataContract]
     public   class  Book 
    {
        [DataMember]
         public   string  ISBN;

        [DataMember]
         public   string  Title;

        [DataMember]
         public   string  Author;

        [DataMember]
         public   string  Publisher;
    }

返回Xml数据的方法，注意格式要设置成WebMessageFormat.Xml

[OperationContract]
        [WebInvoke(ResponseFormat  =  WebMessageFormat.Xml, Method  =   " GET " , UriTemplate  =   " GetXmlData " )]
         public  Book[] GetXmlData() 
        {
            List < Book >  _List  =   new  List < Book > ();
            _List.Add( new  Book() { ISBN  =   " 00001 " , Title  =   " c#深入编程(第四版) " , Author  =   " Alien " , Publisher  =   " 北京出版社 "  });
            _List.Add( new  Book() { ISBN  =   " 00002 " , Title  =   " ExtJs完全教程 " , Author  =   " Mike " , Publisher  =   " 上海出版社 "  });
             return  _List.ToArray();
        }

 

2.前端ExtJs代码

< script type = " text/javascript " >  

    Ext.onReady( function () {
        
         var  store  =   new  Ext.data.Store({
        url:  ' MyService.svc/GetXmlData ' ,
            reader:  new  Ext.data.XmlReader(
                { record:  ' Book '  },
                [ " Author " ,  " ISBN " ,  " Publisher " ,  " Title " ])
        });

        
         var  grid  =   new  Ext.grid.GridPanel({
            store: store,
            columns: [
                { id:  " ISBN " , header:  " 出版号 " , width:  120 , dataIndex:  ' ISBN ' , sortable:  true  },
                { header:  " 作者 " , width:  120 , dataIndex:  ' Author ' , sortable:  true  },
                { header:  " 书名 " , width:  180 , dataIndex:  ' Title ' , sortable:  true  },
                { header:  " 出版社 " , width:  115 , dataIndex:  ' Publisher ' , sortable:  false  }],                
            renderTo:  ' example-grid ' ,
            viewConfig: { columnsText:  ' 显示列 ' , sortAscText:  ' 升序 ' , sortDescText:  ' 降序 '  },
            width:  640 ,
            height:  100
        });

        store.load();
    });

< / script>

除了把url由xxx.xml，改成了"MySerivce.svc/GetXmlData"其它的几乎没变化，运行之后，用Web Development Helper插件监测到GetXmLData返回的内容为:

 

<ArrayOfBook xmlns="http://schemas.datacontract.org/2004/07/Ajax_WCF" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
<Book>
<Author>Alien</Author>
<ISBN>00001</ISBN>
<Publisher>北京出版社</Publisher>
<Title>c#深入编程(第四版)</Title>
</Book>
<Book>
<Author>Mike</Author>
<ISBN>00002</ISBN>
<Publisher>上海出版社</Publisher>
<Title>ExtJs完全教程</Title>
</Book>
</ArrayOfBook>