Extjs4.2 Grid单元格编辑

Extjs4.2 Grid单元格编辑
效果图：
实现代码：
TcodeoneRowView.js
/**
*@Description代码生成器-单表-行编辑模式视图层
*@author张川(cr10210206@)
*@date2014-01-1311:22:12
*/
Ext.define(zc.createView('test.TcodeoneRowView'),{ extend : 'Ext.panel.Panel',
alias : 'widget.view_test_TcodeoneRowView',//视图别名
layout : 'border',
border : 0,
items : [{
region : 'north',
xtype : 'panel',
height : 0,
border : 0,
items : [{
'xtype' : 'hiddenfield',
'id' : 'view_test_TcodeoneRowView_tbar_storeCount' }]
},{
region : 'center',
xtype : 'gridpanel',
layout : 'fit',
border : 0,
forceFit : true,//自动填充单元格
selType : 'checkboxmodel',//多选框模式
columns : [{
dataIndex : 'id'
,text : '编号'
,width : 100
,align : 'center'
,sortable : false
,hidden : true
,hideable : false
},{
dataIndex : 'name'
,text : '姓名'
,width : 100
,align : 'center'
,sortable : false
,editor : {
xtype : 'textfield'
}
},{
dataIndex : 'birthday'
,text : '出生日期'
,width : 100
,align : 'center'
,sortable : false
,renderer : Ext.util.Format.dateRenderer('Y-m-d')
,editor : {
xtype : 'datefield'
,format : 'Y-m-d'
}
},{
dataIndex : 'status'
,text : '状态'
,width : 100
,align : 'center'
,sortable : false
,renderer:function(value,metaData,record,rowIndex,columnIndex,str oe,view){
var result = '';
if(value == 1){
result = '<span style="color:green">启用</span>';
}
else if(value == 0){
result = '<span style="color:gray">禁用</span>';
}
return result;
}
,editor : {
xtype : 'view_test_TcodeoneRowStatusView'
}
}],
store : 'test.TcodeoneRowStore'
}],
initComponent : function(){
var listObj = this.items[1];
listObj.dockedItems = [{
xtype : Ext.widget('zc_grid_Toolbar',{//工具栏
params : {
initialism : 'test_TcodeoneRow',
btnSearchg : true,
btnSaveCancel : true
}
})
},{
xtype : 'pagingtoolbar', //分页栏
dock : 'bottom',
displayInfo : true,
plugins : Ext.create('Ext.ux.ProgressBarPager'),// 分页进度条
pageSize : 25,
store : listObj.store
}];
listObj.plugins = [{//单元格编辑模式
ptype : 'cellediting',
clicksToEdit : 1,
pluginId : 'view_test_TcodeoneRowView_pluginId'
}];
this.callParent(arguments);
}
});
TcodeoneRowController.js
/**
*@Description代码生成器-单表-行编辑模式控制层
*@author张川(cr10210206@)
*@date2014-01-1311:22:12
*/
Ext.define(zc.createController('test.TcodeoneRowController'),{ extend : 'Ext.app.Controller',
stores : [
zc.storeFactory.getStore({
storeName : 'test.TcodeoneRowStore',
modelName : zc.modelFactory.getModel('test.TcodeoneRow'),
url : zc.bp() + '/test_TcodeoneRow_list.action'
}),
zc.storeFactory.getStore({
storeName : 'test.TcodeoneRowStatusStore',
modelName : zc.modelFactory.getModel('bdata.TdtnyCombo'),
autoLoad : true,
url : zc.getTdtnyValUrl(),
params :{
initialism : 'status'
}
})
],
views : [
zc.viewFactory.getCombobox({
viewName : 'test.TcodeoneRowStatusView',
store : 'test.TcodeoneRowStatusStore'
}),
'test.TcodeoneRowView'
],
init : function(){
this.control({
'view_test_TcodeoneRowView > gridpanel' : {
render : function(gridObj,eOpts){
var scope = this;
setTimeout(function(){//设置延时加载
scope.refreshGridObj(gridObj);//加载数据
},10);
},
afterrender : function(gridObj,eOpts){//数据加载完成后保存当前页的数据条数
var scope = this;
var storeObj = gridObj.getStore();
storeObj.on('load',function(){
var ct = storeObj.getCount();
scope.setStoreCount(ct);
});
},
beforeedit : function(editor, e, eOpts){ //编辑单元格前触发的事件，判断当前用户是否有操作权限
return this.getAuth(e);
}
},
'view_test_TcodeoneRowView > gridpanel button[action=tbar_refresh]' : { //刷新
click : function(btn){
this.refreshObj(btn);
}
},
'view_test_TcodeoneRowView > gridpanel button[action=tbar_search]' : {//查询
click : function(btn){
this.searchObj(btn);
}
},
'view_test_TcodeoneRowView > gridpanel button[action=tbar_add]' : { //新增
click : function(btn){
this.addObj(btn);
}
},
'view_test_TcodeoneRowView > gridpanel button[action=tbar_update]' : { //修改
click : function(btn){
this.updateObj(btn);
}
},
'view_test_TcodeoneRowView > gridpanel button[action=tbar_delete]' : {//删除
click : function(btn){
this.deleteObj(btn);
}
},
'view_test_TcodeoneRowView > gridpanel button[action=tbar_save]' : { //保存
click : function(btn){
this.saveObj(btn);
}
},
'view_test_TcodeoneRowView > gridpanel button[action=tbar_cancel]' : { //取消
click : function(btn){
this.cancelObj(btn);
}
}
});
},
/**
*刷新
**/
refreshObj : function(btn){
var scope = this;
var gridObj = scope.getGridObj(btn);//获取datagrid对象
scope.refreshGridObj(gridObj);//刷新datagrid对象
},
/**
*查询
**/
searchObj : function(btn){
var scope = this;
var gridObj = scope.getGridObj(btn);//获取datagrid对象
var params = zc.getSearchParams(btn);//查询参数
scope.refreshGridObj(gridObj,params);//刷新datagrid对象},
/**
*新增
**/
addObj : function(btn){
var scope = this;
var gridObj = scope.getGridObj(btn);//获取datagrid对象
var editor = scope.getPlugin(gridObj);//获取编辑对象
var storeObj = gridObj.getStore();//获取Store对象
var storeCount = storeObj.getCount();//获取Store个数
var record = Ext.create(zc.modelFactory.getModel('test.TcodeoneRow'),{
status : 1
});
storeObj.insert(storeCount,record);
editor.startEditByPosition({
row : storeCount,
column : 1
});
},
/**
*修改
**/
updateObj : function(btn){
Ext.MessageBox.alert('温馨提示','请点击要修改的单元格!');
},
/**
*保存(保存新增和修改)
**/
saveObj : function(btn){
var scope = this;
var gridObj = scope.getGridObj(btn);//获取datagrid对象
var storeObj = gridObj.getStore();//获取Store对象
var storeCount = storeObj.getCount();//获取当前Store对象的个数
var sjStoreCount = scope.getStoreCount();//Store的实际个数
var records = null;
var url = '';
if(storeCount > sjStoreCount){//新增
var tbarObj = scope.getTbarBtn(gridObj,'tbar_add');//获取请求地址
if(!tbarObj.disabled){
records = storeObj.getNewRecords();//获取新增后的数据
url = tbarObj.btnurl;
}
}
else {//修改
var tbarObj = scope.getTbarBtn(gridObj,'tbar_update');//获取请求地址
if(!tbarObj.disabled){
records = storeObj.getUpdatedRecords();//获取修改后的数据
url = tbarObj.btnurl;
}
}
if(records != null){
var result = [];
var columns = gridObj.columns;//获取列集合
for(var i = 0; i < records.length; i++){
var record = records[i];
var data = record.data;
var t = {};
for(var j = 0; j < columns.length; j++){
var dataIndex = columns[j].dataIndex;
t[dataIndex] = data[dataIndex];
}
result.push(Ext.JSON.encode(t));
}
zc.showMsgBox();//显示消息框
Ext.Ajax.request({//保存到数据库
url : zc.bp() + url,
params : {
str : result.join(';')
},
success : function(response, options){
zc.hideMsgBox();//隐藏消息框
Ext.MessageBox.alert('温馨提示','保存成功');
scope.refreshGridObj(gridObj);//刷新gridPanel对象
}
});
}
},
/**
*取消
**/
cancelObj : function(btn){
var scope = this;
var gridObj = scope.getGridObj(btn);//获取datagrid对象
var storeObj = gridObj.getStore();//获取Store对象
var storeCount = storeObj.getCount();//获取当前Store对象的个数
var sjStoreCount = scope.getStoreCount();//Store的实际个数
if(storeCount > sjStoreCount){//新增
var selectedRecords = scope.getSelectionObj(gridObj);//获取选中的行对象数组
var addRecords = storeObj.getNewRecords();//获取新增后的行对象数据
if(selectedRecords != null && selectedRecords.length > 0){ storeObj.remove(selectedRecords);//删除所有选中的行对象}
else{
storeObj.remove(addRecords);//删除所有新增的行对象
}
}
},
/**
*删除
**/
deleteObj : function(btn){
var scope = this;
var gridObj = scope.getGridObj(btn);//获取datagrid对象
var records = scope.getSelectionObj(gridObj);//获取选中行数组
if(records == null || records.length == 0){
Ext.MessageBox.alert('温馨提示','请勾选要删除的记录!');
return;
}
var ids = [];
Ext.each(records, function(record){//循环选中行数组获取每一条记录的唯一标识
var id = record.get('id');
ids.push(id);
});
var url = zc.bp() + btn.btnurl;
Ext.MessageBox.confirm('温馨提示','确定要删除勾选的记录吗？',function(btn,txt){
if(btn == 'yes'){
Ext.Ajax.request({
url : url,
params : {
str : ids.join(',')
},
success : function(response, options){
Ext.MessageBox.alert('温馨提示','删除成功');
scope.refreshGridObj(gridObj);//刷新gridPanel对象
}
});
}
});
},
/**
*刷新grid
*
*@param gridObj数据表格对象
*@param params请求参数
**/
refreshGridObj : function(gridObj,params){
var scope = this;
gridObj.getSelectionModel().deselectAll();//取消所有选中的行对
象
var storeObj = gridObj.store;//获取Store对象
storeObj.currentPage = 1;//设置为当前页
storeObj.on('beforeload', function (store, options) {//加载前设置参数
if(params != undefined && params != null){
storeObj.proxy.extraParams = params;
}
});
storeObj.load();//调用加载方法
},
/**
*获取grid对象
*
*@param btn按钮对象
**/
getGridObj : function(btn){
var gridObj = btn.up('gridpanel');//获取datagrid对象
return gridObj;
},
/**
*获取选中行数组
*
*@param btn按钮对象
**/
getSelectionObj : function(gridObj){
var records = gridObj.getSelectionModel().getSelection();//获取选中行数组
return records;
},
/**
*获取单元格编辑对象
**/
getPlugin : function(gridObj){
var editorPlugin = gridObj.getPlugin('view_test_TcodeoneRowView_pluginId');
return editorPlugin;
},
/**
*设置Store个数
**/
setStoreCount : function(storeCount){
var sctid = 'view_test_TcodeoneRowView_tbar_storeCount';
var sctObj = Ext.getCmp(sctid);
if(sctObj != undefined && sctObj != null){
Ext.getCmp(sctid).setValue(storeCount);
}
},
/**
*获取Store个数
**/
getStoreCount : function(){
return
Ext.getCmp('view_test_TcodeoneRowView_tbar_storeCount').getValue();
},
/**
*判断当前用户是否有操作权限
**/
getAuth : function(e){
var scope = this;
var gridObj = e.grid;
var rowIndex = e.rowIdx;//获取当前行的下标
var sjStoreCount = scope.getStoreCount();//Store的实际个数
if((rowIndex+1) > sjStoreCount){//新增的权限
var item = scope.getTbarBtn(gridObj,'tbar_add');
return !item.disabled;
}
else{//修改的权限
var item = scope.getTbarBtn(gridObj,'tbar_update');
var storeCount = gridObj.getStore().getCount();//获取当前Store对象的个数
if(storeCount > sjStoreCount){//新增时取消修改操作
return false;
}
return !item.disabled;
}
},
/**
*获取工具栏按钮
*
*@param gridObj grid对象
*@param actionname工具栏按钮的action属性
**/
getTbarBtn : function(gridObj,actionname){
var dockedItems = gridObj.getDockedItems('toolbar[dock="top"]')[0].items.items;
for(var i = 0; i < dockedItems.length; i++){
var item = dockedItems[i];
if(item.action == actionname){
return item;
}
}
}
});。