[英]Display issue with RowEditor and checkcolumn on ExtJS GridPanel
I'm using an ExtJS (v3.4.0) GridPanel with the RowEditor extension to allow users to add lines of text to a grid. 我正在使用带有RowEditor扩展名的ExtJS(v3.4.0)GridPanel,以允许用户向网格中添加文本行。 I have also used the checkcolumn extension so users can check certain lines of text for later processing. 我还使用了checkcolumn扩展名,以便用户可以检查某些文本行以供以后处理。 So far, it looks like this: 到目前为止,它看起来像这样:
However, when editing a row, the problem at hand becomes apparent: 但是,在编辑一行时,眼前的问题显而易见:
The value underlying the checkcolumn is being displayed in text form along with the actual checkbox. 检查列下面的值以文本形式显示,并带有实际的复选框。 I figured since users can check the checkboxes without editing the row, I would make this column uneditable to fix my issue. 我认为,由于用户可以在不编辑行的情况下选中复选框,因此我将使此列不可编辑以解决我的问题。 However, after modifying my code the true/false value is still being displayed in edit mode, the text value is just not editable anymore. 但是,修改我的代码后,true / false值仍在编辑模式下显示,文本值不再可编辑。
My code so far: 到目前为止,我的代码:
Ext.QuickTips.init();
var FreeText = Ext.data.Record.create([{
name: 'text',
type: 'string'
}, {
name: 'active',
type: 'bool'
}]);
var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({fields: FreeText}),
sortInfo: {field: 'text', direction: 'ASC'}
});
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});
var freeTextPanel = new Ext.grid.GridPanel({
store: store,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'text',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-add',
text: 'Add',
handler: function(){
var e = new FreeText({
text: "",
active: true
});
editor.stopEditing();
store.insert(0, e);
freeTextPanel.getView().refresh();
freeTextPanel.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-delete',
text: 'Delete',
disabled: true,
handler: function(){
editor.stopEditing();
var s = freeTextPanel.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}, {
xtype: 'tbseparator'
}, {
iconCls: 'icon-excel-import',
//text: 'Import from CSV',
tooltip: 'Import CSV',
handler: function() {
alert( "Excel import here!" );
}
}],
columns: [
{
xtype: 'checkcolumn',
header: 'Active',
dataIndex: 'active',
align: 'center',
width: 50
}, {
id: 'text',
header: 'Free Text',
dataIndex: 'text',
width: 220,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}],
isCellEditable: function(col, row) {
var record = store.getAt(row);
if (record.get('active')) {
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);
}
});
var layout = new Ext.Panel({
title: 'Free text entry',
layout: 'border',
layoutConfig: {
columns: 1
},
width:600,
height: 600,
items: [freeTextPanel]
});
layout.render(Ext.getBody());
freeTextPanel.getSelectionModel().on('selectionchange', function(sm){
freeTextPanel.removeBtn.setDisabled(sm.getCount() < 1);
});
Is there an easy way to simply get rid of the true/false text when editing a row? 有没有一种简单的方法可以在编辑行时简单地删除真假文本?
Just in case, below are my RowEditor.js and CheckColumn.js files: 以防万一,下面是我的RowEditor.js和CheckColumn.js文件:
RowEditor.js http://trac.geoext.org/browser/ext/3.4.0/examples/ux/RowEditor.js?rev=2740 RowEditor.js http://trac.geoext.org/browser/ext/3.4.0/examples/ux/RowEditor.js?rev=2740
CheckColumn.js http://trac.geoext.org/browser/ext/3.4.0/examples/ux/CheckColumn.js?rev=2740 CheckColumn.js http://trac.geoext.org/browser/ext/3.4.0/examples/ux/CheckColumn.js?rev=2740
Turns out the solution to my problem was rather simple. 事实证明,解决我的问题的方法很简单。
In the startEditing method of the RowEditor.js file I added the following code. 在RowEditor.js文件的startEditing方法中,添加了以下代码。 I checked implicitly on the name of my item instead of for the checkbox type, in case I still need this functionality for other checkboxes later on: 如果以后我仍然需要此功能用于其他复选框,则我隐式地检查了商品的名称,而不是复选框的类型:
for(var i = 0, len = cm.getColumnCount(); i < len; i++){
val = this.preEditValue(record, cm.getDataIndex(i));
if( cm.getDataIndex(i) == 'active' ) {
val = "";
}
f = fields[i];
f.setValue(val);
this.values[f.id] = Ext.isEmpty(val) ? '' : val;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.