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());

});