editorgridpanel(ExtJs学习笔记(4)_EditorGridPanel)
一、Extjs的 gridpanel 中ddGroup是干嘛用的
用来实现多个grid组合运用的情况比如两个grid之间的拖拽丢个实例
var newPickedUserId= [];
//delete store
var delPickedUserId= [];
var unpickedPeopleGrid= new Ext.grid.GridPanel({
ddGroup:'unpickedPeopleGridDDGroup',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'loadunUserRole.action'}),
reader: new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'role'
}, [
{name:'id',mapping:'id',type:'string'},
{name:'uname',mapping:'uname',type:'string'},
{name:'fcd',mapping:'fcd',type:'date',dateFormat:'Y-m-dTH:i:s'},
{name:'fcp',mapping:'fcp',type:'string'}
])
}),
columns: [{
header:'编号',
dataIndex:'id',
width: 40
},{
header:'权限名称',
dataIndex:'uname'
},{
header:'创建人',
width:70,
dataIndex:'fcp'
},{
header:'创建时间',
dataIndex:'fcd',
type:'date',
width: 120,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
}],
enableDragDrop: true,
stripeRows: true,
width: 350,
region:'west',
title:'未选择的角色',
viewConfig:{
forceFit:true
},
loadMask:{
msg:'数据加载中...'
}
});
// user配置
var pickedPeopleGrid= new Ext.grid.GridPanel({
name:'pickedPeopleGrid',
ddGroup:'pickedPeopleGridDDGroup',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'loadUserallRole.action'}),
reader: new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'role'
}, [
{name:'id',mapping:'id',type:'string'},
{name:'uname',mapping:'uname',type:'string'},
{name:'fcd',mapping:'fcd',type:'date',dateFormat:'Y-m-dTH:i:s'},
{name:'fcp',mapping:'fcp',type:'string'}
])
}),
columns: [{
header:'编号',
dataIndex:'id',
width: 40
},{
header:'权限名称',
dataIndex:'uname'
},{
header:'创建人',
width:70,
dataIndex:'fcp'
},{
header:'创建时间',
dataIndex:'fcd',
type:'date',
width: 120,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
}],
enableDragDrop: true,
stripeRows: true,
width: 350,
region:'center',
title:'已选择角色',
viewConfig:{
forceFit:true
},
loadMask:{
msg:'数据加载中...'
}
});
var userConfigureWin= new Ext.Window({
id:'userConfigureWin',
title:'用户授权',
closeAction:'hide',
height: 400,
width: 700,
layout:'border',
modal: true,
plain: true,
el:'win_configroleuser',
items: [pickedPeopleGrid, unpickedPeopleGrid],
buttons: [{
text:'提交',
handler: function(){
var selection= grid.getSelectionModel().getSelections();
var record= selection[0];
if(delPickedUserId.length== 0&& newPickedUserId.length== 0){
Ext.Msg.alert('提示','您的配置结果和初始值一致，无需提交');
return;
}
Ext.Ajax.request({
url:'updatePeopleRole.action',
method:'post',
success: function(form, action){
Ext.Msg.alert('提示','操作成功！');
userConfigureWin.hide();
onRowDblClick();
pickedPeopleGrid.getStore().removeAll();
unpickedPeopleGrid.getStore().removeAll();
delPickedUserId.length= 0;
newPickedUserId.length= 0;
},
failure: function(form, action){
Ext.Msg.alert('提示','操作失败！');
},
params:{
deleted: delPickedUserId,
added: newPickedUserId,
id: record.get("id")
}
});
}
},{
text:'复位',
handler:function(){
var selection= grid.getSelectionModel().getSelections();
var record= selection[0];
pickedPeopleGrid.getStore().removeAll();
unpickedPeopleGrid.getStore().removeAll();
pickedPeopleGrid.getStore().load({
params:{id: record.get('id')},
callback: function(r,options,success){
if(!success){
Ext.Msg.alert('提示','持有角色人员数据加载失败!');
userConfigureWin.hide();
}
}
});
unpickedPeopleGrid.getStore().load({
params:{id: record.get('id')},
callback: function(r,options,success){
if(!success){
Ext.Msg.alert('提示','未持有角色人员数据加载失败!');
userConfigureWin.hide();
}
}
});
userConfigureWin.setTitle("配置<font color=green>“"+record.get('uname')+"”</font>角色用户");
delPickedUserId.length= 0;
newPickedUserId.length= 0;
}
},{
text:'关闭',
handler: function(){
//Ext.Msg.alert('提示','addids:'+ newPickedUserId.toString()+', delids:'+ delPickedUserId.toString());
userConfigureWin.hide();
delPickedUserId.length= 0;
newPickedUserId.length= 0;
}
}]
});
userConfigureWin.render(); var pickedUserGridDropTargetEl= pickedPeopleGrid.getView().el.dom.childNodes[0].childNodes[1];
var pickedUserGridDropTarget= new Ext.dd.DropTarget(
pickedUserGridDropTargetEl,{
ddGroup:'unpickedPeopleGridDDGroup',
copy: true,
notifyDrop: function(ddSource, e, data){
function addRow(record, index, allItems){
pickedPeopleGrid.getStore().add(record);
ddSource.grid.store.remove(record);
var length= delPickedUserId.length;
delPickedUserId.remove(record.data.id);
if(length== delPickedUserId.length){
newPickedUserId.push(record.data.id);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections, addRow);
return(true);
}
});
// This will make sure we only drop to the view container
var unpickedUserGridDropTargetEl= unpickedPeopleGrid.getView().el.dom.childNodes[0].childNodes[1];
var unpickedUserGridDropTarget= new Ext.dd.DropTarget(
unpickedUserGridDropTargetEl,{
ddGroup:'pickedPeopleGridDDGroup',
copy: false,
notifyDrop: function(ddSource, e, data){
function addRow(record, index, allItems){
unpickedPeopleGrid.getStore().add(record);
ddSource.grid.store.remove(record);
var length= newPickedUserId.length;
newPickedUserId.remove(record.data.id);
if(length== newPickedUserId.length){
delPickedUserId.push(record.data.id);
}
}
Ext.each(ddSource.dragData.selections, addRow);
return(true);
}
});
二、extjs EditorGridPanel 明明设置了 clicksToEdit :1 可是不灵
不知道你出于什么目的要设置editor但是又要让这个字段不能编辑,如果仅仅是防止数据被修改,则在grid的afteredit事件中每次修改后再设成原值即可,或者为了格式化数据,添加column的renderer即可,例:
header:'列1', dataIndex:'col1', editable: false,
renderer: function(value, meta, rec){
meta.attr='style="text-align: right;"';
return Ext.util.Format.number(value,'0,000.00');
}
限制输入正整数要分为两部分, numberfield设置allowDecimals: false不允许输入小数,在grid的afteredit事件中判断该值小于0则设成原值或提示
三、extjs grid.Panel 局部刷新
我的处理方法是前台轮询查询最新变更数据。
利用Ext.util.TaskRunner()
var task={
run: function(){
//更新表格部分数据，循环体
//这里需要获取后台变更的最新数据。然后根据这些数据修改当前表格中的数。
//获取需要修改的记录：var record= store.getById(数据ID);
//修改列的值： record.set(参数一：列数据源，即dataindex,参数二：更新后的值);
},
interval: 1000//一秒执行一次
}
var runner= new Ext.util.TaskRunner();
runner.start(task);