Databases
StackOverflow2013
Postsdbo
POExtjs4: editable rowbody
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExtjs4: editable rowbody
    primarykey
    data
    text
    <p>in my first ExtJs4 project i use a editable grid with the feature rowbody to have a big textfield displayed under each row. I want it to be editable on a dblclick. I succeeded in doing so by replacing the innerHTML of the rowbody by a textarea but the special keys don't do what they are supposed to do (move the cursor). If a use the textarea in a normal field i don't have this problem. Same problem in IE7 and FF4</p> <pre class="lang-js prettyprint-override"><code>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&lt; 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(); //... }); </code></pre> <p>damn, can't publish my own solution, looks like somebody else has to answer, anyway, here is the function that works</p> <pre class="lang-js prettyprint-override"><code>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', '&lt;br&gt;') 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'; } </code></pre> <p>Hi Molecule Man, as an alternative to the approach above i tried the Ext.Editor. It works but i want it inline but when i render it to the rowbody, the field blanks and i have no editor, any ideas ?</p> <pre class="lang-js prettyprint-override"><code>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); } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USnepda
    1. USpeter
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POExtjs4: editable rowbody
      1. USpeter
      1. VTFavorite
    1. COJust a note: You are reinventing the wheel by replacing innerHTML with your textarea. There is built-in widget which do allmost the same - [`Ext.Editor`](http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Editor)
      singulars
      1. POExtjs4: editable rowbody
      1. USMolecular Man
    2. COi'll look into Ext.Editor if i can find a good example (often the problem), but i have found the solution to the problem, i'll publsih the code here under, please comment
      singulars
      1. POExtjs4: editable rowbody
      1. USpeter
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload