Ext.js5用XML数据做的表（12）

view

/**
 * This example shows how to create a grid from XML data. The grid is stateful so you can
 * move or hide columns, reload the page, and come back to the grid in the same state you
 * left it in.
 * 如标题，现在是与XML数据合作，来看看有啥不一样的。stateful之间见过了。enableTextSelection也见过了。
 *
 * The cells are selectable due to use of the `enableTextSelection` option.
 */
Ext.define('KitchenSink.view.grid.XmlGrid', {
    extend: 'Ext.grid.Panel',
    requires: [
        'Ext.grid.column.Column',
        'KitchenSink.store.Books'
    ],
    xtype: 'xml-grid',
    store: {
        type: 'books'
    },//直接引用的仓库，换了一种方式。目前有三个使用仓库的方法了。
    stateful: true,
    collapsible: true,
    multiSelect: true,
    stateId: 'stateXmlGrid',
    height: 350,
    title: 'XML Grid',
    viewConfig: {
        enableTextSelection: true
    },

    initComponent: function () {
        var me = this;

        me.width = 650;
        me.columns = [
            {text: "Author", flex: 1, dataIndex: 'Author'},
            {text: "Title", width: 180, dataIndex: 'Title'},
            {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
            {text: "Product Group", width: 100, dataIndex: 'ProductGroup'}
        ];

        me.callParent();
//on( String eventName, Function fn, Object scope, Object options ) : Ext.dom.Element
//添加一个事件处理器(event handler)到此元素.
//参数：eventName 要处理的事件的名字
//fn 事件处理函数,接受到3个参数：evt 描述事件的EventObject对象,el 作为事件 target 的 DOM 元素. 需要注意, 如果使用事件代理(delegate) 选项,则有可能被过滤掉,o 设置到监听器 listener 的 配置选项对象
//scope 可选
//options 可选 含事件处理器配置选项的一个对象. 可以包含以下属性的任意组合:scope delegate（代理，过滤target或者查找内部元素） stopEvent(布尔) preventDefault(布尔) stopPropagation(布尔) normalized（布尔,如果设置为 false 则将浏览器事件直接传递给事件处理器函数,而不是包装后的 Ext.EventObject） target(只有事件直接发生在 target 元素上时才触发事件处理函数, 如果是从子节点冒泡而来,则不触发.)  delay(在事件触发后延迟多少个毫秒(milliseconds)以后才执行回调函数.)  single(布尔 设置为 true 则只在下一次事件触发时调用处理函数,调用完成即移除. ) buffer（num 设置以后将会在指定的毫秒数以后由 Ext.util.DelayedTask 来调度执行. 如果在此时间范围内事件再次触发, 那么旧的事件处理器不会被执行,而在其调度时间点上执行新的事件处理器.）
        this.on('afterlayout', this.loadStore, this, {
            delay: 1,
            single: true
        });
    },

    loadStore: function() {
        this.getStore().load();
    }
});

store

Ext.define('KitchenSink.store.Books', {
    extend: 'Ext.data.Store',

    alias: 'store.books',//对应store的引用
    model: 'KitchenSink.model.grid.Book'
});

model

Ext.define('KitchenSink.model.grid.Book',{
    extend: 'KitchenSink.model.Base',
    //多了一个导入
    requires: [
        'Ext.data.reader.Xml'
    ],
    proxy: {
        // load using HTTP
        type: 'ajax',
        url: 'resources/data/grid/sheldon.xml',
        // the return will be XML, so lets set up a reader
        //reader通常用于翻译数据，使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据. 一般情况下不需要直接创建一个Reader实例， 因为Reader总是和Proxy一起使用， 且其将使用Proxy的reader 配置属性配置
        reader: {
            type: 'xml',
            // records will have an "Item" tag
            //这几个属性不明白20151218
            record: 'Item',
            idProperty: 'ASIN',//idProperty作为本模型唯一的id的字段的名字。默认为'id'。
            totalRecords: '@total' //totalRecords5.0之后被移除，用total提到
        }
    },
    //fields的设置果然不一样了，与之前对比
    fields: [
        // set up the fields mapping into the xml doc
        // The first needs mapping, the others are very basic
        {name: 'Author', mapping: '@author.name'},
        'Title', 'Manufacturer', 'ProductGroup'
    ]
});