В моем первом проекте ExtJs4 я использую редактируемую сетку с телом элементов, чтобы под каждой строкой отображалось большое текстовое поле.Я хочу, чтобы он был редактируемым на dblclick.Мне удалось это сделать, заменив innerHTML тела строки текстовой областью, но специальные клавиши не выполняют то, что они должны делать (переместить курсор).Если использовать текстовое поле в обычном поле, у меня нет этой проблемы.Та же проблема в IE7 и FF4
gridInfo = Ext.create('Ext.ux.LiveSearchGridPanel', {
id: 'gridInfo',
height: '100%',
width: '100%',
store: storeInfo,
columnLines: true,
selType: 'cellmodel',
columns: [
{text: "Titel", flex: 1, dataIndex: 'titel', field: {xtype: 'textfield'}},
{text: "Tags", id: "tags", flex: 1, dataIndex: 'tags', field: {xtype: 'textfield'}},
{text: "Hits", dataIndex: 'hits'},
{text: "Last Updated", renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'lastChange'}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
features: [
{
ftype: 'rowbody',
getAdditionalData: function (data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: data.desc, //the big textfieldvalue, can't use a textarea here 8<
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
},
{ftype: 'rowwrap'}
]
});
me.on('rowbodydblclick', function (gridView, el, event, o) {
//...
rb = td.down('.x-grid-rowbody').dom;
var value = rb.innerText ? rb.innerText : rb.textContent;
rb.innerHTML = '';
Ext.create('Ext.form.field.TextArea', {
id: 'textarea1',
value: value,
renderTo: rb,
border: false,
enterIsSpecial: true,
enableKeyEvents: true,
disableKeyFilter: true,
listeners: {
'blur': function (el, o) {
rb.innerHTML = el.value;
},
'specialkey': function (field, e) {
console.log(e.keyCode); //captured but nothing happens
}
}
}).show();
//...
});
Черт, не могу опубликовать свое собственное решение, похоже, что кто-то другой должен ответить, в любом случае, вот функция, которая работает
function editDesc(me, gridView, el, event, o) {
var width = Ext.fly(el).up('table').getWidth();
var rb = event.target;
var value = rb.innerText ? rb.innerText : rb.textContent;
rb.innerHTML = '';
var txt = Ext.create('Ext.form.field.TextArea', {
value: value,
renderTo: rb,
border: false,
width: width,
height: 300,
enterIsSpecial: true,
disableKeyFilter: true,
listeners: {
'blur': function (el, o) {
var value = el.value.replace('\n', '<br>')
rb.innerHTML = value;
},
'specialkey': function (field, e) {
e.stopPropagation();
}
}
});
var txtTextarea = Ext.fly(rb).down('textarea');
txtTextarea.dom.style.color = 'blue';
txtTextarea.dom.style.fontSize = '11px';
}
Привет Molecule Man, в качестве альтернативы подходу, описанному выше, я попробовал Ext.Editor.Это работает, но я хочу, чтобы он был встроенным, но когда я рендерил его в rowbody, поле пустое, и у меня нет редактора, есть идеи?
gridInfo = Ext.create('Ext.grid.Panel', {
id: 'gridInfo',
height: '100%',
width: '100%',
store: storeInfo,
columnLines: true,
selType: 'cellmodel',
viewConfig: {stripeRows: false, trackOver: true},
columns: [
{text: "Titel", flex: 1, dataIndex: 'titel', field: {xtype: 'textfield'}},
//...
{
text: "Last Updated", renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'lastChange'
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
features: [
{
ftype: 'rowbody',
getAdditionalData: function (data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: data.desc,
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
}
],
listeners: {
rowbodyclick: function (gridView, el, event) { //werkt
editDesc(this, gridView, el, event);
}
}
})
;
function editDesc(me, gridView, el, event, o) {
var rb = event.target;
me.txt = new Ext.Editor({
field: {xtype: 'textarea'},
updateEl: true,
cancelOnEsc: true,
floating: true,
renderTo: rb //when i do this, the field becomes empty and i don't get the editor
});
me.txt.startEdit(el);
}