ExtJS_FAQ_Grid#Behavior

前言,学习ExtJS Grid的新手,官方的这篇FAQ是必读的.

顺手翻译了一小点,大概了解就ok了,挺生硬的,呵呵...

 

翻译自:http://extjs.com/learn/Ext_FAQ_Grid#Behavior

 

5.行为

 

5.1 单元格的链接

 

>方法1: 自定义渲染方法

var yourColumn = {


   header: "Company",


   dataIndex: 'company',


   renderer: function(value, metaData, record, rowIndex, colIndex, store) {


      //在这里面可以按你自己的逻辑组成html然后返回


      return '<a href="http://www.yourURL.com/" target="_blank">'


             + value +'</a>';


   }


}

 

>方法2: 监听Ext.grid.RowSelectionModel的rowselect事件

function handleRowSelect(selectionModel, rowIndex, selectedRecord) {


    //assuming the record has a field named 'url' or build it as you need to


    var url = selectedRecord.get('url');


    //if you want to open another window


    window.open(url);


}


grid.getSelectionModel().on('rowselect', handleRowSelect);

 

5.2 为特殊的单元格添加点击事件

 

>除了下面将介绍的方法外,你还可以考虑下Saki提供的扩展:rowactions和cellactions,在http://www.extjs.eu 可找到

 

>如果你用的是编辑表格,则默认的选择模型是cell selection model,所以你可以监听beforecellselect和cellselect事件.

  它会传递点击的行和列的index。其中行index可以用来找到点击的field。(需要注意,用户有可能会对行进行排序,所以直接用行index来寻找field是不安全的,最好用id来索引)

 

>对Grid的cellclick事件添加一个监听器

当点击的时候,传递row index 和column index 给监听器。其中column index可以用来确定是点击的是哪个field。
(用户有可能会对改变行的位置,如拖拽,所以用column index作为field index是不安全的)

 

cellclick事件的处理函数可以如下代码,找到一些相关的信息:

function(grid, rowIndex, columnIndex, e) {


        // Get the Record for the row


        var record = grid.getStore().getAt(rowIndex);


        // Get field name for the column


        var fieldName = grid.getColumnModel().getDataIndex(columnIndex);


        var data = record.get(fieldName);


    }

 

>一个用cellclick事件切换单元格颜色的例子: http://extjs.com/forum/showthread.php?p=119718#post119718

 

>change the CSS so all cells look like an editor is active, e.g.

.x-grid3-row td.x-grid3-td-<id-of-column> {


	background-color: white;


	padding: 0;


}


.x-grid3-row td.x-grid3-td-<id-of-column> .x-grid3-cell-inner {


	border: 1px solid #a9bfd3;


	padding: 2px 3px 2px 5px;


}

 

5.3 如何添加/删除表格的某几列

   参见http://extjs.com/forum/showthread.php?p=308635#post308635

 

5.4 如何为每行记录都添加一个操作列

 

>方法1:

1)Use the array grid example in your packaged download array-grid.js

以自带例子里面的array-grid.js来示范

 

2)Add an extra column to the column model definition and a custom rendere

添加额外的一列

{header: "Controls", 
width: 60, 
sortable: false, 
renderer: function() {
    return '<div class="controlBtn">
            <img src="../shared/icons/fam/cog_edit.png"
            width="16" height="16" 
            class="control_edit">
            <img src="../shared/icons/fam/folder_go.png"
            width="16" height="16"
            class="control_go"></div>';
}, 
dataIndex: 'company'}

 

3)Then you would setup an event handler on the click event.

添加事件处理函数

grid.on('click', function(e) {
        var btn = e.getTarget('.controlBtn');        
        if (btn) {
            var t = e.getTarget();
            var v = this.getView();
            var rowIdx = v.findRowIndex(t);
            var record = this.getStore().getAt(rowIdx);            
            var control = t.className.split('_')[1];
            switch (control) {
                case 'edit':
                    console.log('edit this record - ' + record.id);
                    break;
                case 'go':
                    console.log('go to this record - ' + record.id);
                    break;
            }            
        }
    }, grid);

 

4)Add the following CSS rule in array-grid.html to give some padding and change the cursor.

<style>
   .controlBtn img {
      padding-left: 4px;
      cursor: pointer;
   }
</style>

 

 

5)Using this same method you could add as many tools as you would like in the controls section and always give them the css class "controls_{toolname}". Ideally you would break this out into an XTemplate so that you could simply pass in whatever tools you would like to use and output them on the grid as well.

 

 

>方法2:

使用RowAction这个扩展 http://extjs.com/forum/showthread.php?t=24508