EXT EditorGridPanel 中用复选框表示真假值,扩展官方示例

来源：互联网发布：js 导出excel 编辑：程序博客网时间：2024/05/02 00:20

EXT EditorGridPanel 中用复选框表示真假值,扩展官方示例

博客分类：

EXTJS

EXTAjaxCSSprototype配置管理

在学习中Ext.grid.EditorGridPanel 的时候碰到一个知识点,如何用复选框来表示真假值,当然我们可以直接这样

Js代码  
{  
   header : "管理员?",  
   dataIndex : 'manager',  
   width : 55,  
   editor : new Ext.form.CheckBox()  
}  

但是这样给我们的感觉不是很好,每次都要我们点击才会出现CheckBox,不能让他默认就显示在哪里,而且表示当前值?官方给了我们一个示例,下面是示例的源代码

Js代码  
/* 
 * Ext JS Library 2.2 
 * Copyright(c) 2006-2008, Ext JS, LLC. 
 * licensing@extjs.com 
 *  
 * http://extjs.com/license 
 */  
  
Ext.onReady(function(){  
    Ext.QuickTips.init();  
  
    function formatDate(value){  
        return value ? value.dateFormat('M d, Y') : '';  
    };  
    // shorthand alias  
    var fm = Ext.form;  
  
    // custom column plugin example  
    var checkColumn = new Ext.grid.CheckColumn({  
       header: "Indoor?",  
       dataIndex: 'indoor',  
       width: 55  
    });  
  
    // the column model has information about grid columns  
    // dataIndex maps the column to the specific data field in  
    // the data store (created below)  
    var cm = new Ext.grid.ColumnModel([{  
           id:'common',  
           header: "Common Name",  
           dataIndex: 'common',  
           width: 220,  
           editor: new fm.TextField({  
               allowBlank: false  
           })  
        },{  
           header: "Light",  
           dataIndex: 'light',  
           width: 130,  
           editor: new Ext.form.ComboBox({  
               typeAhead: true,  
               triggerAction: 'all',  
               transform:'light',  
               lazyRender:true,  
               listClass: 'x-combo-list-small'  
            })  
        },{  
           header: "Price",  
           dataIndex: 'price',  
           width: 70,  
           align: 'right',  
           renderer: 'usMoney',  
           editor: new fm.NumberField({  
               allowBlank: false,  
               allowNegative: false,  
               maxValue: 100000  
           })  
        },{  
           header: "Available",  
           dataIndex: 'availDate',  
           width: 95,  
           renderer: formatDate,  
           editor: new fm.DateField({  
                format: 'm/d/y',  
                minValue: '01/01/06',  
                disabledDays: [0, 6],  
                disabledDaysText: 'Plants are not available on the weekends'  
            })  
        },  
        checkColumn  
    ]);  
  
    // by default columns are sortable  
    cm.defaultSortable = true;  
  
    // this could be inline, but we want to define the Plant record  
    // type so we can add records dynamically  
    var Plant = Ext.data.Record.create([  
           // the "name" below matches the tag name to read, except "availDate"  
           // which is mapped to the tag "availability"  
           {name: 'common', type: 'string'},  
           {name: 'botanical', type: 'string'},  
           {name: 'light'},  
           {name: 'price', type: 'float'},             // automatic date conversions  
           {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},  
           {name: 'indoor', type: 'bool'}  
      ]);  
  
    // create the Data Store  
    var store = new Ext.data.Store({  
        // load using HTTP  
        url: 'plants.xml',  
  
        // the return will be XML, so lets set up a reader  
        reader: new Ext.data.XmlReader({  
               // records will have a "plant" tag  
               record: 'plant'  
           }, Plant),  
  
        sortInfo:{field:'common', direction:'ASC'}  
    });  
  
    // create the editor grid  
    var grid = new Ext.grid.EditorGridPanel({  
        store: store,  
        cm: cm,  
        renderTo: 'editor-grid',  
        width:600,  
        height:300,  
        autoExpandColumn:'common',  
        title:'Edit Plants?',  
        frame:true,  
        plugins:checkColumn,  
        clicksToEdit:1,  
  
        tbar: [{  
            text: 'Add Plant',  
            handler : function(){  
                var p = new Plant({  
                    common: 'New Plant 1',  
                    light: 'Mostly Shade',  
                    price: 0,  
                    availDate: (new Date()).clearTime(),  
                    indoor: false  
                });  
                grid.stopEditing();  
                store.insert(0, p);  
                grid.startEditing(0, 0);  
            }  
        }]  
    });  
  
    // trigger the data store load  
    store.load();  
});  
  
Ext.grid.CheckColumn = function(config){  
    Ext.apply(this, config);  
    if(!this.id){  
        this.id = Ext.id();  
    }  
    this.renderer = this.renderer.createDelegate(this);  
};  
  
Ext.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(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){  
            e.stopEvent();  
            var index = this.grid.getView().findRowIndex(t);  
            var record = this.grid.store.getAt(index);  
            record.set(this.dataIndex, !record.data[this.dataIndex]);  
        }  
    },  
  
    renderer : function(v, p, record){  
        p.css += ' x-grid3-check-col-td';   
        return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';  
    }  
};  

但是问题又来了.我们点击修改值而后台却不被更新,所以我们要对onMouseDown修改一下.

Js代码  
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 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);  
            }  
        }  
    }  

这样当我们的afteredit被触发后就会执行我们事先设定好的程序,调用业务逻辑修改后台数据.

下面是EditorGridPanel的处理代码

Js代码  
//其他代码省略,这里是grid的listeners属性的配置代码  
  
listeners : {  
        'afteredit' : function(e) {  
            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  
                    });  
                }  
            });  
        }  
    }  