core:change columnmodel's editor
grid.getColumnModel().setEditor(e.column,new Ext.grid.GridEditor(new Ext.form.ComboBox({
..})
))
function rebindcolumneditor(e)
{
var params_ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'report/getDistinctParamValues.do'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',// 记录数的属性
root : 'root'
}, ['paramValue']),
listeners:{
beforeload:function(store,options) {
var new_params = {
paramId : e.record.get('id')
};
Ext.apply(options.params,new_params);
}
}
});
var params_resultTpl = new Ext.XTemplate(
'<div class="search-item-header"><h3>'
+ '<span style="width=300px">可选值</span>'
+ '</h3></div>',
'<tpl for="."><div class="search-item">',
'<h3><span style="width=300px">{paramValue}</span></h3>',
'</div></tpl>');
e.grid.getColumnModel().setEditor(e.column,new Ext.grid.GridEditor(new Ext.form.ComboBox({
store : params_ds,
displayField : 'paramValue',
typeAhead : false,
loadingText : '正在查找...',
listWidth : 300,
pageSize : 10,
hideTrigger : true,
tpl : params_resultTpl,
allowBlank : false,
minChars : 1,
itemSelector : 'div.search-item',
listeners : {
select : function(combo, record, index) {
var selModel = combo.gridObj
.getSelectionModel();
if (selModel.hasSelection()) {
var selections = selModel.getSelections();
combo.gridObj.stopEditing();
Ext.each(selections, function(item) {
item
.set(
'paramValue',
record
.get('paramValue'));
});
}
combo.collapse();
}
}
})));
}
...
listeners:{
beforeedit:function(e)
{
rebindcolumneditor(e);
}
},
分享到:
相关推荐
Ext.grid.EditorGridPanel是Ext JS库中的一个组件,主要用于创建具有可编辑单元格的表格。这个组件在数据展示和编辑方面提供了丰富的功能,是构建数据密集型应用的理想选择。下面将详细阐述其特点、工作原理及如何...
1. **固定单元格宽度**:在配置EditorGridPanel时,为每一列设置固定的宽度,防止编辑时宽度变化。 2. **禁用滚动条自动调整**:可以监听编辑事件,当开始编辑时,临时禁用grid的滚动条自动调整功能,结束编辑后恢复...
然后,我们在ColumnModel中定义了一个列,该列使用`rendererDepartmentCombobox`函数进行渲染,这个函数会根据当前cell的值在`comboxDepartmentStore`中查找对应的记录,并返回displayField的值(在这个例子中是`...
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629
在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先,我们需要...
开发者可能会使用`Ext.grid.EditorGridPanel`,并为每个列定义一个`editor`属性来启用单元格编辑。同时,Store的配置可能包括数据源(即"data"),以及定义字段的`fields`属性。 在深入理解这个demo的过程中,你...
通过在列配置中指定`editor`属性,我们可以为每个单元格添加编辑器,例如`TextField`、`ComboBox`等,使得用户可以直接在网格中修改数据。编辑时,`EditorGridPanel`会使用这些编辑器来控制用户的输入,并在用户完成...
因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.
列模型定义了表格中列的布局、可见性、宽度等属性。 6. **sm/selModel** - **描述**:`sm`和`selModel`用于指定表格的选择模式。默认情况下,表格使用`Ext.grid.RowSelectionModel`,这意味着用户可以选择单行或...
在EXT JS框架中,"ext 读取xml 可编辑grid"是一个常见的需求,涉及到的主要知识点包括EXT的数据对象、EditorGridPanel的使用以及EXT对XML数据格式的支持。下面将详细阐述这些内容。 EXT JS是一个强大的JavaScript库...
对于ExtJS EditorGridPanel中ComboBox列的显示问题,可能是因为数据没有正确绑定或格式化问题,确保`store`已加载数据,并且在`renderer`函数中正确显示数据。 至于回显问题,即在编辑时显示已有的数据,需要确保在...
Ext.grid.RowNumberer是一个特殊的Grid列组件,用于显示每行的行号。 实现Grid中嵌入ComboBox的大致步骤如下: 1. 定义ComboBox组件:首先需要创建一个ComboBox实例,并指定其id属性,这个id将用于后续的ComboBox...
每个列应关联到树节点的一个属性,并配置适当的editor,如TextField、ComboBox等。 3. **添加CellEditing插件**:EXT JS的CellEditing插件使用户能够点击单元格进行编辑,完成后自动保存更改。需在GridPanel上启用...
在这个例子中,`EditorGridPanel` 提供了对每个单元格的编辑功能,并且还增加了一个工具栏按钮来保存所有的更改。 #### 数据存储器 `Store` 数据存储器是 `GridPanel` 和 `EditorGridPanel` 必不可少的一部分。它...
右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。
接下来,我们通过一个具体的例子来说明如何实现上述四种情况中的第三种情况:页面加载时显示Grid但不查询数据,通过事件触发查询。 ```javascript // 创建数据Store var fds = new Ext.data.Store(); // 创建...
2. **配置GridPanel**:创建一个Editgridpanel实例,设置store为上一步创建的store,定义列模型(ColumnModel),并启用行编辑功能。 ```javascript var grid = new Ext.grid.EditorGridPanel({ store: store, ...
在第二部分“ExtJS Components”中,作者进一步细化了组件的具体实现和应用场景。第四章“A place for Components”中,详细介绍了各种组件的使用方法,包括按钮、标签、输入框等,并通过示例演示了如何将它们组合在...