[CLOSED] CellEditing Listeners and Column Renders

  1. #1

    [CLOSED] CellEditing Listeners and Column Renders

    I have column renderers that are changing the style based on the IsActive field. The IsActive field is calculated based on the DateActivated and DateInactivated fields.

    I believe my issue is that when the DateActivated or DateInactivated fields are edited I recalculate the IsActive field, but the renderers have already fired before I can change the IsActive field. If that is true that the renderers for a column fire before the Edit listener on the cell I have an problem. I need the renderers to fire after I change the IsActive field manually.

    1) I would guess the most efficent approach would be to refire the column renderers if the IsActive field is changed during the Edit listener. Is this possible?

    ...
       <script type="text/javascript">
          var template = 'color:{0};';
    
          function styleColor(value, meta) {
             var testField = meta.record.data["IsActive"];
             meta.style = Ext.String.format(template, testField ? "green" " black");
             return value;
          } 
    
          function dateWithStyleColor(value, meta) {
             return Ext.Date.format(styleColor(value, meta), 'Y-m-d');
          } 
    
          function cellEdit (editor, e) {
             if (e.field == "DateActivated"  || e.field == "DateInactivated") {
                e.record.data.IsActive = (e.record.data.DateActivated !== null && e.record.data.DateActivated <= new Date()) &&
                                                    (e.record.data.DateInactivated == null || e.record.data.DateInactivated > new Date());
             }
          }
       </script>
    ...
       <ext:Column runat="server" Text="Name" DataIndex="BaseNm">
          <Renderer Fn="styleColor" />
          <Editor>
             <ext:TextField runat="server" MaxLength="25" EnforceMaxLength="true" AllowBlank="false" />
          </Editor>
       </ext:Column>
       <ext:Column runat="server" Text="Activated" DataIndex="DateActivated">
          <Renderer Fn="dateWithStyleColor" />
          <Editor>
             <ext:DateField runat="server" Format="Y-MM-dd" />
          </Editor>
       </ext:Column>
       <ext:Column runat="server" Text="Inactivated" DataIndex="DateInactivated">
          <Renderer Fn="dateWithStyleColor" />
          <Editor>
             <ext:DateField runat="server" Format="Y-MM-dd" />
          </Editor>
       </ext:Column>
       <ext:Column runat="server" Text="IsActive" DataIndex="IsActive" Hidden="true" Hideable="false" />
    ...
       <Plugins>
          <ext:CellEditing runat="server">
             <Listeners>
                <Edit Fn="cellEdit" />
             </Listeners>
          </ext:CellEditing>
       </Plugins>
    Last edited by Daniil; Nov 05, 2013 at 3:38 PM. Reason: [CLOSED]
  2. #2
    Obviously an alternate way is to recalculate the IsActive value on every render. I have that working, but is it really the most efficent?
  3. #3
    After reading through the Sencha documents I deceided to use the validateEdit listener function to set the isActive value. I am always return true from the validateEdit listener.

    Ext.grid.plugin.CellEditing
    validateedit( editor, e, eOpts )
    Fires after a cell is edited, but before the value is set in the record. Return false from event handler to cancel the change.
  4. #4
    Hello!

    Yes, 'edit' event fires after a row refresh, while 'validateEdit' fires before.

    However, if you use record's set method it should refresh automatically: http://docs.sencha.com/extjs/4.1.3/#...del-method-set

    Also, you always can refresh automatically using refreshNode method: http://docs.sencha.com/extjs/4.1.3/#...od-refreshNode
  5. #5
    Please close the thread.

    I have decided to use the 'validateEdit' listener instead of the 'edit' listener to calculate the IsActive modelField from the two other modelFields (DateActivated & DateInactivated). Thus everything is correctly defined before the row is refreshed (rerendered).

    Thank you for the additional method references. I was setting the IsActive data directly e.record.data.IsActive = value. I have switched to e.record.set('IsActive', value).

    Works perfectly.

Similar Threads

  1. Replies: 6
    Last Post: Mar 24, 2014, 8:03 AM
  2. Replies: 6
    Last Post: Jun 20, 2013, 2:25 PM
  3. [CLOSED] CellEditing Plugin tab key
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Jun 05, 2013, 8:03 AM
  4. [CLOSED] V2.1 CellEditing validate
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Dec 29, 2012, 9:34 AM
  5. [CLOSED] CellEditing plugin
    By Kev in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 13, 2012, 9:06 PM

Posting Permissions