这几天学习ext 做了一个简单的ext grid
<!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>
分享到：
相关推荐
2. **配置编辑器**：在Grid的`columns`配置中，为需要自定义编辑的列设置`editor`属性。编辑器可以是任何Ext JS支持的组件，如`Ext.form.field.Text`、`Ext.form.field.ComboBox`等。对于更复杂的控件，你可能需要...
### Ext.grid.GridPanel属性详析 #### 一、Ext.grid.GridPanel概述 `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。...
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
5. **Editor**：如果需要使Grid具有编辑功能，可以使用EXT Grid的内置编辑器。例如，可以为某个列添加`editor`配置，使其变为文本输入框。 以下是一个简单的EXT Grid示例代码： ```javascript // 创建数据模型 var...
Ext.grid.EditorGridPanel是Ext JS库中的一个组件，主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能，是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...
在本文中，我们将深入探讨`ExtJS`框架中的两个关键组件——`Ext日期时间控件`和`Spinner控件`，以及它们在`Grid`中的应用。`ExtJS`是一款强大的JavaScript库，专用于构建富客户端应用程序，尤其适用于创建复杂的、...
### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域，特别是使用ExtJs框架进行复杂用户界面构建时，`RowEditor` 是一个非常实用的功能，它允许用户直接在表格行内编辑数据，极大地提高了...
在EXT JS这个强大的JavaScript框架中，"EXt 可编辑的grid"是一个常见的应用场景，它允许用户在数据网格中直接编辑单元格内的数据。EXT JS的CellEditing插件是实现这一功能的关键，它提供了优雅的方式来处理表格数据...
### EXTGrid属性方法详解 #### 一、Ext.grid.GridPanel `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件，用于创建数据表格。以下为该组件的一些核心属性及其含义： - **store**: 数据存储器，用于存放表格的...
在EXT JS框架中，"ext 读取xml 可编辑grid"是一个常见的需求，涉及到的主要知识点包括EXT的数据对象、EditorGridPanel的使用以及EXT对XML数据格式的支持。下面将详细阐述这些内容。 EXT JS是一个强大的JavaScript库...
开发者可能会使用`Ext.grid.EditorGridPanel`，并为每个列定义一个`editor`属性来启用单元格编辑。同时，Store的配置可能包括数据源（即"data"），以及定义字段的`fields`属性。 在深入理解这个demo的过程中，你...
在EXT框架中，Row Editor是一个功能强大的组件，它允许用户直接在数据网格（Grid）的行上进行编辑，提供了直观且高效的用户体验。本文将深入探讨EXT Row Editor的源码，以及如何通过rowexpander_example示例来理解其...
**2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **xtype**: `editorgrid` - **功能描述**：Editor Grid Panel 是一个支持行级编辑的网格面板。 - **主要用途**：适合于需要对表格中的数据进行编辑的场景...
grid.on('cellEdit', function(editor, e) { var updatedData = e.record; DemoService.updateData(updatedData); }); ``` **总结** DWR+EXT的组合为开发富客户端Web应用提供了强大而灵活的工具。通过DWR，...
此外，尽管文档中未明确提及，`Ext.grid.ColumnModel`还支持`editor`属性，它允许为特定列指定编辑器组件，这对于实现复杂的单元格编辑非常有用。 #### 示例代码 ```javascript var colModel = new Ext.grid....
1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid....
在Ext JS中，TreePanel是基于Ext.grid.Panel扩展的，它包含了树形数据的渲染和操作功能。TreePanel可以与Ext.data.TreeStore配合使用，TreeStore负责加载和管理树形数据。TreePanel中的每个节点通常表示为一个条目，...
- `GridEditor.js`: 顾名思义，这可能包含了关于Grid编辑的EXT组件或功能，可能涉及到`lookup`在Grid中的实现。 - `combo.js`: 这个文件可能包含了关于ComboBox的EXT组件扩展或定制，与`lookup`中使用的ComboBox...
首先，Ext的可编辑表格通常指的是`Ext.grid.Panel`或`Ext.grid.Viewport`，它们提供了一种交互式的表格展示和编辑数据的方式。在这些表格中，我们可以配置各列的编辑器，使得用户可以直接在单元格内进行输入或选择...
var grid = Ext.create('Ext.grid.Panel', { ... plugins: [{ ptype: 'cellediting', clicksToEdit: 1 // 单击单元格即进入编辑状态 }], columns: [{ text: 'Name', dataIndex: 'name', editor: { xtype: '...