首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

EditorGridPanel 中运用checkbox列,并包含afterEdit事件

2012-11-23 
EditorGridPanel 中使用checkbox列,并包含afterEdit事件??? 在EditorGridPanel中无法使用默认的CheckBox控

EditorGridPanel 中使用checkbox列,并包含afterEdit事件

??? 在EditorGridPanel中无法使用默认的CheckBox控件,因此采用第三方扩展的控件实现,

??? 以下是Ext.grid.CheckColu扩展类:

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.id == this.id) {            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 value = !record.data[this.dataIndex];//点击后,获得当前checkbox值的相反值            record.set(this.dataIndex, value);//设定checkbox被选择时候的值            //事件的参数            var e = {               grid: this.grid,               record: record,               field: field,                originalValue: record.data[this.dataIndex],               value: !record.data[this.dataIndex],               row: index,               column: cindex           };           //afterEdit事件            this.grid.fireEvent("afteredit", e); //申请事件,参数                }    },    renderer: function(v, p, record){        p.css += ' x-grid3-check-col-td';        return '<div id="' + this.id + '" name="code">var checkColumn = new Ext.grid.CheckColumn({                      header: "",                      dataIndex: 'indoor',                      width: 55           });  

?

?? 然后,在editorgrid组件中引入插件plugins:checkColumn(必须的)。

?? 创建cm加入checkColumn:

cm: new Ext.grid.ColumnModel(                                   [                                   checkColumn                                   ,                                   {                                       id: 'min'                                      ,header: '最小值'                                      ,dataIndex: 'min'                                      ,editor: new Ext.form.NumberField({                                           allowBlank: false                                      })                               )  ?

?? 创建Record对象也要加入相关内容:

var Record = Ext.data.Record.create([                {name: 'indoor', type: 'bool'}               ,{name: 'min'}               ,{name: 'max'}               ,{name: 'alarmType'}           ]);  

?

?

?? 最后创建Record:

var newRecord = new Record({indoor: false,min: min, max: max, alarmType: '轻微'});  

?

?

?

?? 前台如果调用afterEdit事件

//编辑后触发的事件,有异常,自动选中checkbox   function afterEdit(e){     //如果是CHECK_EXCEPTION列    if (e.field == "CHECK_EXCEPTION") {        //checkbox如果被选中        if (e.record.get("CHECK_EXCEPTION") == true)         {               //仓库系统状态为1                     if(e.record.get("STATE")=="1")                //设置仓库实际状态为0                e.record.set("REAL_STATE", "0");            //仓库实际状态为0            else if(e.record.get("STATE")=="0")                //设置仓库实际状态为1                e.record.set("REAL_STATE", "1");            else                e.record.set("REAL_STATE", "");        }        //checkbox如果被取消        else if(e.record.get("CHECK_EXCEPTION") == false)        {                       e.record.set("REAL_STATE", "");                   }           }}

?

参考文章三篇:

? EXT EditorGridPanel 中使用Ext.grid.CheckColumn (用来创建checkbox列)

? http://blog.csdn.net/davidxj/archive/2009/04/06/4052348.aspx

? Extjs,Ext.grid.CheckColumn 列修正版 (这个afterEdit例子不太好用)

? http://blog.csdn.net/phker/archive/2009/06/25/4294241.aspx

??Ext.grid.CheckColumn问题 (从这篇获得afterEidt例子)

? http://www.vifir.com/bbs/html/20080722/1736736.html

?

?

界面:

EditorGridPanel 中运用checkbox列,并包含afterEdit事件

  

热点排行