Extjs4.1向Ext.grid.Panel创建的gridpanel中动态在第一行插入数据

阅读更多

//一、配置Ext和导包

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ext-4.1.0-beta-3/ux');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.ux.RowExpander',
    'Ext.selection.CheckboxModel'
]);

 

//二、定义数据模型

Ext.define('GPSInfoModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'number_plate'},
        {name: 'call_letter'},
        {name: 'speed'},
        {name: 'cncourse'},
        {name: 'gpstime'},
        {name: 'stamp'},
        {name: 'referenceposition'},
        {name: 'encourse'},
        {name: 'vehiclekind'},
        {name: 'vehiclekind_id'},
        {name: 'unit_id'},
        {name: 'historyid'}
     ]
});

 

//三、定义Store

var getLocalStore = function() {
    return Ext.create('Ext.data.ArrayStore', {
        model: GPSInfoModel/*,
        data: Ext.grid.dummyData*/
    });
};

 

//四、定义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);
            }
  }
    }
});

 

//五、动态向里面插入数据并置顶

function addGPSInfo(GPSInfoModelData) {
 
/* var GPSInfoModel = [{
    'number_plate' : '11111111111111',
    'call_letter' : 29.89,
    'speed' : 0.24,
    cncourse : 0.81,
    gpstime : '9/1 12:00am',
    stamp : 'Services',
    referenceposition : 'ASC'
   }, {
    'number_plate' : '222222222222222222222',
    'call_letter' : 29.89,
    'speed' : 0.24,
    cncourse : 0.81,
    gpstime : '9/1 12:00am',
    stamp : 'Services',
    referenceposition : 'ASC'
   }];*/

 var store = gridPanel.getStore();
 var count = store.getCount();
 if (count > 10) {
  store.remove(store.getAt(count - 1));
 }
 gridPanel.getStore().insert(0, GPSInfoModelData);
 //gridPanel.select(0,true,true);
 gridPanel.setScrollTop(0);
}

转