[2.2] RowExpander

Posted in xn--kfs74mzzid01b.com edit by wktd on January 7th, 2009

Hi,
how to implement editor on row body? I need to enable dblclick on row body content and to show textfield editor, which after edit will affect on record.data store.

var expander = new Ext.grid.RowExpander({
tpl: new Ext.Template(
'

Inhalt
{textarea}

'
)
});

When I put editor config attribute on RowExpander I got editor enabled on expaned icon, but I don't need that!

var expander = new Ext.grid.RowExpander({
tpl: new Ext.Template(
'

Inhalt
{textarea}

'
),
editor: new Ext.form.TextArea({allowBlank:true})
});

Check screenshot posted here, please any kind of help! You can see gray field in row body which I need to edit with Ext.form.TextArea component.

Best regards,
Aleksandar Cajic

Im sorry that i can not help about that issue with Safari browser but I have one questio too abuot RowExpander and state.Manager

How to save RowExpander state (expanded/collapsed row) on expand or collapse? It is important to get expanded row again expanded after reload of complete page or just grid store (store.load()).

I've tried with Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); in my code but it doesn't working, it has effect only on grid columns.

Best regards,
Aleksandar Cajic

In safari browser I can only make editor popup and stay up if I suspend grid events and even then from second double click on.

I guess there are some grid events firing at the same time which stops the editor. I can see that complete event on editor fires.

I guess there must be some default grid event causing this.

Thank you very much, I've tried already to implement ext.grid.grideditor in my code and it is working fine. ;) But, there is always some but, on start edit I got complete template data instead pure data from store object. If in your example instead "tpl: new Ext.Template('{field2}')" is set "tpl: new Ext.Template('Field: {field2}

grid.getEl() only returns an element after the grid is rendered.
Try moving the code to the render even of the grid.

yes this is EditorGridPanel at screenshot but I've implement RowExpander as plugin in column model... and everything working very good but I need on double click at that gray part of expanded row an editor where it is possible to edit data for that field.

Here it is how Grid component:

var grid;
return grid = new Ext.grid.EditorGridPanel({
id:'editableActionGrid',
store: store,
clicksToEdit:2,
autoScroll:true,
loadMask: true,
plugins: expander,
collapsible: true,
enableDragDrop:false,
columns: [
expander,
{id:"id", header: "Lfd. Nr.", width:10, sortable: true, dataIndex: 'id'},
{header: "Datum", width:20, sortable: true, dataIndex: 'dateActual', renderer: Ext.util.Format.dateRenderer('d.m.Y'), editor:new Ext.form.DateField({id:'dateActual',format:'d.m.Y' ,minValue:'01.01.2006'})},
{header: "Uhrzeit", width:20, sortable: true, dataIndex: 'timeActual', editor:new Ext.form.TimeField({increment:1,readOnly:true,allo wBlank:false,format:'H:i A'})},
{header: "von", width:20, sortable: true, dataIndex: 'from', editor:new Ext.form.ComboBox({listWidth:350,typeAhead:false,t pl:resultTpl,itemSelector: 'div.search-item',triggerAction: 'all',editable:true,store: fromStore,valueField:'value',displayField:'value', mode:'local'})},
{header: "an", width:20, sortable: true, dataIndex: 'to', editor:new Ext.form.ComboBox({listWidth:350,typeAhead:false,t pl:resultTpl,itemSelector: 'div.search-item',triggerAction: 'all',editable:true,store: fromStore,valueField:'value',displayField:'value', mode:'local'})},
{header: "Kategorie", width:20, sortable: true, dataIndex: 'category', editor:new Ext.form.ComboBox({typeAhead:false,tpl:resultTpl,i temSelector: 'div.search-item',triggerAction: 'all',editable:true,store: cateogryStore,valueField:'value',displayField:'val ue',mode:'local'})},
{header: "Erledigt von", width:20, sortable: true, dataIndex: 'finishFrom', editor:new Ext.form.ComboBox({listWidth:350,typeAhead:false,t pl:resultTpl,itemSelector: 'div.search-item',triggerAction: 'all',editable:true,store: fromStore,valueField:'value',displayField:'value', mode:'local'})},
{header: "Erledigt am", width:20, sortable: true, dataIndex: 'finishDate', renderer: Ext.util.Format.dateRenderer('d.m.Y'), editor:new Ext.form.DateField({format:'d.m.Y',minValue:'01.01 .2006'})},
{header: "Erledigt am uhrzeit", width:20, sortable: true, dataIndex: 'finishTime', editor:new Ext.form.TimeField({increment:1,readOnly:true,allo wBlank:false,format:'H:i A'})},
{header: "Documents", width:20, sortable: true, dataIndex: 'documents', renderer: documentRender}
],
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
viewConfig:{
forceFit:true
},
stripeRows: true,
listeners: {
render: {
fn: function() {
grid.getSelectionModel().selectFirstRow()
}
}
}
});

Here we can see that plugin is in use and expander object is located in column model as first in list.

It's not that easy.

The component determines which properties should be saved and which events cause these properties to change. Default, a grid panel only stores the order, width and visibility of columns.

You will need to extend the RowExpander plugin and make it modify the getState and applyState methods of the grid and also call applyState on expand and collapse.

Here is a working example:
Ext.onReady(function(){
var expander = new Ext.grid.RowExpander({
lazyRender: false,
enableCaching: false,
tpl : new Ext.Template(
'{field2}'
)
});
var grid = new Ext.grid.EditorGridPanel({
store: new Ext.data.SimpleStore({
fields: ['field1', 'field2'],
data: [
['Row 1', Ext.example.bogusMarkup],
['Row 2', Ext.example.bogusMarkup],
['Row 3', Ext.example.bogusMarkup],
['Row 4', Ext.example.bogusMarkup]
]
}),
columns: [
expander,
{header: 'Field 1', dataIndex: 'field1', editor: new Ext.form.TextField()}
],
plugins: [expander],
viewConfig: {
forceFit: true
}
});
var viewport = new Ext.Viewport({
layout: 'fit',
items: [grid]
});
var editor = new Ext.grid.GridEditor(new Ext.form.TextArea({
enterIsSpecial: true
}), {
completeOnEnter: true,
cancelOnEsc: true,
listeners: {
complete: function(ed, value) {
ed.grid.getStore().getAt(ed.row).set('field2', value);
}
}
});
grid.getEl().on('dblclick', function(e) {
editor.grid = this;
editor.row = this.getView().findRowIndex(e.target);
editor.startEdit(e.target);
}, grid, {delegate: '.x-grid3-row-body'});
});

Does it work correctly if you stop the event?

grid.getEl().on('dblclick', function(e) {
editor.grid = this;
editor.row = this.getView().findRowIndex(e.target);
editor.startEdit(e.target);
}, grid, {delegate: '.x-grid3-row-body', stopEvent: true});

Condor, I have tried your solution, but for me it fails with attaching event to the grid element.
grid.getEl() returns null.

Mostly my example is preaty much the same as yours just with some more extra stuff.
I am trying to narow problem down. Any idea why getEl would return null?

Thanks,
Pet

do you mean editorGridPanel .. ?

Thanks Condor. You are right.
There seems to be some issue with Safari browser. Editor pops up for a moment of a second and then disapires. This can also be reproduced using your basic example.
Any idea on this one?

Unfortunately no.
"complete" event is still fired (by grid I believe) imediately.
This only happenes in Safari browser. FF and IE are ok.

ok, thanx for your reply! When I got some more time i will take a look about that.

#If you have any other info about this subject , Please add it free.#

[2.2] RowExpander

Archives

Meta