1.首先看效果(最下方图片)
2.
需要一个合计插件GridSummary.js GridSummary 插件,下载后将后缀名该为 js
3.页面需要引用的文件
1 <link rel="stylesheet" type="text/css" href="include/ext-3.4.0/resources/css/ext-all.css" />
2 <link rel="stylesheet" type="text/css" href="include/ext-3.4.0/ux/css/ux-all.css" />
3 <script type="text/javascript" src="include/ext-3.4.0/adapter/ext/ext-base.js"></script>
4 <script type="text/javascript" src="include/ext-3.4.0/ext-all.js"></script>
5 <script type="text/javascript" src="include/ext-3.4.0/ux/ux-all.js"></script>
6 <script type="text/javascript" src="include/ext-3.4.0/locale/ext-lang-zh_CN.js"></script>
7
<script type="text/javascript" src="include/ext-3.4.0/ux/GridSummary.js"></script> <!-- 合计插件 -->
8 <script type="text/javascript" src="demo.js"></script> <!-- 示例js -->
4.Grid代码
var url = "RequestAction/AT/Req_CT_SHIPMENTS.aspx?Action=GetDetailAll&S_SHIPMENTS_M_GUID=" + guid;
//复选框
var sm = new Ext.grid.CheckboxSelectionModel();
var textFileldVehicle = new Ext.form.TextField
({
allowBlank: false,
blankText: "请输入车号",
maxLength: 50
});
var numField = new Ext.form.NumberField({
allowNegative: false,
allowDecimals: true,
allowFormat: true,
decimalPrecision: 2,
allowBlank: false,
blankText: '金额必须大于零'
});
//字段集合
var fields =
[
{ name: 'S_VEHICLE_NUMBER' },
{ name: 'N_QUANTITY' },
{ name: 'N_FREIGHT' },
{ name: 'S_GUID' },
{ name: 'S_SHIPMENTS_M_GUID' }
];
var proxy = new Ext.data.HttpProxy({ url: url });
//数据读取器
var reader = new Ext.data.JsonReader({
totalProperty: "totalPorperty", //数据总条数
root: "rows", //将要显示数据的数组
id: "S_GUID", //每一行数据的唯一记录
fields: fields
});
//列集合 其中 summaryType: 'sum' 为求和
var cm = new Ext.grid.ColumnModel
({ columns: [sm,
new Ext.grid.RowNumberer({ header: 'NO', width: 30, align: 'center' }),
{ header: '车号', dataIndex: 'S_VEHICLE_NUMBER', editor: textFileldVehicle, summaryRenderer: function (v, params, data) { return '合计'; } },
{ header: '重量', dataIndex: 'N_QUANTITY',
summaryType: 'sum', renderer: formatNumberDefault, align: 'right', editor: numField },
{ header: '运费', dataIndex: 'N_FREIGHT',
summaryType: 'sum', renderer: formatNumberDefault, align: 'right', editor: numField}
]
});
//如果全部列都可排序否则单个设置
cm.defaultSortable = false;
//创建一个store
var shipmentsDetailstore = new Ext.data.Store({
proxy: proxy,
reader: reader,
autoDestroy: true,
autoLoad: { params: { start: 0, limit: pageSize} }
});
//插入行按钮
var btn_Insert = new Ext.Button({ text: '插入行', iconCls: 'insert', handler: function () {
//定义一个recode对象
var initValue = createShipmentDetailRow();
grid.stopEditing();
var maxRowIndex = grid.getStore().getCount();
grid.getStore().insert(maxRowIndex, initValue); //在第一个位置插入
grid.view.refresh();
grid.getSelectionModel().selectLastRow();
grid.getView().focusRow(maxRowIndex); //焦点标记行
grid.startEditing(maxRowIndex, 2); //单元格转换成编辑状态
}
});
//删除行按钮
var btn_Remove = new Ext.Button({ text: '删除行', iconCls: 'delete', handler: function () {
grid.stopEditing();
var rows = grid.getSelectionModel().getSelections();
if (rows == undefined || rows.length == 0) {
setShipmentStatusBarText('error', '请选择需要删除的行!');
return; //判断记录集是否为空,为空返回
}
grid.getStore().remove(rows);
grid.view.refresh();
}
});
//工具栏
var tbar = new Ext.Toolbar({
cls: 'top-toolbar',
items: [btn_Insert, '-', btn_Remove]
});
var summary = new Ext.ux.grid.GridSummary();
//创建GRID
var grid = new Ext.grid.EditorGridPanel
({
id: 'ShipmentsDetailGirdPanel',
deferredRender: false,
enableColumnHide: false,
enableHdMenu: false,
columnLines: true,
enableColumnMove: false,
store: shipmentsDetailstore,
sm: sm,
cm: cm,
loadMask: true,
//自适应宽度 参数为列数
// autoExpandColumn: 4,
//超过长度带自动滚动条
autoScroll: true,
border: false,
nocache: false,
timeout: 10,
clicksToEdit: 1,
scripts: true,
loadMask: { msg: '正在加载数据,请稍侯……' },
tbar: tbar,
view: new Ext.ux.grid.BufferView({
rowHeight: 25,
scrollDelay: true,
forceFit: true,
deferEmptyText: true,
emptyText: "无数据"
}),
plugins: summary
});
5.此时会看到合计行字体偏小
添加样式
.x-grid3-summary-row .x-grid3-cell-inner {
FONT: 12.5px tahoma,arial,helvetica,sans-serif
}
6.此示例Ext版本为 3.4.0
- 大小: 40.8 KB
分享到:
相关推荐
ext-3.4.0.zip ext-3.4.0.zip ext-3.4.0.zip ext-3.4.0.zip
ext-3.4.0.rar
ext-3.4.0API 带例子 ext-3.4.0API 带例子 ext-3.4.0API 带例子 ext-3.4.0API 带例子 ext-3.4.0API 带例子
Ext3.4.0复杂(多行)表头+锁定多列例子 非常棒,项目中需要使用到的。
ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了, 主要包括data,widget,form,gird,dd,menu,其中最强大的应该算gird了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名...
项目配置:Hibernate3.3.2+Spring3.0+Struts2.2.3 + ext3.4.0,真实项目实现,项目中可参考经典权限设计,通用数据录入,批量数据处理(poi),统一的JSON格式封装,灵活的组合模式设计,EXTJS面向组件编程参考......
ExtJS 3.4.0 官方原始版本、目前官方上可能无法进行下载了!
ext-3.4.0的开发包,里面附带example值得好好学习
Ext是一个强大的js类库,主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面向对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据...
ext-3.4.0完整版本代码.rar
extjs官方安装包 下载.包含各种版本:3.4.0. 4.0.0;4.0.1;
MyEclipse 8.5+spket1.6.18.jar +ext-3.4.0 安装配置
Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选, 附源码。 修复不能多选问题,代码仅供参考
ext3.0包 +Skpet 在eclipse 自动提示 在这里分享啦, 如果不能下载或者不能使用 请留言
该ext.jsb2文件是ExtJS3.4.0中的,因ExtJS4.0.0中没有这个文件,但可以与4.0.0版本共用。
spring mvc mybatis extjs 3.4 权限管理 ,调用oracle存储过程作为分页,是进销存产品开发的最好的参考案例
Opencv3.4.0安装包
kong3.4.0
eigen3.4.0库
◊ pkgs目录下是EXT压缩后的代码,经过压缩的代码体积更小,加载更快。 ◊ resources目录下是EXT要用到的图片文件和样式文件。 ◊ src目录下是EXT的源代码文件,是相对pkgs目录而言,未经过压缩的代码。 ◊ ...