Extjs中利用Menu和GridPanel生成一个TriggerField
Extjs中TriggerField是专门生成下拉框功能的，它是DataField,TimeField和Combox的父类，在这里提供了一个利用Menu和GridPanel生成一个TriggerField的例子。Extjs是3.2版本的。
jsp文件:
<html>
<head>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript" src="./js/form.js"></script>
<link rel="stylesheet" type="text/css" href="./css/menu.css">
</head>
<body>
<div id="container">
<div id="form"></div>
</div>
</body>
</html>
js文件：
form.js
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:50,sortable:true,
editor:new Ext.grid.GridEditor(
new Ext.form.NumberField({
allowBlank:false,
allowNegative:false,
maxValue:10
})
)},
{header:'名称',dataIndex:'name',width:100,sortable:true},
{header:'性别',dataIndex:'sex'},
{header:'描述',dataIndex:'desc',width:153},
{header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')},
{header:'color',dataIndex:'color'}
]);
var data = [
['1','北京','male','首都','2013-06-12','#FBF8BF'],
['2','上海','female','东方明珠','2013-06-12','#99CC99'],
['3','天津','female','港口城市','2013-06-12'],
['4','重庆','male','最年轻的直辖市','2013-06-12','#F5C0C0']
];
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'sex'},
{name:'desc'},
{name:'date',type:'date',dateFormat:'Y-m-d'},
{name:'color'}
])
});
var grid = new Ext.grid.EditorGridPanel({
store:store,
cm:cm,
width:650,
height:120,
stripeRows:true,
loadMask:true,
viewConfig:{
forceFit:true,
enableRowBody:true,
columnsText:'显示的列',
sortAscText:'升序',
sortDescText:'降序',
scrollOffset:1
}
});
store.load();
var menu = new Ext.menu.Menu({
items:[grid]
});
var triggerField = new Ext.form.TriggerField({
fieldLabel:'选择',
name:'name',
onSelect:function(record){},
onTriggerClick:function(){
if(this.menu == null){
this.menu = menu;
}
this.menu.show(this.el, 'tl-bl?');//弹出的菜单的左上角或左下角与Ext.form.TriggerField对齐
}
});
grid.on('rowclick',function(grid,rowIndex,e){
menu.hide();//选择后隐藏menu
triggerField.setValue(rowIndex);//设置行号
});
var form = new Ext.form.FormPanel({
title:'form',
frame:true,
renderTo:'form',
items:[triggerField]
});
});
截图如下：
jsp文件:
<html>
<head>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript" src="./js/form.js"></script>
<link rel="stylesheet" type="text/css" href="./css/menu.css">
</head>
<body>
<div id="container">
<div id="form"></div>
</div>
</body>
</html>
js文件：
form.js
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:50,sortable:true,
editor:new Ext.grid.GridEditor(
new Ext.form.NumberField({
allowBlank:false,
allowNegative:false,
maxValue:10
})
)},
{header:'名称',dataIndex:'name',width:100,sortable:true},
{header:'性别',dataIndex:'sex'},
{header:'描述',dataIndex:'desc',width:153},
{header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')},
{header:'color',dataIndex:'color'}
]);
var data = [
['1','北京','male','首都','2013-06-12','#FBF8BF'],
['2','上海','female','东方明珠','2013-06-12','#99CC99'],
['3','天津','female','港口城市','2013-06-12'],
['4','重庆','male','最年轻的直辖市','2013-06-12','#F5C0C0']
];
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'sex'},
{name:'desc'},
{name:'date',type:'date',dateFormat:'Y-m-d'},
{name:'color'}
])
});
var grid = new Ext.grid.EditorGridPanel({
store:store,
cm:cm,
width:650,
height:120,
stripeRows:true,
loadMask:true,
viewConfig:{
forceFit:true,
enableRowBody:true,
columnsText:'显示的列',
sortAscText:'升序',
sortDescText:'降序',
scrollOffset:1
}
});
store.load();
var menu = new Ext.menu.Menu({
items:[grid]
});
var triggerField = new Ext.form.TriggerField({
fieldLabel:'选择',
name:'name',
onSelect:function(record){},
onTriggerClick:function(){
if(this.menu == null){
this.menu = menu;
}
this.menu.show(this.el, 'tl-bl?');//弹出的菜单的左上角或左下角与Ext.form.TriggerField对齐
}
});
grid.on('rowclick',function(grid,rowIndex,e){
menu.hide();//选择后隐藏menu
triggerField.setValue(rowIndex);//设置行号
});
var form = new Ext.form.FormPanel({
title:'form',
frame:true,
renderTo:'form',
items:[triggerField]
});
});
截图如下：