ExtJS Grid 滚动到指定Record+选择多行

ExtJS Grid操作技巧

最新推荐文章于 2021-09-06 16:24:23 发布

最新推荐文章于 2021-09-06 16:24:23 发布 · 820 阅读

文章标签：

#EXT #单元测试

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了如何使用ExtJS实现Grid的多种操作，包括滚动到指定记录、选择指定行、取消选择记录以及设置单元格换行等。通过示例代码详细展示了自定义方法和使用内置方法的对比。

如下:示例代码是对某个特定的对象,如果需要全局,自己Extend吧.

1.滚动Grid到指定的Record

代码:

      viewConfig:{
        forceFit: true,
        deferEmptyText: true,
        emptyText: "无相关数据",

        //滚动Grid到指定的Record
        scrollToRecord:function(record){
          var index = this.grid.getStore().indexOf(record);
          this.scrollToRow(index);
        },

        //滚动Grid到指定的列
        scrollToRow:function(rowIndex){
          var firstRow = Ext.get(this.getRow(0));
          var row = Ext.get(this.getRow(rowIndex));
          var distance = row.getOffsetsTo(firstRow)[1];
          this.scroller.dom.scrollTop = distance;
        }
      }

注: GridView源码里面有几个方法似乎也可以做到,不过临时测试了下没有用,记录下,以后有空看看:

focusRow,resolveCell,getResolvedXY,syncFocusEl,ensureVisible

09.07.15补记 , 测试了下focusRow,也可以滚动,不过似乎是把这个记录滚动到可视区域就ok了,不一定会显示为可视区域内的第一条,示例代码如下:

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '/images/s.gif';
  Ext.QuickTips.init();
  testGridViewScroll();
});

function testGridViewScroll(){
  var arr = [];
  for(var i=0;i<100;i++){
    arr.push({id:i,name:'item'+i});
  }
  var grid = new Ext.grid.GridPanel({
    title:'测试滚动条',
    autoScroll: true,
    columnLines:true,
    height:300,
    width:600,
    renderTo:document.body,
    viewConfig:{
      forceFit: true,
      deferEmptyText: true,
      emptyText: "无相关数据",
      //我自定义的滚动方法
      //滚动Grid到指定的Record
      scrollToRecord:function(record){
        var index = this.grid.getStore().indexOf(record);
        this.scrollToRow(index);
      },
      //滚动Grid到指定的列
      scrollToRow:function(rowIndex){
        var firstRow = Ext.get(this.getRow(0));
        var row = Ext.get(this.getRow(rowIndex));
        var distance = row.getOffsetsTo(firstRow)[1];
        this.scroller.dom.scrollTop = distance;
      }
    },
    store:new Ext.data.JsonStore({
      root:'data',
      fields:['id','name']
    }),
    columns:[
      {header:'ID',dataIndex:'id'},
      {header:'名称',dataIndex:'name'}
    ],
    sm:new Ext.grid.RowSelectionModel(),
    tbar:[
      '滚动到',
      {xtype:'textfield',value:'25',id:'rowNum'},
      '行','-',
      {
        text:'内置滚动方法!',
        style: 'text-decoration: underline;',
        handler:function(btn,e){
          var rowNum = parseInt(Ext.get('rowNum').getValue());
          grid.getSelectionModel().selectRow(rowNum);
          //内置的滚动方法
          grid.getView().focusRow(rowNum);
        }
      },{
        text:'自定义滚动方法!',
        style: 'text-decoration: underline;',
        handler:function(btn,e){
          var rowNum = parseInt(Ext.get('rowNum').getValue());
          grid.getSelectionModel().selectRow(rowNum);
          grid.getView().scrollToRow(rowNum);
        }
      }
    ]
  });
  grid.getStore().loadData({data:arr});
}

2.选择指定的几行

代码:

//测试数据
var idArr = '1,5,6,7'.split(',');

//找到对应的测试项结果Records
var recordArr = grid.getStore().queryBy(function(r,id){
  //判定是否是指定的record
  return idArr.indexOf(r.get('testLogId'))!=-1;
 },this).getRange();

//选中这些记录
grid.getSelectionModel().selectRecords(recordArr,true);

3.取消选择指定Record的行

代码:

      sm:new Ext.grid.RowSelectionModel({
        //光有selectRecords...于是自己扩展一个
        deselectRecords : function(records, preventViewNotify){
            var ds = this.grid.store;
            for(var i = 0, len = records.length; i < len; i++){
                this.deselectRow(ds.indexOf(records[i]), preventViewNotify);
            }
        }
      })

4.单元格换行

代码:

.x-grid3-cell-inner {  
      /*内容长的时候换行*/  
      white-space:normal !important;  
}

---