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

最新推荐文章于 2018-03-07 14:40:00 发布

冷月宫主

最新推荐文章于 2018-03-07 14:40:00 发布

阅读量4k

点赞数 1

分类专栏： ajax EXT javascript 文章标签： extjs function json 网络 url ext

本文链接：https://blog.youkuaiyun.com/e_wsq/article/details/7472092

版权

javascript 同时被 3 个专栏收录

311 篇文章

订阅专栏

ajax

213 篇文章

订阅专栏

EXT

192 篇文章

订阅专栏

一、配置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

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

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);
}

完整代码：

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'}
     ]
});
// Array data for the grids
/*Ext.grid.dummyData = [
    ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
    ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing']
];
*/
var getLocalStore = function() {
    return Ext.create('Ext.data.ArrayStore', {
        model: GPSInfoModel/*,
        data: Ext.grid.dummyData*/
    });
};

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);
}

var task = {
    run : function() {
		Ext.Ajax.request({
					url : 'servlet/FinalPositionServlet',
					params : {
						type : 'getGPSInfo'
					},
					method : 'post',
					success : function(response, opts) {
						var json = Ext.decode(response.responseText);
						addGPSInfo(json);
					},
					failure : function(response, opts) {
						//alert('网络连接失败');
					}
				});
	},
    interval: 1000 //1 second
}
Ext.TaskManager.start(task);