Ext分组表格控件——Group

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){//
rowcontextmenu                            var 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());
});