Ext.js5属性表格（更新数据）（handler和listener的区别）（蓝色的时候是蓝色的combo）（source）(19)

/**
 * This example shows how to create a property grid from an object. It also demonstrates
 * updating the grid with new values and also a whole new dataset.
 * 这个例子展示了如何通过一个对象创建一个属性表格。同时也演示了怎么更新表格数据。
 */
Ext.define('KitchenSink.view.grid.PropertyGrid', {
    extend: 'Ext.container.Container',

    width: 350,

    initComponent: function(){
        Ext.apply(this, {
            items: [{
                xtype: 'container',
                layout: 'hbox',
                margin: '0 0 10 0',
                defaultType: 'button',
                items: [{
                    text: 'Update source',
                    scope: this,
                    handler: this.onUpdateSourceClick
                }, {
                    text: 'New data source',
                    margin: '0 0 0 10',
                    scope: this,
                    handler: this.onNewSourceClick
                }]
            }, {
                xtype: 'propertygrid',
                //指定名称列的宽度，值列将会取得所有的剩余空间。默认值为115。
                nameColumnWidth: 165,
                //见下文描述
                source: {
                    '(name)': 'Properties Grid',
                    grouping: false,
                    autoFitColumns: true,
                    productionQuality: false,
                    created: Ext.Date.parse('10/15/2006', 'm/d/Y'),
                    tested: false,
                    version: 0.01,
                    borderWidth: 1
                },
                //文后给出
                sourceConfig: {
                    borderWidth: {
                        displayName: 'Border Width'
                    },
                    tested: {
                        displayName: 'QA'
                    }
                }
            }]
        });
        this.callParent();
    },

    onUpdateSourceClick: function(){
        var grid = this.down('propertygrid');

        grid.setSource(this.source);    
    },

    onNewSourceClick: function(){
        var grid = this.down('propertygrid');

        grid.setSource.apply(grid, this.alternateSource);
    }
}, function() {
    this.prototype.source = {
        '(name)': 'Property Grid',
        grouping: false,
        autoFitColumns: true,
        productionQuality: true,
        created: new Date(),
        tested: false,
        version: 0.8,
        borderWidth: 2
    };

    this.prototype.alternateSource = [{
        firstName: 'Mike',
        lastName: 'Bray',
        dob: new Date(1986, 3, 15),
        color: 'Red',
        score: null
    }, {
        firstName: {
            displayName: 'First Name'
        },
        lastName: {
            displayName: 'Last Name'
        },
        dob: {
            displayName: 'D.O.B'
        },
        color: {
            displayName: 'Color',
            editor: {
                xtype: 'combobox',
                store: ['Red', 'Green', 'Blue'],
                //forceSelection 值为true时，所选择的值限制在一个列表中的值，false时，允许用户设置任意的文本字段
                forceSelection: true,
                allowBlank: false
            },
            renderer: function(v){
                v = v || '';

                var lower = v.toLowerCase();
                return Ext.String.format('<span style="color: {0};">{1}</span>', lower, v);
            }
        }, 
        score: {
            displayName: 'Score',
            type: 'number'
        }
    }];
});

handler和listener的区别内容来源于smilingleo的博客
地址：http://blog.csdn.net/smilingleo/article/details/3733177
Handler
handler和Action相关联，一个Action可以有很多个组件引用；
Action是一个可被共享的对象，有五个主要的属性：text,handler,iconCls,disabled,hidden
以Button为例，文档中说按钮中的handler是与click事件关联的。也就是说，click是Button组件的首要事件。因此Handler的运行方式：被组件的首要Event所触发。
Listener
Ext.util.Observable是一切可进行事件监测之对象的父类（或者接口）。Observable只有一个配置项，那就是listeners，而一个listener是一个事件名 + 处理函数的组合，如：”click” : function(){…}, “mouseOver” : function(){….}。撇开了首要事件，可以自定义事件。
总结：
1、handler是一个特殊的listener
2、handler是一个函数，而listeners是事件+函数（成对出现）
3、handler与Action相关，用来让多个组件共享一个Action。而listener与Event相关，可以对Event进行方便的管理；
但是handler与普通的event + listener组合还是有一些不同，一个例子就是，如果用

Ext.util.Observable.capture(button, function(name){ if (name==”click”) return false})

来事先捕获click事件，并阻止click时，如果Button的click是通过handler来响应的，则capture的return false函数无效，而如果button是定义了包含click事件的listener，则上面的capture生效。

setSource(object source) 参数是数据对象
设置包含属性数据的数据源对象。 数据对象可以包含一个或多个键/值对，所有对象的属性显示在grid中， 而这个数据将被自动加载到grid的store。 如果需要的话应该提供适当的数据类型，否则将会假定为字符串类型。 如果gird中已经存在数据，这个方法将会替换原来已经存在的数据 参见 source 配置项.

grid.setSource({
    "(name)": "My Object",
    "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),  // date type
    "Available": false,  // boolean type
    "Version": .01,      // decimal type
    "Description": "A test object"
});

source:object
一个数据对象做为grid的数据源

Ext.grid.property.Grid 翻译于Ext.js5.1版本API
sourceConfig:object
这个选项允许向属性表格的每个field 设置不同的配置。这些配置不是必须的。
displayName
给field设置标签。如果设置了这个属性，那么这个displayname会代替属性名出线在表格中，例如：
//确实是这样的，第一次加载的时候确实是显示的display,但是点击了按钮进行切换之后，并不是显示的displayname而是属性名。看上文代码。

new Ext.grid.property.Grid({
    source: {
        clientIsAvailable: true
    },
    sourceConfig: {
        clientIsAvailable: {
            // Custom name different to the field
            displayName: 'Available'
        }
    }
});