18.1分组表格的使用
先看一个例子:
Ext.onReady(function() {
Ext.QuickTips.init();
// data for grid
var data = [
[1,"张三",20,"man"],
[2,"里斯",22,"man"],
[3,"李四",24,"man"],
[4,"丽丝",25,"woman"],
[5,"王五",26,"man"],
[6,"王武",26,"man"],
[7,"周瑜",27,"man"],
[8,"小乔",27,"woman"],
[9,"罗密欧",27,"man"],
[10,"朱丽叶",28,"woman"]
];
// array reader
var reader =new Ext.data.ArrayReader({},[
{name:"id",type:"int"},
{name:"name"},
{name:"age",type:"int"},
{name:"sex"}
]);
// grid
vargrid = newExt.grid.GridPanel({
title:"分组表格",
columns:[
{header:"编号",dataIndex:"id",sortable:true},
{header:"名字",dataIndex:"name"},
{header:"年龄",dataIndex:"age",sortable:true},
{header:"性别",dataIndex:"sex",sortable:true}
],
store:newExt.data.GroupingStore({
data:data,
reader:reader,
groupField:"sex",// 分组字段,即根据性别分组
sortInfo:{// sortInfo要求必须配置
field:"id", //排序字段
direction:"ASC"// 升序排列
}
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
renderTo: document.body,
//height:350,
view:newExt.grid.GroupingView({
forceFit:true,// 自动扩充各列以填满表格
//groupTextTpl:'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" :"Item"]})'
groupTextTpl:"{text}({values.rs.length}条数据)"//分组显示内容。
})
});
});
效果:
解析:1.定义了一组数据data
2.使用GroupingStore,对“性别”列进行分组,而且根据id进行升序排列
3.而且为了显示的效果是这样的,还必须在GridPanel中配置View为Ext.grid.GroupingView。
否则显示的效果就是这样的:
再GroupingView中:
groupTextTpl:"{text}({values.rs.length}条数据)",这个看截图应该就明白了,分组显示时显示此分组有多少条数据。
groupTextTpl:'{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" :"Item"]})',这个意思也很明显,就是如果某个分组的记录只有1条,则显示’XItem’,否则,显示’XXItems’。
18.2分组表格常用功能
现在添加4个按钮,分别实现:展开所有分组、收缩所有分组、自动展开或收缩所有分组、自动展开或伸缩某个分组。
代码:
首先,再HTML中添加4个BUTTON。
<inputtype="button"id="one"value="ExpandAll"/>
<inputtype="button"id="two"value="CollapseAll"/>
<inputtype="button"id="three"value="Toggle"/>
<inputtype="button"id="four"value="ToggleOne"/>
然后在js中添加Click事件处理。
// 增加4各按钮实现展开、收缩所有分组或单个分组。
// 展开所有分组
Ext.get("one").on("click",function() {
// get GroupingView
var view = grid.getView();
view.expandAllGroups();
});
// 关闭所有分组
Ext.get("two").on("click",function() {
// get GroupingView
var view = grid.getView();
view.collapseAllGroups();
});
// 自动展开或收缩所有分组
Ext.get("three").on("click",function() {
// get GroupingView
var view = grid.getView();
view.toggleAllGroups();
});
// 自动展开或收缩某个分组
Ext.get("four").on("click",function() {
// get GroupingView
var view = grid.getView();
var groupId = view.getGroupId("woman");
view.toggleGroup(groupId);
});
18.3拖动改变表格大小
在表格render后,添加Resizable。
// 让表格可以拖动改变大小
var resize =new Ext.Resizable(document.body,{
minHeight:100, // 拖动最小高度100
handles: 'all', // 可以向各个方向拖动
pinned:true,//true:会一直显示可以拖动的提示;false:鼠标移上去才显示
wrap:true //为TRUE会再表格外包裹一层div
});
// 触发resize事件,表格调用syncSize改变自身大小。Grid为作用scope。
resize.on("resize",grid.syncSize,grid);
document.body:可以拖动的区域。
Handles:拖动的方向。All:所有方向。N:北,S:南,E:东,W:西。Nw:西北,sw:西南,se:东南,ne:东北。东、南、西、北分别对应上、下、左、右。
18.4在同一个表格里拖放数据
表里面的数据都是以行为单位,因此这里也是指行之间的拖放。
A. 将GridPanel中enableDragDrop设置为true。
此时拖动是这样的:
可以看到,这样是不能拖放的。因为没有设置拖放的DropTarget,不知道往哪儿放数据。
B. 将表格容器设置为DropTarget,让数据在表格内拖放。
vardropTarget= newExt.dd.DropTarget(grid.container,{
ddGroup:"groupingGroup",
copy:false,
notifyDrop:function(dd,e,sd) {//DragSource,Event,Object(包含拖放的数据)
//获取拖放的行
var rows = sd.selections;
//alert(rowsinstanceofArray);//Record数组
//拖动到第几行
var rowIndex =dd.getDragData(e).rowIndex;
if (typeof(rowIndex) =='undefind') {
return;
}
for (vari=0;i<rows.length;i++) {
var row = rows[i];
//alert(rowinstanceofExt.data.Record);//true
if (!this.copy) {// copy:false,表示删除原数据
store.remove(row);
}
}
//插入到拖放的位置,一次可以插入多行Records
store.insert(rowIndex,rows);
}
});
在Grid中增加ddGroup配置(默认值是GridDD),DropTarget中ddGroup要与Grid中一致,这样才能把数据拖放到表格上。
DropTarget中copy:false表示删除,即将数据拖放到新位置后,删除原来位置的数据。
拖放事件触发时会调用notifyDrop()方法,该方法有3各参数:DropSource,Event,Object(包含拖放数据)。
通过这3个参数可以获取拖放的数据,拖放到哪一行。然后判断是否是copy,如果为TRUE,则直接将拖放的数据insert到被拖放位置;如果不是copy,则先删除被拖放的数据,然后insert数据到被拖放到的位置。
效果:
首先呢,拖放时显示的是OK图标,表示可以拖放。
看看拖放后的效果:
我将第一行数据拖放到第7行后面:
18.5表格之间数据拖放
代码:
/**
*表格与表格之间数据拖放。
*2个表格的ddGroup需要一样,这样才可以将一个表格上的数据拖放到令一个表格。
*/
Ext.onReady(function() {
// data for grid
var data1 = [
[2,"里斯",22,"man"],
[3,"李四",24,"man"],
[4,"丽丝",25,"woman"],
[5,"王五",26,"man"],
[6,"王武",26,"man"],
[7,"周瑜",27,"man"],
[8,"小乔",27,"woman"],
[9,"罗密欧",27,"man"],
[10,"朱丽叶",28,"woman"]
];
var data2 = [[1,"张三",20,"man"]];
// array reader
var reader =new Ext.data.ArrayReader({},[
{name:"id",type:"int"},
{name:"name"},
{name:"age",type:"int"},
{name:"sex"}
]);
varstore1= new Ext.data.Store({
data:data1,
reader:reader
});
var store2 =new Ext.data.Store({
data:data2,
reader:reader
});
// 创建2个表格。
var grid1 =new Ext.grid.GridPanel({
id:"grid1",
title:"Grid1",
viewConfig:{
forceFit:true
},
columns:[
{header:"编号",dataIndex:"id",sortable:true},
{header:"名字",dataIndex:"name"},
{header:"年龄",dataIndex:"age",sortable:true},
{header:"性别",dataIndex:"sex",sortable:true}
],
store:store1,
frame:true,
width: 500,
height:200,
collapsible: true,
animCollapse: false,
enableDragDrop :true,
renderTo: "grid1",
ddGroup:"groupingGroup"
});
var grid2 =new Ext.grid.GridPanel({
id:"grid2",
title:"Grid2",
viewConfig:{
forceFit:true
},
columns:[
{header:"编号",dataIndex:"id",sortable:true},
{header:"名字",dataIndex:"name"},
{header:"年龄",dataIndex:"age",sortable:true},
{header:"性别",dataIndex:"sex",sortable:true}
],
store:store2,
frame:true,
width: 500,
height:200,
collapsible: true,
animCollapse: false,
enableDragDrop :true,
renderTo: "grid2",
ddGroup:"groupingGroup"
});
// 拖放处理
// 将grid2的数据拖放到grid1上的拖放处理
vardropTarget1 = new Ext.dd.DropTarget(grid1.container,{
ddGroup:"groupingGroup",
copy:false,
notifyDrop:function(ds,e,data) {
//拖动的数据
var rows = data.selections;
//拖放到多少行
var rowIndex = ds.getDragData(e).rowIndex;
//如果grid1只有1行,我拖放的位置是2,那么返回的rowIndex就是undefined。
//这种情况下,我们应该让它把数据插入到第一行。
if (typeof(rowIndex) =='undefined') {
rowIndex = store1.getCount()==0?0:store1.getCount();
}
for (var i=0;i<rows.length;i++) {
var row = rows[i];
if (!this.copy) {
// store1和store2保存的是不同的数据,如果拖放的数据在store1中,说明是从grid2拖放到grid1或者grid1行间拖放。
//正常情况下,即2个表格之间的拖放,从grid1拖放到grid2,则应该删除store1中的数据。
//但是如果同一个表格之间拖放呢?因为数据不同,所以,拖放的数据跟哪个store相同,则应该从那个Store中清除。
if(store2.indexOf(row) != -1) {// -1表明没有找到。
store2.remove(row);// 将grid2中的数据删除
}
else {
store1.remove(row); // 将grid2中的数据删除
}
}
}
store1.insert(rowIndex,rows);// 将拖放的数据insert到grid1
}
});
// 将grid1的数据拖放到grid2上的拖放处理
vardropTarget2 = new Ext.dd.DropTarget(grid2.container,{
ddGroup:"groupingGroup",// 需要与grid1一样
copy:false,
notifyDrop:function(ds,e,data) {
//拖动的数据
var rows = data.selections;
//拖放到多少行
var rowIndex = ds.getDragData(e).rowIndex;
if (typeof(rowIndex) =='undefined') {
rowIndex =store2.getCount()==0?0:store2.getCount();
}
for (var i=0;i<rows.length;i++) {
var row = rows[i];
if (!this.copy) {
if (store1.indexOf(row) !=-1) {
store1.remove(row); // 将grid1中的数据删除
}
else {
store2.remove(row);// 将grid1中的数据删除
}
}
}
store2.insert(rowIndex,rows);// 将拖放的数据insert到grid2
}
});
});
效果:
这是初始的样子,现在将Grid1中的2,3,4这3条数据拖放到Grid2
这里的拖放包含2种情况:
1. grid1与grid2之间的拖放。
2. 同一个表格行间的拖放。
因为2个表格的数据是不同的,因此拖放的数据包含在哪个store,就应该从哪个store中删除。
很明显,如果是表格1与表格2之间的拖放,则应该删除表格1的数据,insert到表格2;如果是同一个表格的拖放,则应先删除再insert。
18.6表格与树之间的拖放
18.7Grid与右键菜单
Grid提供了4个与右键菜单相关的事件:
事件 |
参数 |
说明 |
Contextmenu |
Ext.EventObject e |
全局性的右键菜单事件 |
Cellcontextmenu |
Grid this,Number rowIndex,Number cellIndex,Ext.EventObject e |
单元格右键菜单事件 |
Rowcontextmenu |
Grid this,Number rowIndex,Ext.EventObject e |
行右键菜单事件 |
Headercontextmenu |
Grid this,Number cellIndex,Ext.EventObject e |
表头右键菜单事件 |
对4种右键菜单事件的处理参考:
var contextmenuEventHandler =function() {
};
// 添加右键菜单
var contextmenu =new Ext.menu.Menu({
items:[
{
text:'查看详细信息',
handler:function() {
if(contextmenuEventHandler.eventType == 0) {//contextmenu
Ext.Msg.show({
title:'提示',
msg:"全局右键菜单"
});
}
elseif(contextmenuEventHandler.eventType== 1){// rowcontextmenuvar grid =contextmenuEventHandler.grid;
var rowIndex =contextmenuEventHandler.rowIndex;
var record =grid.getStore().getAt(rowIndex);
var propertyGrid =newExt.grid.PropertyGrid({
title:"详细信息",
width:500,
autoHeight:true,
renderTo:grid.id,
source:{
"ID":record.data.id,
"NAME":record.data.name,
"AGE":record.data.age,
"SEX":record.data.sex
},
tbar:new Ext.Toolbar({
items:[{
text:"Close",
handler:function() {
propertyGrid.hide();
}
}]
})
});
}
elseif(contextmenuEventHandler.eventType == 2) {// cellcontextmenu
vargrid =contextmenuEventHandler.grid;
varrowIndex =contextmenuEventHandler.rowIndex;
varcellIndex =contextmenuEventHandler.cellIndex;
Ext.Msg.show({
title:"提示",
msg:"单元格右键菜单事件"
}) ;
}
elseif(contextmenuEventHandler.eventType == 3) {// headercontextmenu
vargrid =contextmenuEventHandler.grid;
var columnIndex =contextmenuEventHandler.columnIndex;
Ext.Msg.show({
title:"表头右键菜单事件",
msg:"columnIndex:"+ columnIndex
});
}
}
}
]
});
/*grid.on("contextmenu",function(e){
e.preventDefault(); // 阻止弹出默认浏览器菜单
contextmenuEventHandler.eventType = 0;
contextmenu.showAt(e.getXY());
});*/
grid.on("rowcontextmenu",function(grid,rowIndex,e) {
e.preventDefault(); // 阻止弹出默认浏览器菜单
grid.getSelectionModel().selectRow(rowIndex);
contextmenuEventHandler.eventType = 1;
contextmenuEventHandler.grid = grid;
contextmenuEventHandler.rowIndex =rowIndex;
contextmenu.showAt(e.getXY());
});
/*grid.on("cellcontextmenu",function(grid,rowIndex,cellIndex,e){
e.preventDefault(); // 阻止弹出默认浏览器菜单
contextmenuEventHandler.eventType = 2;
contextmenuEventHandler.grid = grid;
contextmenuEventHandler.rowIndex =rowIndex;
contextmenuEventHandler.cellIndex =cellIndex;
contextmenu.showAt(e.getXY());
});*/
grid.on("headercontextmenu",function(grid,columnIndex,e){
e.preventDefault(); // 阻止弹出默认浏览器菜单
contextmenuEventHandler.eventType = 3;
contextmenuEventHandler.grid = grid;
contextmenuEventHandler.columnIndex =columnIndex;
contextmenu.showAt(e.getXY());
});
相关推荐
Ext表格控件和树控件,请关注后续发布,不断更新中
无论是界面之美,还是功能之强,ext的表格控件都高居榜首。
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子
Ext的gridpanel控件二次加载时丢失解决方案
基于EXT2.0.2表格间数据拖拽。并提示拖拽数据实现
很好很全,易懂易学!关于extjs表格控件的使用,适用于初学者,有需要的可以下。
带动Ext.DateTimePicker设置 * 4,增加时期时间选择器变动时的样式变化功能 * 5,解决GRID中使用时,同列同对象间值影响的问题 * 6,解决原组件,点击today按钮时,无法回到选择器当日界面的问题 */ 另外此控的时分...
一款挺不错的UI控件,值得收藏,由国人编写,界面类似于EXT,但要比EXT小的多
Ext 实现自定义控件,就是用EXT自己扩展控件
Ext的扩展控件,树形表格。!!!! Ext的扩展控件,树形表格。!!!!
Ext日期时间控件 Spiiner控件及其它Ext代码
EXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rarEXT dojoChina按钮控件示例 Ext.Button.rar
Ext 编辑表格视频教程
extjs4 日期时间控件 包括的样式有 年月的选择 年月日的选择 年月日时间的选择
Ext表格分组并且带有统计功能的完整例子
ext asp.net控件 Ext是一个强大的AJAX开源代码。本控件是集成了Ext的ASPNET控件
ext2.3 各个控件的详细例子,有静态页
ext日期时间控件精确到时分秒,欢迎下载...................
ext3.0中的99%的控件的用法。包括表格。表单。分页工具栏。图标等。非常的详细。可以直接运行!
EXT 时间控件 EXT 时间控件EXT 时间控件