Grid用法
属性表格——PropertyGrid(只要两个值:key和value,即:列的名称和具体的值)
var grid = new Ext.grid.PropertyGrid({
title: '属性表格',
autoHeight: true,
width: 300,
renderTo: 'grid',
source: {
"名字": "不告诉你",
"创建时间": new Date(Date.parse('12/15/2007')),
"是否有效": false,
"版本号": .01,
"描述": "嗯，估计没啥可说的"
}
});
禁止对属性进行编辑：(只能看不能动)
grid.on("beforeedit", function(e){
e.cancel = true;
return false;
});
获取属性表格的值：
Ext.Msg.alert('名字', grid.store.getById('名字').get('value')); //弹出警告框，是对应key所对应的value
设置时间选择：
customEditors: {
'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
}//TimeField，可以自己再source中设置开始的时间（如：Start Time：‘10:00 AM’）
表格分组：
var store = new Ext.data.GroupingStore({
reader: reader,
data: data,
groupField: 'sex', //按性别分组
sortInfo: {field: 'id', direction: "ASC"}//如何排序的对象，分组后，每组按id进行升序排列显示
});
view: new Ext.grid.GroupingView(),//获得Ext.grid.GroupingView的实例
grid.getView().expandAllGroups(); //展开所以分组
grid.getView().collapseAllGroups();//折叠所有分组
grid.getView().toggleAllGroups();//自动判断分组的状态
可以拖拉调整大小的表格：
var rz = new Ext.Resizable(grid.getEl(), {
wrap: true, //在构造Resizable时自动在制定的id的外边包裹一层div
minHeight:100, //限制改变的最小的高度
maxHeight:200,
pinned:false, //控制可拖动区域的显示状态，false是鼠标悬停在拖拉区域上才出现
handles: 's'//设置拖拉的方向（n,s,e,w,all...）
});
rz.on('resize', grid.syncSize, grid);//注册事件(作用:将调好的大小传个scope执行)
可以拖拉行，在同一个表中拖动
enableDragDrop: true//设置允许拖动行
设置DropTarget：
var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'GridDD',
copy : false,//拖动是否带复制属性
notifyDrop : function(dd, e, data) { //对应的函数处理拖放事件
// 选中了多少行
var rows = data.selections;
// 拖动到第几行
var index = dd.getDragData(e).rowIndex;
if (typeof(index) == "undefined") {
return;
}
// 修改store
for(i = 0; i < rows.length; i++) {
var rowData = rows[i];
if(!this.copy) store.remove(rowData);
store.insert(index, rowData);
}
}
});
表格与右击菜单
var contextmenu = new Ext.menu.Menu({
id: 'theContextMenu',
items: [{
text: '查看详情',
handler: function(){
写点击后要执行的函数，可以类似于：//Ext.Msg.alert('详情','ExtJs的表格右击事件');
}
}]
});
grid.on("rowcontextmenu", function(grid, rowIndex, e){
e.preventDefault();//防止浏览器弹出默认的右键菜单
grid.getSelectionModel().selectRow(rowIndex);//调用
contextmenu.showAt(e.getXY());//右击显示现在自己的菜单
});
