移花接木扩展 Ext JS 控件

核心提示： 清单 3. 定义新类 MyColumnModelExt.ns('Ext.ux.grid');//新类MyColumnModel的构造函数Ext.ux.grid.MyColumnModel=function(grid,store,column){this.grid=grid;thi

清单 3. 定义新类 MyColumnModel

　Ext.ns('Ext.ux.grid');　
　//　新类　MyColumnModel　的构造函数　
　Ext.ux.grid.MyColumnModel　=　function(grid,　store,　column){　
　　this.grid　=　grid;　
　this.store　=　store;　
　　　
　var　gender　=　[　
　['0100','男'],　
　['0101','女']　
　];　
　var　department　=　[　
　['0200','文学院'],　
　//　省略部分代码　
　['0207','医学部']　
　];　
　var　title　=　[　
　['0300','助教'],　
　//　省略部分代码　
　['0303','教授']　
　];　
　var　genderCombo　=　new　Ext.form.ComboBox({　
　store　:　new　Ext.data.SimpleStore({　
　　fields　:　['value','text'],　
　　data　:　gender　
　}),　
　emptyText　:　'请输入',　
　mode　:　'local',　
　triggerAction　:　'all',　
　valueField　:　'value',　
　displayField　:　'text',　
　readOnly　:　true　
　});　
　var　departmentCombo　=　new　Ext.form.ComboBox({　
　store　:　new　Ext.data.SimpleStore({　
　　fields　:　['value','text'],　
　　data　:　department　
　}),　
　//　与上面定义　genderCombo　类似，故省略部分代码　
…　
　});　
　var　titleCombo　=　new　Ext.form.ComboBox({　
　store　:　new　Ext.data.SimpleStore({　
　　fields　:　['value','text'],　
　　data　:　title　
　}),　
　//　与上面定义　genderCombo　类似，故省略部分代码　
…　
　});　
　//　当选择“性别”、“院系”、“职称”时，提供相应的下拉列表作为单元格编辑器，　
　供用户选择；当选择“年龄”、“论文数量”时，提供数字文本框供用户输入　
　this.customEditors　=　{　
　　'GENDER'　:　new　Ext.grid.GridEditor(genderCombo),　
　　'DEPARTMENT'　:　new　Ext.grid.GridEditor(departmentCombo),　
　　'TITLE'　:　new　Ext.grid.GridEditor(titleCombo),　
　　　　　'AGE':　new　Ext.grid.GridEditor(new　Ext.form.NumberField({selectOnFocus:true,　
　　　　　　　style:'text-align:left;'})),　
　　'PAPER'　:　new　Ext.grid.GridEditor(new　Ext.form.NumberField({selectOnFocus:true,　
　　　　style:'text-align:left;'}))　
　};　
　Ext.ux.grid.MyColumnModel.superclass.constructor.call(this,column);　
　};　
　
　Ext.extend(Ext.ux.grid.MyColumnModel,　Ext.grid.ColumnModel,　{　
　//　通过覆盖父类中的方法　getCellEditor,　实现根据表达式中条件列的不同取值，　
　为表达式的值所在单元格返回不同的编辑器　
　getCellEditor　:　function(colIndex,　rowIndex){　
　　var　p　=　this.store.getAt(rowIndex);　
　　n　=　p.data.attrName;//　对应表达式的条件列的取值　
　　　　　　　
　　if(colIndex==4)//　表达式的值　propertyValue　所在的列　
　　{　
　　　　if(this.customEditors[n]){　
　　　　return　this.customEditors[n];　
　　}else{　
　　　　//　如果没有定义特定的单元格编辑器，则返回普通的文本框编辑器　
　　　　var　ed　=　new　Ext.grid.GridEditor(new　Ext.form.TextField({　
　　　　　　　　selectOnFocus:true　
　})　
　　　　　　);　
　　　　return　ed;　
　　}　
　　}　
　　else　
　　　　return　this.config[colIndex].editor;　
　}　
　});