Ext2.0的EditorGridPanel
前面介绍的GridPanel的数据只能看，并不能进行修改，本文的代码将演示一个可编辑的表格控件：
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<title></title>
</head>
<script>
Ext.onReady(function(){
//ComboBox的数据
var sex = [['male','male'],
['female','female']];
var sexStore = new Ext.data.SimpleStore({
fields: ['sexNm', 'sex'],
data : sex
});
var sm = new Ext.grid.CheckboxSelectionModel();
//表格的表头定义
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',editor: new Ext.form.ComboBox({//该列的数据由ComboBox修改
store: sexStore,
displayField:'sexNm',
valueField: 'sex',
typeAhead: true,
editable:false,
forceSelection:true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a sex...',
selectOnFocus:true,
lazyInit:false
})
},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn',editor: new Ext.form.TextField({ //该列数据由TextField修改
allowBlank: true,
maxLength: 50
})
}
]);
cm.defaultSortable = true;
var data = [
['1','male','name1','descn1'],
['2','male','name1','descn2'],
['3','fmale','name3','descn3'],
['4','male','name4','descn4'],
['5','fmale','name5','descn5']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id',mapping: 0},
{name: 'sex',mapping: 1},
{name: 'name',mapping: 2},
{name: 'descn',mapping: 3}
])
});
ds.load();
var grid = new Ext.grid.EditorGridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
autoHeight:true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
tbar: new Ext.Toolbar({
items:[
{
id:'buttonA'
,text:"Button A"
,handler: function(){ alert("You clicked Button A"); }
}
,
new Ext.Toolbar.SplitButton({})
,{
id:'buttonB'
,text:"Button B"
,handler: function(){ alert("You clicked Button B"); }
}
,
'-'
,{
id:'buttonc'
,text:"Button c"
}
]
})
});
grid.render();
//表格的事件绑定
grid.addListener('afteredit',afteredit);
function afteredit(e)
{
Ext.MessageBox.alert("afteredit",e.value);
}
//将表格在一个新Panel中放置
var panel = new Ext.Panel({
renderTo: 'grid-panel',
title:'panel',
collapsible:true,
width:450,
height:400,
items:[grid]
});
})
</script>
<body>
<div id='grid3'></div>
<div id='grid-panel'></div>
</body>
</html>
Related Items
Comments
Leave a comment
Or, take a look at Archives and Categories
