ExtJs_PropertyGridExample

html设置：

    在body中输入：

        <p id="button-container"></p>
        <div id="prop-grid"></div>

js代码为：

Ext.onReady(function(){
    /*
     * 创建PropertyGrid:
     * 配置：source: key与value的方式。
     */
    var propertyGrid = new Ext.grid.PropertyGrid({
        renderTo: 'prop-grid',
        width: 300,
        autoHeight: true,
        propertyNames: {
            tested: 'QA',
            borderWidth: 'Border Width'
        },
        source: {
            name: 'Properties Grid',
            grouping: false,
            autoFitColumns: true,
            productionQuality: false,
            created: new Date(Date.parse('10/15/2006')),
            tested: false,
            version: 0.01,
            borderWidth: 1
        },
        viewConfig: {
            forceFit: true,
            scrollOffset: 2 //预留垂直滚动条大小。
        }
    });
   
    var isUpdate =true;
   
    /*
     * 创建按钮：重新设置PropertyGrid的source配置项。
     */
    var updateDataBtn = new Ext.Button({
        renderTo: 'button-container',
        text: '更新grid数据',
        handler : function(){//监听单击事件
           
            if(isUpdate){
                propertyGrid.setSource({
                    name: '刷新数据了的PropertyGrid',
                    grouping: false,
                    autoFitColumns: true,
                    productionQuality: true,
                    created: new Date(),
                    tested: false,
                    version: 0.02,
                    borderWidth: 2
                });
                isUpdate = false;
            }else {
                propertyGrid.setSource({
                    name: 'Properties Grid',
                    grouping: false,
                    autoFitColumns: true,
                    productionQuality: false,
                    created: new Date(Date.parse('10/15/2006')),
                    tested: false,
                    version: 0.01,
                    borderWidth: 1
                });
                isUpdate = true;
            }
        }
    });
   
    //alert("初始配置成功");
});