在学习中Ext.grid.EditorGridPanel 的时候碰到一个知识点,如何用复选框来表示真假值,当然我们可以直接这样
{
header : "管理员?",
dataIndex : 'manager',
width : 55,
editor : new Ext.form.CheckBox()
}
但是这样给我们的感觉不是很好,每次都要我们点击才会出现CheckBox,不能让他默认就显示在哪里,而且表示当前值?官方给了我们一个示例,下面是示例的源代码
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form;
// custom column plugin example
var checkColumn = new Ext.grid.CheckColumn({
header: "Indoor?",
dataIndex: 'indoor',
width: 55
});
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id:'common',
header: "Common Name",
dataIndex: 'common',
width: 220,
editor: new fm.TextField({
allowBlank: false
})
},{
header: "Light",
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "Price",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkColumn
]);
// by default columns are sortable
cm.defaultSortable = true;
// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]);
// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'plants.xml',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant),
sortInfo:{field:'common', direction:'ASC'}
});
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:600,
height:300,
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
plugins:checkColumn,
clicksToEdit:1,
tbar: [{
text: 'Add Plant',
handler : function(){
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
// trigger the data store load
store.load();
});
Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
};
但是问题又来了.我们点击修改值而后台却不被更新,所以我们要对onMouseDown修改一下.
onMouseDown : function(e, t) {
if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var cindex = this.grid.getView().findCellIndex(t);
var record = this.grid.store.getAt(index);
var field = this.grid.colModel.getDataIndex(cindex);
var e = {
grid : this.grid,
record : record,
field : field,
originalValue : record.data[this.dataIndex],
value : !record.data[this.dataIndex],
row : index,
column : cindex,
cancel : false
};
if (this.grid.fireEvent("validateedit", e) !== false && !e.cancel) {
delete e.cancel;
record.set(this.dataIndex, !record.data[this.dataIndex]);
this.grid.fireEvent("afteredit", e);
}
}
}
这样当我们的afteredit被触发后就会执行我们事先设定好的程序,调用业务逻辑修改后台数据.
下面是EditorGridPanel的处理代码
//其他代码省略,这里是grid的listeners属性的配置代码
listeners : {
'afteredit' : function(e) {
Ext.Ajax.request({
url : 'updateUser.action',
params : {
filedName : e.field,
fieldValue : e.value,
userId : e.record.data.userId
},
success : function() {
//alert('ok');
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '修改数据发生错误,操作将被回滚!',
fn : function() {
e.record.set(e.field, e.originalValue);
},
buttons : Ext.Msg.OK,
icon : Ext.Msg.ERROR
});
}
});
}
}
分享到:
相关推荐
2. Ext.grid.EditorGridPanel:EditorGridPanel是Ext JS中的一种网格组件,它扩展了GridPanel,增加了单元格级别的编辑功能。用户可以直接在表格中修改数据,而无需跳转到单独的编辑页面。 二、核心特性 1. 可编辑...
EXT2.0 GRID 示例是一个基于EXT JavaScript库的高级数据展示和操作组件的实例。EXT是一个强大的前端开发框架,尤其在创建交互式Web应用程序方面表现出色。EXT2.0是EXT库的一个早期版本,它提供了丰富的用户界面组件...
在示例代码中,可以看到如何创建一个包含可编辑列的`EditorGridPanel`,并使用`Ext.form.TextField`作为编辑器。`formatDate`函数用于格式化日期,`CheckboxSelectionModel`用于设置多选模式,而`CheckColumn`则用于...
因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.
在EXT JS框架中,"ext 读取xml 可编辑grid"是一个常见的需求,涉及到的主要知识点包括EXT的数据对象、EditorGridPanel的使用以及EXT对XML数据格式的支持。下面将详细阐述这些内容。 EXT JS是一个强大的JavaScript库...
**Checkbox(复选框)** Checkbox组件允许用户选择多个选项中的一个或多个。 ##### 2. **ComboBox(组合框)** ComboBox组件结合了文本框和下拉列表的功能,用户可以在文本框中输入或从下拉列表中选择值。 ####...
- **功能描述**:Checkbox 是一个复选框控件,用户可以通过勾选来选择或取消选择。 - **主要用途**:适用于需要用户进行多选操作的场景。 **2.18 ComboBox (Ext.form.ComboBox)** - **xtype**: `combo` - **功能...
例如,可以创建一个简单的警告框来验证EXT JS库是否成功加载,或者创建一个窗口显示特定内容。 在EXT JS中,类库主要分为以下几个部分: 1. 底层API(core):提供DOM操作、事件处理、DOM查询等基础功能。如...
- **CheckBox**、**ComboBox**、**DateField**、**Field**、**FieldSet**:分别对应复选框、组合框、日期字段、通用字段和字段集,满足不同的表单输入需求。 通过深入理解和掌握Ext JS 4.2的目录结构、核心文件和...
在使用EditorGridPanel进行数据编辑时,用户可能会遇到一个常见的问题,即在单元格编辑过程中,整个视图会向右移动,导致当前编辑的单元格离开视线。这给用户操作带来不便,影响了使用体验。本文将深入探讨这个问题...
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629
73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65 1、Ext类 addBehaviors(Object obj) : void 对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如 addBehaviors({ ...
- **Ext.grid.EditorGridPanel**: 提供单元格级别的编辑功能。 6. **表单(Forms)** - **Ext.form.FormPanel**: 创建表单的容器,支持多种表单元素和验证。 - **Ext.form.Field**: 表单字段类,如文本框、选择...
### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示...
- **CheckBox**:复选框组件,用于多项选择。 - **ComboBox**:下拉组合框,提供数据选择与输入的结合。 - **DateField**:日期输入字段,内置日期选择器。 - **Field**:基本的输入字段组件,支持多种类型。 - **...
var grid = new Ext.grid.EditorGridPanel({ store: store, columns: [ // 列定义 {header: 'ID', width: 50, sortable: true, dataIndex: 'id'}, {header: 'Name', width: 100, sortable: true, dataIndex: '...
它扩展了Sencha Ext JS库,提供了与ASP.NET MVC和Web Forms框架的深度集成。在"Ext.NET后台分页增删改"这个主题中,我们将探讨如何利用Ext.NET实现数据库后台分页、树形视图操作以及Grid面板的CRUD(创建、读取、...
var grid = new Ext.grid.EditorGridPanel({ renderTo: "hello", title: "学生基本信息管理", height: 200, width: 600, cm: colM, store: store, viewConfig: viewConfig }); ``` ### 四、总结 通过上述...
EXT_JS是一种基于JavaScript的富客户端应用开发框架,主要用于构建用户界面。这个开发指南主要涵盖了EXT_JS的基本使用方法和核心概念,对于入门EXT_JS的开发者来说是十分宝贵的资源。以下是EXT_JS的一些关键知识点:...