ExtJs 读取 Xml 数据

ExtJs 中使用 GridPanel 读取 Xml 文件时,如何配置 Store 的 URL属性,以及 Xml 文件的存放位置(asp.net版)。

 

/*
 * 官方示例代码

 */
Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.Store({
       /* load using HTTP,注意这里的URL属性

          在通过IIS或Tomcat运行程序时,Xml文件应保证与HTML页面文件在同一文件夹内

          或者确实采用远程访问方式,本地没有Xml文件,URL属性为:'http://extjs.com/deploy/dev/examples/grid/sheldon.xml'

      */
        url: 'sheldon.xml',

       // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
              // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Author', mapping: 'ItemAttributes > Author'},
               'Title', 'Manufacturer', 'ProductGroup'
           ])
    });

   // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
            {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],
        renderTo:'example-grid',
        width:540,
        height:200
    });

    store.load();
});

 

/*
 * 个人代码

 * 将grid显示在TabPanel中

 */

Ext.onReady(function westPanel() {
            var store = new Ext.data.Store({
                url: 'ExcellentStaffList.xml',
                reader: new Ext.data.XmlReader({
                    record: 'StaffInfo',
                    id: 'ID',
                    totalRecords: 'Results'
                }, [
                    'Name','Position'

                ])
            });
            store.load();

            var wpanel = new Ext.TabPanel({
                renderTo: 'wPanel',
                activeTab: 0,
                width: 200,
                items: [{
                    title: '优秀员工',
                    xtype: 'grid',
                    frame: true,
                    autoHeight: true,
                    store: store,
                    autoExparidColumn: 'Name',
                    columns: [
                        { header: "姓名", dataIndex: 'Name' },
                        { header: "职位", dataIndex: 'Position' }
                    ]
                }, {
                    title: '部门奖励',
                    html: '<img src="../Image/badge.jpg" height=100>'

                }]
            });
        });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值