移花接木 实例讲解Ext JS控件的扩展(1)(3)

清单4.基金申请条件组件  
      
Ext.onReady(function(){  
varcomboData1=[  
['AGE','年龄'],  
//省略部分代码  
['DEPARTMENT','院系']  
];  
varcomboData2=[  
['>','大于'],  
//省略部分代码  
['!=','不等于']  
];  
varcombo1=newExt.form.ComboBox({  
id:'attrCombo',  
store:newExt.data.SimpleStore({  
fields:['value','text'],  
data:comboData1  
}),  
emptyText:'请选择',  
mode:'local',  
triggerAction:'all',  
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,["properties"],0)  
},{  
header:'操作符',  
dataIndex:'operator',  
editor:newExt.grid.GridEditor(combo2),  
renderer:attributeRenderer.createDelegate(this,["operators"],0)  
},{  
header:'属性值',  
dataIndex:'propertyValue',  
editor:newExt.grid.GridEditor(newExt.form.TextField({selectOnFocus:true})),  
renderer:attributeRenderer.createDelegate(this,["values"],0)  
}  
];  
 
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

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

这里表示计算机学院年龄不大于35岁讲师以上（含）职称的女教师，如果发表的论文数量多于10篇的，有资格申请该助研基金。可以看出该基金体现了对优秀青年女教师的科研支持。此部分的代码请参考示例代码中的Example1.js。