[CLOSED] Date column editor triggers Store update unnecessarily

  1. #1

    [CLOSED] Date column editor triggers Store update unnecessarily

    Hi,

    On GridPanel cell click, I'm attaching a Date column editor as follows:

                        column.setEditor(new Ext.form.DateField({
                            format:"M d, Y",
                            selectOnFocus:false,
                            listeners:{
                                select:{
                                    fn:function(item,record,index){
                                        gridRecord.set("DateValue", this.getValue());
                                    }
                                },
    
                                triggerclick:{
                                    fn:function(item,trigger,index,tag,e){
                                        this.setValue(null);
                                    }
                                }
                            },
                            triggersConfig:[
                                {
                                    iconCls:"x-form-clear-trigger",
                                    qtip:"<nobr>Set to empty</nobr>"
                                }
                            ]
                        }));
    This code works fine with a slight issue: if the cell gets focus, then no change is made and control is moved away, it still triggers Update event on the GridPanel store. Any other cell editor I've put in place don't do that. Here's the NumberField, for example:

                        
    column.setEditor(new Ext.form.NumberField({
                            allowDecimals:false,
                            allowNegative:false,
                            maxLength:"10",
                            selectOnFocus:true,
                            iconCls:"ux-icon-cls",
                            enableKeyEvents:true,
                            listeners:{
                                blur:{
                                    fn:function(item,record,index){
                                        gridRecord.set("IntValue", this.getValue());
                                    }
                                },
                                keyup:{
                                    fn:function(item,record,index){
                                        // Enable action buttons here
                                    }
                                }
                            }                    
                        }));
    Could you please suggest what config changes are necessary to suppress this issue? Let me know if more info is required here.
    Last edited by Daniil; Nov 22, 2012 at 1:00 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    What are the values of that column?
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi Vadym,

    What are the values of that column?
    It could be any valid date in the format of "M d, y" or null. But I'm thinking the renderer function set on the Grid column could be messing up with it:

            var valueRenderer = function (value) {
                if (value instanceof Date) {
                    value = Ext.util.Format.date(value, "M d, Y");
                }
                return value;
            };
    
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column Header="Value" DataIndex="DisplayValue" Width="360" Sortable="false">
                                <Renderer Fn="valueRenderer" />
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
    When I commit changes by calling Grid.getStore().save(), the issue doesn't happen any more. It's there when the Grid is loaded initially.
    Last edited by vadym.f; Nov 21, 2012 at 8:12 PM.
  4. #4
    I guess the problem lays here:
    select:{
        fn: function (item,record,index){
            gridRecord.set("DateValue", this.getValue());
        }
    }
    Probably, the DateValue field is updated here. Maybe, from null to an empty string, because the getValue returns an empty string if no value.

    Maybe, this can help.
    var dateValue = gridRecord.get("DateValue"),
        value = this.getValue();
    
    if (dateValue === null and value === "") {
        value = null;
    }
    
    gridRecord.set("DateValue", value);
    Or you could get empty strings instead of nulls in DateValue using RecordField's Convert handler.

    By the way, you could use DateColumn instead of common Column. It would allow sorting.
  5. #5
    Quote Originally Posted by Daniil View Post
    I guess the problem lays here:
    select:{
        fn: function (item,record,index){
            gridRecord.set("DateValue", this.getValue());
        }
    }
    Probably, the DateValue field is updated here. Maybe, from null to an empty string, because the getValue returns an empty string if no value.

    Maybe, this can help.
    var dateValue = gridRecord.get("DateValue"),
        value = this.getValue();
    
    if (dateValue === null and value === "") {
        value = null;
    }
    
    gridRecord.set("DateValue", value);
    Or you could get empty strings instead of nulls in DateValue using RecordField's Convert handler.

    By the way, you could use DateColumn instead of common Column. It would allow sorting.
    Thanks for your response Daniil!

    Select handler doesn't fire if I just enter the cell and then leave it without editing. I doubt if I can use a DateColumn in my case since the editors are created dynamically and they are of different types.
  6. #6
    Quote Originally Posted by vadym.f View Post
    Select handler doesn't fire if I just enter the cell and then leave it without editing.
    Understand. Then you should get empty strings instead of nulls setting up a respective Convert handler for the RecordField.

    Quote Originally Posted by vadym.f View Post
    I doubt if I can use a DateColumn in my case since the editors are created dynamically and they are of different types.
    Probably, you are right:)
  7. #7
    Hi Daniil!

    Thanks again for the pointers. Eventually, I'm leaning towards moving my button enabling logic out of the Store Update handler and into each individual column editor. So, for textual editors (NumberField, TextField and TextArea) it will be something like

            keyup:{
                      fn:function(item,record,index){
                            #{ButtonSave}.enable();
                            #{ButtonReset}.enable();
                      }
            }
    and for combo- and date type editors (ComboBox, MultiCombo and DateField)
            select:{
                      fn:function(item,record,index){
                             #{ButtonSave}.enable();
                             #{ButtonReset}.enable(); 
                      }
            },
            triggerclick:{
                             fn:function(item,trigger,index,tag,e){
                                     this.setValue(null);
                                     #{ButtonSave}.enable();
                                     #{ButtonReset}.enable();
                             }
             }
    and for complex cell editors (popup encapsulated custom drag-and-drop multi-selects and forms) I'm going to have to implement custom logic.

    This design is apparently less elegant and more redundant, but as long as it meets my UI requirements, it will be al-right.

    You can mark this thread as closed.
  8. #8
    Good.

    Please also consider a possibility to use "change" event instead of all the "keyup", "select", "triggerclick" ones.

    I am not 100% sure, but it should work as you need.

Similar Threads

  1. Replies: 3
    Last Post: Jul 24, 2012, 8:40 PM
  2. [CLOSED] Change Store Datasource in Combo Editor Column inside GridPanel
    By tlfdesarrollo in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Apr 13, 2012, 7:32 PM
  3. Replies: 0
    Last Post: Jan 24, 2011, 12:10 PM
  4. Replies: 5
    Last Post: Aug 03, 2010, 11:20 AM
  5. setting the default value of a date type column of store from backend ?
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 2
    Last Post: Oct 16, 2009, 5:35 PM

Tags for this Thread

Posting Permissions