注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Start Know

自分を信じて、自分で一定でいけます

 
 
 

日志

 
 

ext xml格式的小例子  

2009-03-26 23:28:31|  分类: Ext-Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1.XML格式

a)hello.xml

<?xml  version="1.0" encoding="UTF-8" ?>

<dataset>

  <row>

    <id>1</id>

    <name>EasyJWeb</name>

    <organization>EasyJF</organization>

    <homepage>www.easyjf.com</homepage>

  </row>

  <row>

    <id>2</id>

    <name>jfox</name>

    <organization>huihoo</organization>

    <homepage>www.huihoo.org</homepage>

  </row>

  <row>

    <id>3</id>

    <name>jdon</name>

    <organization>jdon</organization>

    <homepage>www.jdon.com</homepage>

  </row>

  <row>

    <id>4</id>

    <name>springside</name>

    <organization>springside</organization>

    <homepage>www.springside.com.cn</homepage>

  </row>

</dataset>

b).GridPanel.html

<html>

 <head>

 <meta http-equiv="Content-Type" content="text/html;charset="GB2312">

  

  <title>Extjs</title>

  <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>

  <script>

 

    Ext.onReady(function(){

        //用来定义要显示的数据

         var data = [[1,'EasyJWeb','EasyJF','www.easyjf.com'],

                [2,'jfox','huihoo','www.huihoo.org'],

                [3,'jdon','jdon','www.jdon.com'],

                [4,'springside','springside','www.springside.com.cn']];

         //用来创建一个数据存储(重要环节存储器Store用来负责把各种各样的数据转换成ExtJS 的数据记录集Record)

         var store = new  Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});

        

         //负责创建一个表格 表格 包含的列由columns配置属性来描述每一行数数据用来描述一列信息

         //表格的列信息 包含列头显示文本header

         //列对应的记录集字段 dataIndex

         //列是否可排序  sortable

         //列的渲染函数 render

         //宽度 width

         //格式化信息 format

       /*  var grid = new Ext.grid.GridPanel({

           renderTo:"hello",

           title:"中国java开源产品",

           height:150,

           width:600,

           columns:[

                {header:"项目名称",dataIndex:"name"},

                {header:"开发团队",dataIndex:"organization"},

                {header:"网址",dataIndex:"homepage"}],

           store:store,

           autoExpandColumn:2

            

         });*/

         var colM = new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},

                             {header:"开发团队",dataIndex:"organization",sortable:true},

                             {header:"网址",dataIndex:"homepage",renderer:showUrl}

                             ]);

         var  grid = new Ext.grid.GridPanel({

          

           title:"中国java开源产品",

           height:150,

           width:600,

           cm:colM,

           store:store,

           autoExpandColumn:2

         });

        

    }); 

   

   

   function showUrl(value){

     return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";

   }

   

   //xml格式

    Ext.onReady(function(){

        var store = new Ext.data.Store({

          url:"hello.xml",

          reader:new Ext.data.XmlReader({

          record:"row",id:"id"},

          ["name","organization","homepage"])

        });

          var ds = new Ext.data.Store({

                proxy: new Ext.data.HttpProxy({url: "hello.xml"}),

                reader: new Ext.data.XmlReader({record: "row", id: "id"},

                                                ['name', "organization", "homepage"])

              });

        var colM = new Ext.grid.ColumnModel([

        {header:"项目名称",dataIndex:"name",sortable:true},

        {header:"开发团队",dataIndex:"organization",sortable:true},

        {header:"网址",dataIndex:"homepage",sortable:true}]);

        var grid = new Ext.grid.GridPanel({

          renderTo:"aaa",

          title:"java开发团队",

          height:200,

          width:600,

          cm:colM,

          store:store,

          autoExpandColumn:2

        });

        store.load();

    });

        //json格式

    Ext.onReady(function(){

       var  data = [ {id:1,name:'EasyJWeb',organization:'EasyJF',homepage:'www.easyjf.com'},

              {id:2,name:'jfox',organization:'huihoo',homepage:'www.huihoo.org'},

              {id:3,name:'jdon',organization:'jdon',homepage:'www.jdon.com'},

              {id:4,name:'springside',organization:'springside',homepage:'www.springside.com.cn'}];

       

       var store = new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});

       var colM = new Ext.grid.ColumnModel([    {header:"项目名称",dataIndex:"name",sortable:true},

                             {header:"开发团队",dataIndex:"organization",sortable:true},

                             {header:"网址",dataIndex:"homepage",renderer:showUrl}

                             ]);

      var grid = new Ext.grid.GridPanel({

        renderTo:"aaa",

        title:"中国java开源产品",

        height:200,

        width:600,

        cm:colM,

        store:store,

        autoExpandColumn:2

      });                            

    });

  </script>

 </head>

 

 <body>

    <div id="aaa"/>

    

 </body>

</html>

  评论这张
 
阅读(516)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017