移花接木 实例讲解Ext JS控件的扩展

23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67.

valueField:'value', displayField:'text', readOnly:true });

varcombo2=newExt.form.ComboBox({ id:'operatorCombo',

store:newExt.data.SimpleStore({ fields:['value','text'], data:comboData2 }),

//与上面定义combo1类似，故省略部分代码 … });

varconditiondata=[];

vargStore=newExt.data.SimpleStore({ fields:[

{name:'fundConditionId'}, {name:'attrName'}, {name:'operator'}, {name:'propertyValue'} ],

data:conditiondata });

varsm=newExt.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn}); varcolumn=[ sm, {

header:'条件id',

dataIndex:'fundConditionId', hidden:true },{

header:'属性名称', dataIndex:'attrName',

editor:newExt.grid.GridEditor(combo1),

//attributeRenderer方法是用来格式化输出的函数，这里从略。

renderer:attributeRenderer.createDelegate(this,[\},{

header:'操作符', dataIndex:'operator',

editor:newExt.grid.GridEditor(combo2),

renderer:attributeRenderer.createDelegate(this,[\},{

header:'属性值',

dataIndex:'propertyValue',

68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98.

editor:newExt.grid.GridEditor(newExt.form.TextField({selectOnFocus:true})), renderer:attributeRenderer.createDelegate(this,[\} ];

varfundConditionGrid=newExt.grid.EditorGridPanel({ name:'fundCondition', id:'fundCondition', store:gStore,

cm:newExt.ux.grid.MyColumnModel(this,gStore,column), sm:sm,

tbar:newExt.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' }); });

当属性名称选择性别、职称或者院系时，属性值分别对应不同的下拉列表供用户选择，当属性名称选择年龄或者论文数量时，属性值则对应数字文本框供用户输入。如图1-图5所示。

图1.编辑助研基金申请条件1

图2.编辑助研基金申请条件2

图3.编辑助研基金申请条件3

图4.编辑助研基金申请条件4