<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
</head>
<body>
<br>
<script>
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',editor: new Ext.form.TextField({allowBlank:false}),sortable:true},
{header:'名称',dataIndex:'name',editor: new Ext.form.TextField({allowBlank:false})},
{header:'描述',dataIndex:'descn',editor: new Ext.form.TextField({allowBlank:false})}
]);
var data = [
['1','d','descn1'],
['2','dfg','descn2'],
['3','fg','descn3'],
['4','f','descn4'],
['5','dfg','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
store.load();
var Record = new Ext.data.Record.create([
{name:'id',type:'int'},
{name:'name',type:'string'},
{name:'descn',type:'string'}
]);
var grid = new Ext.grid.EditorGridPanel({
renderTo: 'grid',
store: store,
width: 400,
height:200,
cm: cm,
tbar: new Ext.Toolbar(['-', {
text:'添加一行',
handler:function() {
var p = new Record({
id:'',
name:'',
descn:''
});
grid.stopEditing();
store.insert(0,p);
grid.startEditing(0, 0);
}
},'-', {
text:'删除一行',
handler:function() {
Ext.Msg.confirm('信息','确定要删除？',function(btn) {
if(btn == 'yes') {
var sm = grid.getSelectionModel();
var cell = sm.getSelectedCell();
var record = store.getAt(cell[0]);
store.remove(record);
}
});
}
}, '-'])
});
});
</script>
<div id="grid">
</div>
</body>
</html>
分享到：
相关推荐
Ext.grid.EditorGridPanel是Ext JS库中的一个组件，主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能，是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...
因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.
在EXT JS框架中，"ext 读取xml 可编辑grid"是一个常见的需求，涉及到的主要知识点包括EXT的数据对象、EditorGridPanel的使用以及EXT对XML数据格式的支持。下面将详细阐述这些内容。 EXT JS是一个强大的JavaScript库...
【Ext TreePanel】是Ext JS库中的一个组件，主要用于展示层次结构...总之，Ext TreePanel和EditorGridPanel是Ext JS中处理树形数据和可编辑表格的强大工具，它们提供了丰富的功能和定制选项，满足各种复杂的应用场景。
EditorGridPanel是Ext JS库中的一个组件，它结合了数据网格和表单编辑的功能，允许用户直接在网格的单元格内编辑数据。当用户点击某个单元格进行编辑时，编辑器应该在原单元格位置弹出，但有时由于某种原因，整个...
73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65 1、Ext类 addBehaviors(Object obj) : void 对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如 addBehaviors({ ...
### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架，用于构建桌面级Web应用程序。它提供了大量的组件和工具，使得开发者能够快速且高效地构建用户界面。对于初学者而言，理解...
**2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **xtype**: `editorgrid` - **功能描述**：Editor Grid Panel 是一个支持行级编辑的网格面板。 - **主要用途**：适合于需要对表格中的数据进行编辑的场景...
3. **行编辑**：EXT GRID支持行内编辑，用户可以直接在表格中修改数据，这需要结合EditorGridPanel和Form Field组件来实现。 4. **排序和过滤**：GRID可以实现列点击排序，通过配置`sortable`属性和`sortInfo`对象...
- **Ext.grid.EditorGridPanel**: 提供单元格级别的编辑功能。 6. **表单（Forms）** - **Ext.form.FormPanel**: 创建表单的容器，支持多种表单元素和验证。 - **Ext.form.Field**: 表单字段类，如文本框、选择...
var grid = new Ext.grid.EditorGridPanel({ renderTo: "hello", title: "学生基本信息管理", height: 200, width: 600, cm: colM, store: store, viewConfig: viewConfig }); ``` ### 四、总结 通过上述...
var grid = new Ext.grid.EditorGridPanel({ store: store, columns: [ // 列定义 {header: 'ID', width: 50, sortable: true, dataIndex: 'id'}, {header: 'Name', width: 100, sortable: true, dataIndex: '...
### Ext表格控件和树...通过以上内容，我们可以看到 `GridPanel`、`EditorGridPanel` 和 `TreePanel` 在 Ext JS 中的应用非常广泛，它们提供了强大的数据展示和编辑能力，同时也为开发者提供了高度的灵活性和定制性。
使用`EditorGridPanel`可开启单元格编辑。对于添加，可以添加一个工具栏按钮，绑定`add()`方法。删除操作通常通过行的右键菜单或工具栏按钮触发，调用`store.remove()`。更新数据则在用户编辑单元格后，调用`store....
为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性，重新渲染，方法如下： 代码如下: //部门列表 var comboxDepartmentStore = new Ext.data.Store({ proxy: new Ext.data....
感谢 Ericzhen 远离颠倒梦想，蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html
- **EditorGridPanel**：具备编辑功能的网格面板，方便数据的批量编辑。 - **GridPanel**：表格组件，用于展示和管理大量数据。 - **PagingToolbar**：分页工具栏，用于处理大数据集的分页显示。 - **Panel**：面板...
- **表单及元素组件**：Editor（编辑器）、EditorGridPanel（可编辑表格）等。 EXT_JS的强项在于它的组件化设计，使得开发者能够快速地搭建复杂的UI界面，并且提供了丰富的功能和良好的性能。通过对EXT_JS的学习和...