简单试用ExtJs2.0的XML Grid

ExtJS2.0的开发版本已经发布一段时间了，闲暇时间想将过去我用1.1.1版实现的Tree迁移到新版本，发现问题还真不少，虽然官方有个迁移文档说明，砍除的、重构的一大堆差异，真是懒得修

ExtJS2.0的开发版本已经发布一段时间了，闲暇时间想将过去我用1.1.1版实现的Tree迁移到新版本，发现问题还真不少，虽然官方有个迁移文档说明，砍除的、重构的一大堆差异，真是懒得修理。2.0在组件和布局上改进了不少，表格组件在这方面也有很大的改进，除了提供更人性化的排序、显示/隐藏列和列拖动外，在Cell部分也做了很大改进，值得一试。本文来自织梦

JSP代码段 本文来自织梦

<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>只读显示表格的例子(数据是XML)</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
</head>
<body>
<script>

dedecms.com

Ext.onReady(function(){ dedecms.com

    //创建一个Ext存储对象
    var store = new Ext.data.Store({
        // 使用一个URL获取数据源
        url: 'extjs2-grid1.xml', 本文来自织梦

        //映射关系
        reader: new Ext.data.XmlReader({
               record: 'Item',
               id: 'ASIN',
               totalRecords:
           }, [
               {name: 'Author', mapping: 'ItemAttributes > Author'},
               'Title', 'Manufacturer', 'ProductGroup'
           ])
    });

内容来自dedecms

    //创建一个表格对象
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "作者", width: 120, dataIndex: 'Author', sortable: true},
            {header: "标题", width: 180, dataIndex: 'Title', sortable: true},
            {header: "出版社", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {header: "分类", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],

本文来自织梦

        renderTo:'example-grid',
        width:540,
        height:200
    });
    store.load();
}); 内容来自dedecms

</script>
<br>
<h3>只读显示表格的例子(数据是XML)</h3>
<br><br>
<div id="example-grid"></div>
</body>
</html> copyright dedecms

织梦内容管理系统

extjs2-grid1.xml文件格式： dedecms.com

<?xml version="1.0" encoding="GBK"?>
<GridResponse>
    <Items>
        <Item>
            <ASIN>0446613653</ASIN>
            <ItemAttributes>
                <Author>霍斯特曼</Author>
                <Manufacturer>机械工业出版</Manufacturer>

                <ProductGroup>进阶</ProductGroup>
                <Title>JAVA2核心技术卷I</Title>
            </ItemAttributes>
        </Item>
        <Item>
            <ASIN>0446613657</ASIN>
            <ItemAttributes>
                <Author>埃克尔</Author>
                <Manufacturer>机械工业出版社</Manufacturer>

本文来自织梦

                <ProductGroup>基础</ProductGroup>
                <Title>Java编程思想（第4版）</Title>
            </ItemAttributes>
        </Item>
      </Items>
</GridResponse>

运行结果：

本文来自织梦

附件: 织梦好，好织梦

TAG: 本文来自织梦

复制地址和好友共享