在GroupGrid基础上封装成的，类似combox 不过显示的不是列表而是表格，选择想要的字段值。
代码如下：
Ext.namespace("Ext.tet");
Ext.tet.TriggerField=Ext.extend(Ext.form.TriggerField ,{
createWindowPanel:function(){
if(!this.gridPanel) this.createGridPanel();
this.windowPanel = new Ext.Window(Ext.apply({
title:"信息查询",
closeAction:"hide",
width:500,
height:400,
layout:"fit",
resizable:false,
items:[this.gridPanel]
},this.windowPanelConfig));
},
createGridPanel:function(){
this.gridPanel = new Ext.tet.GroupGrid(Ext.apply({},this.gridPanelConfig));
this.gridPanel.on('rowdblclick', function(grid, rowIndex, e) {
this.windowPanel.hide(this.el);
var selections=grid.getSelectionModel().getSelections();
this.setValue(selections[0].get(this.gridPanelConfig.selectDataIndex));
},this);
},
onTriggerClick: function() {
if (!this.windowPanel) this.createWindowPanel();
this.windowPanel.show(this.el);
},
initComponent: function(){
Ext.tet.TriggerField.superclass.initComponent.call(this);
},
constructor:function(options){
Ext.apply(this,options);
Ext.tet.TriggerField.superclass.constructor.call(this);
}
});
Ext.reg('triggerfield',Ext.tet.TriggerField);
调用方式如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>04.form</title>
<link rel="stylesheet" type="text/css" href="../class/GroupGrid.css" />
<link rel="stylesheet" type="text/css" href="../../Client/Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../Client/Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../Client/Ext/ext-all.js"></script>
<script type="text/javascript" src="../../Client/Ext/ux/ProgressBarPager.js"></script>
<script type="text/javascript" src="../../Client/Ext/ux/PanelResizer.js"></script>
<script type="text/javascript" src="../../Client/Ext/ux/PagingMemoryProxy.js"></script>
<script type="text/javascript" src="../../Client/Ext/ux/SearchField.js"></script>
<script type="text/javascript" src="../class/FormatWhere.js"></script>
<script type="text/javascript" src="../class/DateField.js"></script>
<script type="text/javascript" src="../class/NumberField.js"></script>
<script type="text/javascript" src="../class/chartWidow.js"></script>
<script type="text/javascript" src="../class/GroupGrid.js"></script>
<script type="text/javascript" src="../class/TriggerField.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL="../../Client/Images/s.gif";
Ext.QuickTips.init();
var cm3 = new Ext.grid.ColumnModel([
{
header:"序号",
dataIndex:"ID",
width:40,
sortable:true
},{
header:"借书单号",
dataIndex:"BorrowNo",
searchable:true,
sortable:true
},{
header:"借书时间",
dataIndex:"BorrowDate",
searchable:true,
sortable:true
},{
header:"借书数量",
width:55,
dataIndex:"BookNum",
searchable:true,
attribute:{type:"int"},
sortable:true
}]);
var field1 = new Ext.tet.TriggerField({
fieldLabel: '借书单号',
editable:false,
emptyText:"请点击右边选择",
windowPanelConfig:{
width:500,
height:500
},
gridPanelConfig:{
pageSize:20,
DataSourceParams:{tableName:"ReturnBook_View",key:"ID",groupBy:"BorrowDate",orderBy:"BorrowDate"},
selectDataIndex:"BorrowNo",
cm:cm3,
autoExpandColumn:4,
tbar:[new Ext.Toolbar.Fill(),"","-",{
text:"添加",
tooltip:"添加新记录",
iconCls:"addicon",
handler:function(){alert("");}
}]
}
});
var field2 = new Ext.tet.TriggerField({
fieldLabel: '借书时间',
allowBlank:false,
blankText:"不能为空",
emptyText:"请点击右边选择",
windowPanelConfig:{
width:500,
height:400
},
gridPanelConfig:{
pageSize:20,
DataSourceParams:{tableName:"ReturnBook_View",key:"ID",groupBy:"BorrowDate",orderBy:"BorrowDate"},
selectDataIndex:"BorrowDate",
cm:cm3,
autoExpandColumn:4,
tbar:[new Ext.Toolbar.Fill(),"","-",{
text:"添加",
tooltip:"添加新记录",
iconCls:"addicon",
handler:function(){alert("");}
}]
}
});
var form = new Ext.form.FormPanel({
title: 'form',
frame: true,
width:300,
items: [field1,field2],
renderTo: 'form'
});
});
</script>
</head>
<body>
<div id="form" style="margin:20px;"></div>
</body>
</html>