移花接木扩展 Ext JS 控件

清单 4. 基金申请条件组件

　Ext.onReady(function(){　
　　var　comboData1　=　[　
　['AGE'　,　'年龄'],　
　//　省略部分代码　
　['DEPARTMENT'　,　'院系']　
　];　
　var　comboData2　=　[　
　['>','大于'],　
　//　省略部分代码　
　['!=','不等于']　
　];　
　var　combo1　=　new　Ext.form.ComboBox({　
　id　:　'attrCombo',　
　store　:　new　Ext.data.SimpleStore({　
　　fields　:　['value','text'],　
　　data　:　comboData1　
　}),　
　emptyText　:　'请选择',　
　mode　:　'local',　
　triggerAction　:　'all',　
　valueField　:　'value',　
　displayField　:　'text',　
　readOnly　:　true　
　});　
　var　combo2　=　new　Ext.form.ComboBox({　
　id　:　'operatorCombo',　
　store　:　new　Ext.data.SimpleStore({　
　　fields　:　['value','text'],　
　　data　:　comboData2　
　}),　
　//　与上面定义　combo1　类似，故省略部分代码　
…　
　});　
　　　
　var　conditiondata　=　[];　
　var　gStore　=　new　Ext.data.SimpleStore({　
　fields:　[　
　　{name:　'fundConditionId'},　
　　{name:　'attrName'},　
　　{name:　'operator'},　
　　{name:　'propertyValue'}　
　],　
　data　:　conditiondata　
　});　
　var　sm　=　new　Ext.grid.CheckboxSelectionModel({handleMouseDown:　Ext.emptyFn});　
　var　column　=　[　
　sm,　
　{　
　　header　:　'条件　id',　
　　dataIndex　:　'fundConditionId',　
　　hidden　:　true　
　},{　
　　header　:　'属性名称',　
　　dataIndex　:　'attrName',　
　　editor　:　new　Ext.grid.GridEditor(combo1),　
　//　attributeRenderer　方法是用来格式化输出的函数，这里从略。　
　renderer　:　attributeRenderer.createDelegate(this,　["properties"]　,　0)　
　　　},{　
　　header　:　'操作符',　
　　dataIndex　:　'operator',　
　　editor　:　new　Ext.grid.GridEditor(combo2),　
　　renderer　:　attributeRenderer.createDelegate(this,　["operators"]　,　0)　
　},{　
　　header　:　'属性值',　
　　dataIndex　:　'propertyValue',　
　　editor　:　new　Ext.grid.GridEditor(new　Ext.form.TextField({selectOnFocus:true})),　
　　renderer　:　attributeRenderer.createDelegate(this,　["values"]　,　0)　
　}　　
　];　
　
　var　fundConditionGrid　=　new　Ext.grid.EditorGridPanel({　
　name　:　'fundCondition',　
　id　:　'fundCondition',　
　store　:　gStore,　
　cm　:　new　Ext.ux.grid.MyColumnModel(this,gStore,column),　
　sm　:　sm,　
　　tbar　:　new　Ext.Toolbar(['-',{　
　　　text　:　'添加条件',　
　//_onAddCondition　方法是按钮“添加条件”的响应函数，实现在列表中增加一个条件的功能，这里从略。　
　handler　:　_onAddCondition.createDelegate(this)　
　},　'-',　{　
　text　:　'删除条件',　
　//_onRemoveCondition　方法是按钮“删除条件”的响应函数，实现在列表中删除一个条件的功能，这里从略。　
　handler　:　_onRemoveCondition.createDelegate(this)　
　},　'-']),　　　　　
　frame:true,　
　collapsible:　true,　
　animCollapse:　false,　
　title　:　'助研基金申请条件',　
　width:　350,　
　height　:　300,　
　iconCls:　'icon-grid',　
　clicksToEdit　:　1,　
　renderTo:　'example1'　
　});　
　});