ext editor grid

最新推荐文章于 2019-10-06 09:39:34 发布

pinnacle909

最新推荐文章于 2019-10-06 09:39:34 发布

阅读量75

点赞数

分类专栏：笔记文章标签： EXT Office HTML

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这几天学习ext 做了一个简单的ext grid
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script src="./ext/adapter/ext/ext-base.js"></script>
<script src="./ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//================data================
var store = new Ext.data.Store({
data: [
[
1,
"Office Space",
"Mike Judge",
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],[
3,
"Super Troopers",
"Jay Chandrasekhar",
"2002-02-15",
2,
"Altered State Police",
"14.95",
1
]
],
reader: new Ext.data.ArrayReader({id:'id'}, [
'id',
'title',
'director',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
'price',
'available'
])
});

var genres = new Ext.data.SimpleStore({
fields: ['id', 'genre'],
data : [['1','男'],['2','女']]
});
//======================end data==============

//======================data model===========================
var ds_model = Ext.data.Record.create([
'id',
'coverthumb',
'title',
'director',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
{name: 'price', type: 'float'},
{name: 'available', type: 'bool'}
]);
//======================end data model==========================

//=======================editor=================================
var title_edit = new Ext.form.TextField();
var director_edit = new Ext.form.TextField({vtype: 'name'});
var tagline_edit = new Ext.form.TextField({ maxLength: 10 });
var release_edit = new Ext.form.DateField({ format: 'Y-m-d'});
var genre_edit = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
mode: 'local',
store: genres,
displayField:'genre',
valueField: 'id'
});
var genre_name = function(val){
return val==1?'男':'女';
};
//=============================end editor========================

//=========================validate======================================
Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+ [A-Z][A-Za-z\-]+$/;
Ext.form.VTypes['nameMask'] = /[A-Za-z\- ]/;
Ext.form.VTypes['nameText'] = 'In-valid Director Name.';
Ext.form.VTypes['name'] = function(v){
return Ext.form.VTypes['nameVal'].test(v);
}
//=========================end validate==================================

//========================panel============================
var grid = new Ext.grid.EditorGridPanel({
renderTo: document.body,
frame:true,
title: 'Movie Database',
height:200,
width:517,
clickstoEdit:1,
store: store,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//singleSelect为false 否则无法删除

//=====================tool bar========================================
tbar: [{
text: 'Remove Movie',
//icon: './ext/resources/images/default/toolbar/tb-btn-sprite.gif',
handler: function() {
var sm = grid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()){
Ext.Msg.show({
title: 'Remove Movie',
buttons: Ext.MessageBox.YESNOCANCEL,
msg: 'Remove '+sel.data.title+'?',
fn: function(btn){
if (btn == 'yes'){
grid.getStore().remove(sel);
}
}
});
};
}
},{
text: 'Add Movie (First)',
//icon: './ext/resources/images/default/toolbar/tb-btn-sprite.gif',
handler: function() {
grid.getStore().insert(
0,
new ds_model({
title:'New Movie',
director:'',
genre:0,
tagline:''
})
);
grid.startEditing(0,0);
}
},{
text: 'Add Movie (Last)',
handler:function(){
grid.getStore().insert(
grid.getStore().getCount(),
new ds_model({
title:'New Movie',
director:'',
genre:0,
tagline:''
})
);
grid.startEditing(grid.getStore().getCount()-1,0);
}
}],
//==================================end toolbal===================

//===========================columns==============================
columns: [
{header: "Title", dataIndex: 'title',editor: title_edit},
{header: "Director", dataIndex: 'director',editor: director_edit},
{header: "Released", dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
editor:release_edit},
{header: "Genre", dataIndex: 'genre',renderer:genre_name,editor:genre_edit},
{header: "Tagline", dataIndex: 'tagline',editor: tagline_edit}
],
//=========================end columns=============================

//=====================listeners===================
listeners: {
afteredit: function(e){
if (e.field == 'director' && e.value == 'Mel Gibson'){
Ext.Msg.alert('Error','Mel Gibson movies not allowed');
e.record.reject();
}else{
e.record.commit();
}
}
}
//===================end listeners=================
});
});
</script>
</head>
<body>
</body>
</html>
[/code]

pinnacle909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext editor grid

这几天学习ext 做了一个简单的ext grid[code]Insert title hereExt.onReady(function(){ //================data================ var store = new Ext.data.Store({ data: [ [ ...
复制链接

扫一扫