Extjs4.1动态更新Ext.grid.PropertyGrid创建的propertyGrid的内容

一、定义 PropertyGrid'

 this.propertyGrid =Ext.create('Ext.grid.PropertyGrid', {
                    title: '车辆当前状态',
                    id: 'propGrid',
                    source: {
                        "车牌号码": "鄂A.N1002",
                        "行驶速度": 80.0,
                        "行驶方向": "北偏东",
                        "所在位置": "深圳市南山区科技园南区白石路",
                        "定位时间": Ext.Date.parse('10/15/2006', 'm/d/Y'),
                        "上报时间": Ext.Date.parse('10/15/2006', 'm/d/Y')
                    }
                });

 

二、放入页面上的指定位置

    var viewport = Ext.create('Ext.Viewport', {
        id: 'border-example',
        layout: 'border',
        items: [{
            region: 'north',
            height: 32,
            items:toolbar
        }, {
            region: 'south',
            split: true,
            height: 100,
            minSize: 100,
            maxSize: 200,
            collapsible: true,
            collapsed: true,
            title: '日志输出',
            margins: '0 0 0 0',
            items: [loggridpanel]
        }, {
            xtype: 'tabpanel',
            region: 'east',
            title: '行驶状态',
            animCollapse: true,
            collapsible: true,
            split: true,
            width: 225,
            minSize: 175,
            maxSize: 400,
            margins: '0 5 0 0',
            activeTab: 1,
            tabPosition: 'bottom',
            items: [panel.propertyGrid]
        }, {
            region: 'west',
            stateId: 'navigation-panel',
            id: 'west-panel',
            title: '车辆列表',
            split: true,
            width: 200,
            minWidth: 175,
            maxWidth: 400,
            collapsible: true,
            animCollapse: true,
            margins: '0 0 0 5',
            layout: 'accordion',
            items: [tree/*, {
                title: '区域规划',
                html: '<p>Some settings in here.</p>',
                iconCls: 'settings'
            }, {
                title: '在线列表',
                html: '<p>Some info in here.</p>',
                iconCls: 'info'
            }*/]
        },
        Ext.create('Ext.tab.Panel', {
            region: 'center',
            deferredRender: false,
            activeTab: 0,
            items: [gridPanel]
        })]
    });

 

三、动态更新

var gridPanel = Ext.create('Ext.grid.Panel', {
    store: getLocalStore(),
    columns: [
        {text: "车牌号码", dataIndex: 'number_plate',locked: true,width:100},
        {text: "车台号码", dataIndex: 'call_letter',width:100},
        {text: "速度", dataIndex: 'speed',width:50},
        {text: "方向", dataIndex: 'cncourse',width:50},
        {text: "定位时间", dataIndex: 'gpstime',width:110}, 
        {text: "上报时间", dataIndex: 'stamp',width:110},
        {text: "参考位置", dataIndex: 'referenceposition',width:600}
    ],
    collapsible: true,
    animCollapse: false,
    title: '车辆显示区域',
    iconCls: 'icon-grid',
    listeners : {
  itemdblclick : function(view, record, item, index, e, eOpts) {
   var unitid=record.get('call_letter');
   //alert('unitid:'+unitid);
   //propertyGrid.setSource(record.data);
   // 获取propety grid组件
            var propGrid = Ext.getCmp('propGrid');
            // 保证property grid是存在的
            if (propGrid) {
                // 获得property grid 的store数据
                //propGrid.setSource(record.data);//这一句是可行的，请不要删除
             var data={
                        "车牌号码": record.get('number_plate'),
                        "车台号码": record.get('call_letter'),
                        "行驶速度": record.get('speed'),
                        "行驶方向": record.get('cncourse'),
                        "所在位置": record.get('referenceposition'),
                        "定位时间": record.get('gpstime'),
                        "上报时间": record.get('stamp')
                    };
                propGrid.setSource(data);
            }
  }
    }
});