ExtJs 扩展类CheckColumn的使用

/*!
 * Ext JS Library 3.1.1
 * Copyright(c) 2006-2010 Ext JS, LLC
 * [email protected]
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux.grid');
/**
 * @class Ext.ux.grid.CheckColumn
 * @extends Object
 * GridPanel plugin to add a column with check boxes to a grid.
 * <p>Example usage:</p>
 * <pre><code>
// create the column
var checkColumn = new Ext.grid.CheckColumn({
   header: 'Indoor?',
   dataIndex: 'indoor',
   id: 'check',
   width: 55
});
// add the column to the column model
var cm = new Ext.grid.ColumnModel([{
       header: 'Foo',
       ...
    },
    checkColumn
]);
// create the grid
var grid = new Ext.grid.EditorGridPanel({
    ...
    cm: cm,
    plugins: [checkColumn], // include plugin
    ...
});
 * </code></pre>
 * In addition to storing a Boolean value within the record data, this
 * class toggles a css class between <tt>'x-grid3-check-col'</tt> and
 * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
 * a column.
 */
Ext.ux.grid.CheckColumn = function(config){
    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};
Ext.ux.grid.CheckColumn.prototype ={
    init : function(grid){
        this.grid = grid;
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('mousedown', this.onMouseDown, this);
        }, this);
    },
    onMouseDown : function(e, t){
        if(Ext.fly(t).hasClass(this.createId())){
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            var value = record.data[this.dataIndex];
         switch(value)
         {
             case 'Y':
               value = 'N';
               break;
             case 'N':
               value = 'Y';
               break;
             default:
               value = !value;
         }
            record.set(this.dataIndex, value);
        }
    },
    renderer : function(v, p, record){
     p.css += ' x-grid3-check-col-td'; 
     return String.format('<div class="x-grid3-check-col{0} {1}">&nbsp;</div>',   v=='Y' || v== true ? '-on' : '', this.createId());
    },
    
    createId : function(){
        return 'x-grid3-cc-' + this.id;
    }
};
// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
 
//下面这个是页面文件也贴出来,当时做这个模块的时候也差了不少资料,与人分享,才会快乐。

<%@ page language="java" pageEncoding="UTF-8" %> <%@ include file="/WEB-INF/views/common/head.jsp" %> <title></title> <!-- Extjs导入 --> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/common_viewport.css" type="text/css"> </link>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/list_viewport.js"> </script> <script type="text/javascript" src="${pageContext.request.contextPath}/extjs/ux/CheckColumn.js"> </script>

<style type="text/css"> .store-info { background: url('${pageContext.request.contextPath}/imgs/store-info.gif') left top no-repeat; } body { font-size: 12px; } </style> <script type="text/javascript"> Ext.onReady(function(){ var adminColumn = new Ext.grid.CheckColumn({ header: '系统管理员维护?', dataIndex: 'sfxtwh', width: 100 }); var studentUpdColumn = new Ext.grid.CheckColumn({ header: '学生可改?', dataIndex: 'sfkxg', id:'_student_update', width: 80 }); var studentAllowBlankColumn = new Ext.grid.CheckColumn({ header: '学生必填?', dataIndex: 'sfbt', id:'_student_allow', width: 80 }); //列表数据对象 var dataStore = new Ext.data.JsonStore({ autoDestroy: true, //autoLoad:true, pruneModifiedRecords: true, root:'dataList', totalProperty:'totalCount', url: contextPath+'/xg/zdsz/xszdszAction.do?method=getXszdszByPage&tableName=XSZHGL_XSXXB', fields: ["id",'columnname',"sfkxg","sfxtwh","sfbt"] }); dataStore.load(); //列表 var dataGrid = new Ext.grid.EditorGridPanel({ stripeRows: true, autoScroll: true, trackMouseOver: true, border: false, loadMask: true, sm: checkboxModel, plugins: [adminColumn, studentUpdColumn, studentAllowBlankColumn], //其他代码省略,这里是grid的listeners属性的配置代码 listeners : { 'afteredit' : function(e) { alert(e.value); Ext.Ajax.request({ url : 'updateUser.action', params : { filedName : e.field, fieldValue : e.value, userId : e.record.data.userId }, success : function() { //alert('ok'); }, failure : function() { Ext.Msg.show({ title : '错误提示', msg : '修改数据发生错误,操作将被回滚!', fn : function() { e.record.set(e.field, e.originalValue); }, buttons : Ext.Msg.OK, icon : Ext.Msg.ERROR }); } }); } }, //列模型 cm:new Ext.grid.ColumnModel([ { header:'字段名称', sortable:true, dataIndex:'columnname', width:200 },adminColumn, studentUpdColumn, studentAllowBlankColumn ]), //数据 store: dataStore, bbar: new Ext.PagingToolbar({ pageSize: 15, store: dataStore, displayInfo: true, beforePageText: '第', afterPageText: '页,共 {0} 页', displayMsg: '当前为第<font style="color:red">{0} - {1}</font> 条记录,共<font style="color:red">{2}</font> 条记录', emptyMsg: "没有找到相关信息" }) }); //添加列表 dataPanel.add(dataGrid); initDataTbar([_save, "-", _refresh, "-", _condition]); /*事件控制*****************************/ //刷新 getRefreshBtn().on('click', function(){ dataStore.reload(); }); //实例化主界面(添加所有控件后) var mianFrame = new MianFrame(); setNavigate("学工管理 >> 学生基本信息设置"); }); </script> </head> <body> <input type="hidden" id='qx' value='${qxlx}'><input type="hidden" id='mkid' value='${mkid}'> <table width="100%" height='100%'> <tr> <td align="center" valign="middle"> <div id='loadDiv' style="font-size:12px;"> <img width='50' height='50' src='${pageContext.request.contextPath}/imgs/login-load.gif'>数据加载中,请稍后 . . . </div> </td> </tr> </table> </body> </html>

 
//如果修改的数据要及时的与后台交互的话,可以给editGridPanel添加afterEdit事件,如上面的js文件,但要提前修改CheckColumn的中onMouseDown方法,如下:
onMouseDown : function(e, t) {
        if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
            e.stopEvent();
            var index = this.grid.getView().findRowIndex(t);
            var cindex = this.grid.getView().findCellIndex(t);
            var record = this.grid.store.getAt(index);
            var value = record.data[this.dataIndex];
   
            var field = this.grid.colModel.getDataIndex(cindex);
            var e = {
                grid : this.grid,
                record : record,
                field : field,
                originalValue : record.data[this.dataIndex],
                value : !record.data[this.dataIndex],
                row : index,
                column : cindex,
                cancel : false
            };
            if (this.grid.fireEvent("validateedit", e) !== false && !e.cancel) {
                delete e.cancel;
                record.set(this.dataIndex, !record.data[this.dataIndex]);
                this.grid.fireEvent("afteredit", e);
            }
            
        }
    }
已上资料希望对你有帮助!!!分享快乐!(下图是系统实现的效果)
ExtJs 扩展类CheckColumn的使用
 
 


你可能感兴趣的:(column)