EXT3.4关于Grid锁定指定列固定多选框的实现

1.1  创建CheckboxSelectionModel对象

1，新建空的EOS6.3的工程，新建com.towngas.tcis. gridlock构件包；

2，在com.towngas.tcis.gridlock构件包的“展现”节点下的“页面资源”节点中创建一个文件夹，命名为gridlock；

3，在新建的文件夹中创建gridlockUi.js文件，gridlockEv.js文件。

4，在gridlockUi.js文件中创建对象：

var smLock = new Ext.grid.CheckboxSelectionModel({

singleSelect : false,

                              handleMouseDown : function(g,rowIndex, e) {

                                          if(e.button !== 0 || this.isLocked()) {

                                                 return;

                                          }

                                          varview = this.grid.getView();

                                          if(e.shiftKey && !this.singleSelect

                                                        &&this.last !== false) {

                                                 varlast = this.last;

                                                 this.selectRange(last,rowIndex, e.ctrlKey);

                                                 this.last= last;

                                                 view.focusRow(rowIndex);

                                          }else {

                                                 varisSelected = this.isSelected(rowIndex);

                                                 if(isSelected) {

                                                        this.deselectRow(rowIndex);

                                                 }else if (!isSelected || this.getCount() > 1) {

                                                        this.selectRow(rowIndex,true);

                                                        view.focusRow(rowIndex);

                                                 }

                                          }

                                   },

                                   isLocked: Ext.emptyFn,

                                   initEvents: function() {

                                          Ext.grid.CheckboxSelectionModel.superclass.initEvents

                                                        .call(this);

                                          this.grid.on('render',function() {

                                                               varview = this.grid.getView();

                                                               view.mainBody.on('mousedown',

                                                                             this.onMouseDown,this);

                                                               Ext.fly(view.lockedInnerHd).on('mousedown',

                                                                             this.onHdMouseDown,this);

                                                        }, this);

                                   }

                     });

 

 

 

 

2.2固定CheckboxSelectionModel对象

       对创建的CheckboxSelectionModel对象进行列固定，调用对象的sortLock()方法，内容如下：

smLock. sortLock();

3.3编写LockingColumnModel对象

       在gridlockUi.js文件中下创建Ext对象LockingColumnModel为columns，并把CheckboxSelectionModel(勾选框)对象smLock作为LockingColumnModel的第一列，并且制定要锁定的其他列，如下，设置lockde为true，内容如下：

var columns = newExt.ux.grid.LockingColumnModel([smLock, {

                                   header: '业务类别',

                                   dataIndex: 'busitypename',

                                   sortable: true,

                                   locked: true,

                                   id: 'busitype'

                            },{

                                   header: '当前环节',

                                   dataIndex: 'activityinstname',

                                   sortable: true,

                                   locked: true,

                                   id: 'activityinstname'

                            }]);

3.4创建LockingGridView对象

在之前创建的内容之后，创建LockingGridView对象，它是用来支持锁定grid的view，具体方法如下：

……

var lockview =new Ext.ux.grid.LockingGridView({

                                          enableRowBody: true                                       

                      });

 

……

4.5配置ListPanel对象的Locking特性

完成了以上的步骤，为自定义接口的注入做好了技术方面的准备。为了自定义编写的ServiceHandler被EOS6.0执行引擎接受，尚需要在handler-engine.xml文件中加入自定义handler的配置内容。

找到EOS6.0安装目录，进入至eosserver\working\eos-default\config目录，打开handler-engine.xml文件，在文件内容末尾加入如下部分的内容：

this.resultBlock = new Ext.fn.ListPanel({

                     title: '查询结果<span>(<fontstyle="color:red">红色:工单已经超时</font>/<fontstyle="color:blue">蓝色:工单即将超时</font>)</span>',

                     region: 'center',

                     sm: smLock,

                     colModel: columns,

                     stripeRows: true,

                     view: lockview,

                     store: store

});

5.6测试固定Checkbox并且锁定Grid制定列

此时整个界面已开发完成，我们完成了对Checkbox多选框（由于加入了Locking锁定特性导致原生态的不能固定）的列固定，对指定列“业务类别”、“当前环节”进行了固定。

如下图所示：