EXT--grid

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