//一、配置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);
}
转
分享到:
相关推荐
1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid....
Extjs4.1样式调整.pdf
Extjs4.1中文API.chm
NULL 博文链接:https://atian25.iteye.com/blog/1019910
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
spket路径ok ext4.1配置,在build 目录下,直接引用,全提示。你懂得,爽...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
extjs4.1的中文文档,可以方便查看API
extjs4.1下拉复选框完整DEMO,包含了extjs4.1主文件,代码实现了动态加载功能,所以需要配置IIS或者apache。插件文件在ux目录下,请自行参考。
如何给Ext.panel增加一个背景图片
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
extjs 4.1中文文档,chm,Ext JS is the best JavaScript framework for building data-intensive web apps for desktop, tablets, and smartphones, with the largest set of UI components.
Extjs 4.1中文版api,非常难得的一款4.1的中文api,值得大家收藏
Extjs4.1中build下的sdk.jsb3里的路径配置都是错误的,所以集成到spket根本不能进行智能提示,这个是经过修复后的,只要替换掉build下的sdk.jsb3就可以了