ExtJs 扩展类CheckColumn的使用

最新推荐文章于 2021-02-06 18:43:20 发布

最新推荐文章于 2021-02-06 18:43:20 发布 · 546 阅读

文章标签：

本文介绍如何在Extjs中自定义Checkbox的渲染方式，解决数据库中存储的状态值（如'Y'/'N'）与Extjs GridPanel中Checkbox默认只支持true/false的问题。通过修改CheckColumn组件的方法实现状态值的正确显示。

使用 Extjs 在进行数据库编程经常会遇到 checkbox 的问题(奇怪网上却没有此类文章不知道其他人是怎么解决的,在此贴上我的方法,如有问题或建议,欢迎指正), 比如在数据中的 status 存储的值为 'Y' / 'N' 或者是其他非 true / false 的值, 要求显示在gridPanel 中, 如果不进行转换,显示的时候就会有问题,因为 gridPanel 中的 Checkbox(CheckColumn) 的值默认为只有两种： true / false. 这样的话只要 status 的值不为空, 显示到页面的时候 checkbox 都会自动勾上; //下面是修改的步骤： 1. 解决的办法就是, 修改 checkcolumn.js 中 renderer 方法和onMouseDown方法。修改后的代码如下：

/*!
 * Ext JS Library 3.1.1
 * Copyright(c) 2006-2010 Ext JS, LLC
 * licensing@extjs.com
 * 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>  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/common_viewport.css" type="text/css"> </link>

//如果修改的数据要及时的与后台交互的话，可以给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);
            }
            
        }
    }

已上资料希望对你有帮助！！！分享快乐！（下图是系统实现的效果）