<ext:gridPanel var="gridView" region="center" frame="true" autoExpandColumn="grid_name" listeners="{rowdblclick:onEdit}">
<ext:store var="gridStore" url="findPageByNewRebateSet.action" remoteSort="true">
<ext:jsonReader totalProperty="totalSize" root="newRebateSets">
<ext:fields type="com.sf.module.cdhrebate.domain.NewRebateSet"/>
</ext:jsonReader>
</ext:store>
<ext:pagingToolbar var="pagingBar" pageSize="20" store="gridStore" displayInfo="true"/>
<ext:checkboxSelectionModel/>
<ext:columnModel>
<ext:propertyColumnModel dataIndex="setId" id="grid_setId" header="${app:i18n('newRebateSet.setId')}" hidden="true"/>
<ext:propertyColumnModel dataIndex="name" id="grid_name" width="250" header="${app:i18n('newRebateSet.name')}"/>
<ext:propertyColumnModel dataIndex="alias" id="grid_alias" width="250" header="${app:i18n('newRebateSet.alias')}"/>
<ext:propertyColumnModel dataIndex="creator" id="grid_creator" width="100" header="${app:i18n('newRebateSet.creator')}" hidden="false" />
<ext:propertyColumnModel dataIndex="createTm" id="grid_createTm" width="150" header="${app:i18n('newRebateSet.createTm')}" hidden="false" renderer="datetimeRenderer">
<ext:dateField var="grid_createTm" format="Y-m-d H:i:s"/>
</ext:propertyColumnModel>
<ext:propertyColumnModel dataIndex="modifier" id="grid_modifier" width="100" header="${app:i18n('newRebateSet.modifier')}" hidden="false" />
<ext:propertyColumnModel dataIndex="modifyTm" id="grid_modifyTm" width="150" header="${app:i18n('newRebateSet.modifyTm')}" renderer="datetimeRenderer" hidden="false">
<ext:dateField var="grid_modifyTm" format="Y-m-d H:i:s"/>
</ext:propertyColumnModel>
<ext:propertyColumnModel dataIndex="rebateRateType" id="grid_rebateRateType" width="80" header="${app:i18n('newRebateRate.rebateRateType')}" renderer="comboboxRenderer">
<ext:comboBox var="grid_rebateRateType" valueField="key" displayField="value" triggerAction="all" editable="false" mode="local" data="${app:i18n('newRebateProtocol.newRebateFreightCfg.rebateRateType.options')}" />
</ext:propertyColumnModel>
</ext:columnModel>
</ext:gridPanel>
// 至少选择一条记录
if (grid.getSelectionModel().getSelections().length != 1) {
Ext.MessageBox.alert('${app:i18n('prompt')}','${app:i18n('selectOneRecord')}');
return;
}
// 得到选择的单条记录
var record = gridView.getSelectionModel().getSelections()[0];
// 得到选择的多条记录
var results = '';
for(var i=0; i< grid.getSelectionModel().getSelections().length; i++){
var recDir = grid.getSelectionModel().getSelections()[i];
if(recDir != null){
results += recDir.data.itemCode;
}
if(i != grid.getSelectionModel().getSelections().length-1){
results += ',';
}
}
//从grid中删除选中的记录
var recs = grid.getSelectionModel().getSelections();
for(var i = recs.length -1; i >= 0; i--){
store.remove(recs[i]);
}
//从json中取数据并插入grid中显示
var objs = eval(areaIdsJSONStr);
for (i = 0; i < objs.length; i++)
{
var srcAreaId = objs[i].srcAreaId;
var srcAreaName = objs[i].srcAreaName;
var distAreaId = objs[i].distAreaId;
var distAreaName = objs[i].distAreaName;
var record = new Ext.data.Record({
srcAreaId:srcAreaId,
srcAreaName:srcAreaName,
distAreaId:distAreaId,
distAreaName:distAreaName
});
dirResultStore.insert(dirResultStore.getCount(),record);//store.getCount()表示插入到最后一行
}
//checkbox全选
var gridEl = grid.getEl();//得到grid表格的EL对象
var hd = gridEl.select('div.x-grid3-hd-checker');//得到表格头部的全选CheckBox框
hd.addClass('x-grid3-hd-checker-on');
//查看的时候让所有已选择的记录显示选中状态
var ayyay = codes.split(",");
for(var i = 0; i < ayyay.length; i++) {
var code = ayyay[i];
for(var j = 0; j < store.getCount(); j++) {
var record = store.getAt(j);
if(code == record.data.itemCode){
grid.getSelectionModel().selectRow(j,true);
}
}
}
// 将已选择的grid记录封装成json
var areaIds = [];
for(var i=0; i< dirResultStore.getCount(); i++){
var obj = {};
obj.srcAreaId = dirResultStore.getAt(i).data.srcAreaId;
obj.distAreaId = dirResultStore.getAt(i).data.distAreaId;
areaIds.push(obj);
}
areaIdsJSONStr.setValue(Ext.util.JSON.encode(areaIds));
//删除grid记录
function onDelete() {
var records = gridView.getSelectionModel().getSelections();
if (records.length < 1) {
Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('selectDeleteData')}');
} else {
Ext.MessageBox.confirm('${app:i18n('prompt')}','${app:i18n('confirmDeleteData')}', deleteRecord);
}
}
function deleteRecord(result) {
if (result == 'yes') {
var records = gridView.getSelectionModel().getSelections();
var setIds = '';
for(var i = 0; i < records.length; i++) {
setIds += records[i].data.setId + ',';
}
Ext.Ajax.request({params: {setIds: setIds},
url: "deleteNewRebateSets.action",
success: function(response) {
var resp = Ext.util.JSON.decode(response.responseText);
if (resp.status == "ok") {
Ext.MessageBox.alert('${app:i18n('prompt')}','${app:i18n('deleteSuccess')}');
gridView.getStore().load();
} else {
Ext.MessageBox.alert('${app:i18n('deleteFailure')}', resp.status);
}
}
});
}
}
// grid中的日期转换
function datetimeRenderer(v, p, r) {
if ((v == null) || (v.length < 19)) return v;
var dateFormat = eval(this.id + '.format');
if (typeof(v) == "string") {
v = v.replace('T', ' ' );
v = Date.parseDate(v, "Y-m-d H:i:s");
}
return v.format(dateFormat);
}
// grid中的下拉框值转换
function comboboxRenderer(v, p, r) {
if (v != null) {
var records = eval(this.id + '.initialConfig.store.getRange()');
var keyField = eval(this.id + '.valueField');
var displayField = eval(this.id + '.displayField');
for(var i = 0; i < records.length; i ++) {
var record = records[i];
if (record.get(keyField) == v) {
return record.get(displayField);
}
}
}
return v;
}
EXTJS GRID 中 单击行和单元格获得行或者单元格的内容(数据)
grid.addListener('cellclick',cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','当前选中的数据是'+data);
}
grid.on('mouseover',function(e){//添加mouseover事件
var index = grid.getView().findRowIndex(e.getTarget());//根据mouse所在的target可以取到列的位置
if(index!==false){//当取到了正确的列时,(因为如果传入的target列没有取到的时候会返回false)
var record = store.getAt(index);//把这列的record取出来
var str = Ext.encode(record.data);//组装一个字符串,这个需要你自己来完成,这儿我把他序列化
var rowEl = Ext.get(e.getTarget());//把target转换成Ext.Element对象
rowEl.set({
'ext:qtip':str //设置它的tip属性
},false);
}
});
listeners: {
'cellclick':function(grid,rowIndex,columnIndex,e ){ }
}
//这是单击grid单元格时,触发的事件
grid.getView().getCell(rowIndex,columnIndex).style.background-color="#FF6600";
grid.getView().getCell(rowIndex,columnIndex).style.color="#FF6600";
我要改变都是整个背景色,不是光是字的颜色。还有怎么能点一个单元格时候,让上次的点的单元格颜色恢复到原来呢???
把表格刷新下可以把以前单击而改变的颜色还原,grid.getView().refresh(); 然后再让这次单击的单元格变色。
grid.getView().refresh();
grid.getView().getCell(rowIndex,columnIndex).style.backgroundColor="#FF9999";
折扣组合:实现checkbox全选、反选、以及勾选列表中的某个checkbox时让全选按钮跟着发生改变
<!-- 区域类型 -->
<ext:gridPanel var="regionView" region="center" height="150" width="250" frame="true">
<ext:store var="regionStore" url="findAvailableLeaves.action" remoteSort="true">
<ext:jsonReader totalProperty="totalSize" root="rbtDimensionItems">
<ext:fields type="com.sf.module.cdhprotocol.domain.IRbtDimensionItem"/>
</ext:jsonReader>
</ext:store>
<ext:checkboxSelectionModel singleSelect="false" />
<ext:columnModel>
<ext:propertyColumnModel dataIndex="itemCode" id="grid_itemCode" width="98" header="<font color=red>*</font>${app:i18n('newRebateSet.regionTeam.code')}"/>
<ext:propertyColumnModel dataIndex="itemName" id="grid_itemName" width="98" header="${app:i18n('newRebateSet.regionTeam.name')}"/>
</ext:columnModel>
</ext:gridPanel>
在js中加入以下代码(实际上ext的全选和反选框是两张图片,所以这里覆盖它的鼠标点击事件)
Ext.override(Ext.grid.CheckboxSelectionModel,{
onMouseDown : function(e, t){
if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
// mouseHandled flag check for a duplicate selection (handleMouseDown) call
if(!this.mouseHandled && row){
//alert(this.grid.store.getCount());
var gridEl = this.grid.getEl();//得到表格的EL对象
var hd = gridEl.select('div.x-grid3-hd-checker');//得到表格头部的全选CheckBox框
var index = row.rowIndex;
if(this.isSelected(index)){
this.deselectRow(index);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
//判断头部的全选CheckBox框是否选中,如果是,则删除
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
}
}else{
this.selectRow(index, true);
//判断选中当前行时,是否所有的行都已经选中,如果是,则把头部的全选CheckBox框选中
if(gridEl.select('div.x-grid3-row-selected').elements.length==gridEl.select('div.x-grid3-row').elements.length){
hd.addClass('x-grid3-hd-checker-on');
};
}
}
}
this.mouseHandled = false;
},
onHdMouseDown : function(e, t){
/**
*大家觉得上面重写的代码应该已经实现了这个功能了,可是又发现下面这行也重写了
*由原来的t.className修改为t.className.split(' ')[0]
*为什么呢?这个是我在快速点击头部全选CheckBox时,
*操作过程发现,有的时候x-grid3-hd-checker-on这个样式还没有删除或者多一个空格,结果导致下面这个判断不成立
*去全选或者全选不能实现
*/
if(t.className.split(' ')[0] == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
this.clearSelections();
}else{
hd.addClass('x-grid3-hd-checker-on');
this.selectAll();
}
}
}
});
//修改的时候,如果是全选就选中全选按钮
var gridEl = grid.getEl();//得到表格的EL对象
var hd = gridEl.select('div.x-grid3-hd-checker');//得到表格头部的全选CheckBox框
hd.addClass('x-grid3-hd-checker-on');
折扣组合:修改组合的时候锁住区域类型的GRID不让编辑
<!-- 区域类型 -->
<ext:gridPanel var="regionView" region="center" height="150" width="250" frame="true" >
<ext:store var="regionStore" url="findAvailableLeaves.action?dimensionType=1" remoteSort="true" autoLoad="true" >
<ext:jsonReader totalProperty="totalSize" root="rbtDimensionItems">
<ext:fields type="com.sf.module.cdhprotocol.domain.IRbtDimensionItem"/>
</ext:jsonReader>
</ext:store>
<ext:checkboxSelectionModel var="regionChkModel" singleSelect="false" />
<ext:columnModel>
<ext:propertyColumnModel dataIndex="itemCode" id="grid_itemCode" width="98" header="<font color=red>*</font>${app:i18n('newRebateSet.regionTeam.code')}"/>
<ext:propertyColumnModel dataIndex="itemName" id="grid_itemName" width="98" header="${app:i18n('newRebateSet.regionTeam.name')}"/>
</ext:columnModel>
</ext:gridPanel>
//解决延迟加载的问题
var hasRendered = false;
// 打开新增窗口(只留上锁的代码,其它屏蔽了)
function onAdd() {
//将区域类型的grid设为可编辑(解锁)
regionView.resumeEvents();//恢复该对象所有的事件处理
if(regionChkModel.isLocked()){
regionChkModel.unlock();
}
//将流向设为可编辑(解锁)
btnSaveTo.setDisabled(false);
btnDeleteTo.setDisabled(false);
dirResultView.getSelectionModel().unlock();
hasRendered = true;
}
// 打开修改窗口
function onEdit() {
//修改的时候设置区域grid为不可编辑(上锁)
regionView.suspendEvents(true);//暂停该对象所有的事件处理
if(regionChkModel.isLocked()){
regionChkModel.unlock();
}
//解决延迟加载的问题
if(!hasRendered) {
appendView.addListener("afterrender",function(objView){
loadData(edit_dirId,edit_regionDmnsnId,edit_businessDmnsnId,edit_cargoDmnsnId,edit_timeDmnsnId,edit_transDmnsnId,edit_appendDmnsnId);
hasRendered = true;
});
} else {
loadData(edit_dirId,edit_regionDmnsnId,edit_businessDmnsnId,edit_cargoDmnsnId,edit_timeDmnsnId,edit_transDmnsnId,edit_appendDmnsnId);
}
//将流向和区域类型设为不可编辑
btnSaveTo.setDisabled(true);
btnDeleteTo.setDisabled(true);
dirResultView.getSelectionModel().lock();//这里不需要被选中,所以可以直接lock
}
// 加载已关联的流向结果和维度信息,并选中
function loadData(dirId,regionDmnsnId,businessDmnsnId,cargoDmnsnId,timeDmnsnId,transDmnsnId,appendDmnsnId){
Ext.Ajax.request({
params: {dirId: dirId,regionDmnsnId: regionDmnsnId,businessDmnsnId: businessDmnsnId,
cargoDmnsnId: cargoDmnsnId,timeDmnsnId: timeDmnsnId,transDmnsnId: transDmnsnId,appendDmnsnId: appendDmnsnId},
url: "findNewRebateDetailBySetId.action",
success: function(response){
var resp = Ext.util.JSON.decode(response.responseText);
var regionCodes = resp.regionCodes;
setDmnsnsGridSelected(regionCodes,regionStore,regionView);
// 数据被选中后设置为不可编辑(上锁)
if(!regionChkModel.isLocked()){
regionChkModel.lock();
}
}
});
}