[CLOSED] How to trigger DropDownField expand event on GridPanel cell click?

  1. #1

    [CLOSED] How to trigger DropDownField expand event on GridPanel cell click?

    Hi,

    Please suggest the proper way to trigger a cell editor DropDownField expand event when the user clicks on the cell to begin editing. Wherever the editor is set up as DateField, please recommend how to expand the Date picker on the GridPanel cell click. Below is the code sample with initial set-up. Please advise if the info provided is inadequate.

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[]
                {
                      new object[] { "id1", "DateField", "Nov 01, 2011" },
                      new object[] { "id2", "ComboBox" },
                      new object[] { "id3", "DateField", "Dec 12, 2011" },
                      new object[] { "id4", "ComboBox" },
                      new object[] { "id5", "TextArea" }
                };
                store.DataBind();
     
                new TriggerField().RegisterIcon(TriggerIcon.Clear);
            }
        }
     
        protected void ComboBoxStore_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            Store store = sender as Store;
            string id = e.Parameters["id"];
            store.DataSource = new object[]
            {
               new object[] { id + "_" + DateTime.Now.Second, "1" },
               new object[] { id + "_" + DateTime.Now.Second, "2" }
            };
            store.DataBind();
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET Example</title>
        <script type="text/javascript">
            var setEditor = function (e) {
                var column = e.grid.getColumnModel().columns[e.column], ed = column.getCellEditor(e.row);
                if (ed) {
                    ed.destroy();
                }
     
                var gridRecord=e.record;
                switch (e.record.get("editor")) {
                    case "DateField":
                        column.setEditor(new Ext.form.DateField({ altFormats: 'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j|M d, Y' }));
                        break;
                    case "TextArea":
                        column.setEditor(new Ext.grid.GridEditor(
                            Ext.apply({
                                field: {
                                    id: "DropDownField1",
                                    xtype: "netdropdown",
                                    triggersConfig:[{iconCls:"x-form-clear-trigger"}],
                                    editable:false,
                                    component:{
                                        id:"ComponentPanel1",
                                        xtype:"panel",
                                        frame:false,
                                        border:false,
                                        items:{
                                            id:"Editor1",
                                            xtype:"textarea",
                                            listeners:{
                                                change:{
                                                    fn:function(item,e){
                                                        DropDownField1.setValue(this.getValue());
                                                        gridRecord.set("value", this.getValue());
                                                    }
                                                },
                                                keyup:{
                                                    fn:function(item,e){
     
                                                    }
                                                },
                                            },
                                            enableKeyEvents:true,
                                            selectOnFocus:true
                                        },
                                        layout:"fit"
                                    },
                                    listeners:{
                                        expand:{
                                            fn:function(item){
                                                Editor1.setHeight(column.width*0.625);
                                                Editor1.setValue(gridRecord.get("value"));
                                                Editor1.focus.defer(1, Editor1);
                                            }
                                        },
                                        triggerclick:{
                                            fn:function(item,trigger,index,tag,e){
                                                this.setValue("");
                                                gridRecord.set("value", "");
                                            }
                                        }
                                    }
                                }
                            },
                            {})
                            ));
                        break;
                    case "ComboBox":
                        column.setEditor(new Ext.form.ComboBox({
                            displayField: "text",
                            valueField: "value",
                            triggerAction: "all",
                            store: ComboBoxStore,
                            listeners: {
                                select: {
                                    fn: function (item, record, index) {
     
                                    }
                                }
                            }
                        }));
                        ComboBoxStore.on("beforeload", function (store, options) {
                            options.params = {
                                id: e.record.data.id
                            }
                        }, null, {
                            single: true
                        });
                        break;
                }
            };
     
            var testRenderer = function (value) {
                var record = ComboBoxStore.getById(value);
                if (record) {
                    value = record.data.text;
                } else if(value instanceof Date) {
                    value = Ext.util.Format.date(value, "Y-m-d");
                }
                return value;
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Locale="en" ScriptMode="Debug"
            SourceFormatting="True" />
        <ext:Store ID="ComboBoxStore" runat="server" OnRefreshData="ComboBoxStore_RefreshData"
            AutoLoad="false">
            <Proxy>
                <ext:PageProxy />
            </Proxy>
            <Reader>
                <ext:ArrayReader IDProperty="value">
                    <Fields>
                        <ext:RecordField Name="text" />
                        <ext:RecordField Name="value" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" ClicksToEdit="1">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="id" />
                                <ext:RecordField Name="editor" />
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="ID" DataIndex="id" />
                    <ext:Column Header="Editor" DataIndex="editor" />
                    <ext:Column Header="Test" DataIndex="test">
                        <Renderer Fn="testRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Listeners>
                <BeforeEdit Fn="setEditor" />
                <AfterEdit Handler="if (e.record.data.editor == 'DateField' && Ext.util.Format.date(e.originalValue, 'Y-m-d') == Ext.util.Format.date(e.value, 'Y-m-d')) { 
                              e.record.reject(); 
                  }"></AfterEdit>
                <Render Handler="this.getColumnModel().setEditable(2, true);" />
            </Listeners>
        </ext:GridPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Nov 28, 2012 at 4:46 AM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    The second argument of the GridEditor constructor is a config for the editor (the first one is a field).

    So, passing this as second argument appears to be what you need.
    {
        listeners: {
            startedit: {
                fn: function (boundEl, value) {
                    /* expand */
                }
            }
        }
    }
  3. #3
    Thanks Daniil, but how should I correctly raise the DropDownField expand event from startedit?

                                
    listeners: {
                                    startedit: {
                                        fn: function (boundEl, value) {
                                            /* expand */
                                            DropDownField1.expand(); //??
                                        }
                                    }
    }
    Last edited by vadym.f; Nov 26, 2012 at 4:41 PM.
  4. #4
    Pleaseuse the onTriggerClickfunction.

    Example 1

    column.setEditor(new Ext.grid.GridEditor({
            field: {
                id: "DropDownField1",
                xtype: "netdropdown"
            },
            listeners: {
                startedit: {
                    fn: function () {
                        this.field.onTriggerClick();
                    }
                }
            }
        })
    );
    Example 2
    column.setEditor(new Ext.grid.GridEditor(
        new Ext.form.DateField(), {
            listeners: {
                startedit: {
                    fn: function () {
                        this.field.onTriggerClick();
                    }
                }
            }
        }));
    Last edited by Daniil; Nov 27, 2012 at 1:04 PM.
  5. #5
    Thanks Daniil, that works well for DropDownField as an editor. Could you suggest how to achieve the same behaviour for DateField and ComboBox as cell editors?

    // DateField
                        column.setEditor(new Ext.form.DateField({
                            format:"M d, Y",
                            selectOnFocus:true,
                            editable:false,
                            listeners:{
                                select:{
                                    fn:function(item,record,index){
                                        gridRecord.set("value", this.getValue());
                                    }
                                },
                                triggerclick:{
                                    fn:function(item,trigger,index,tag,e){
                                        this.setValue(null);
                                        gridRecord.set("value", null);
                                    }
                                },
                                startedit: {
                                    fn: function (boundEl, value) {
                                        /* expand */
                                        this.onTriggerClick();
                                    }
                                }
                            },
                            triggersConfig:[
                                {
                                    iconCls:"x-form-clear-trigger",
                                    qtip:"<nobr>Set to empty</nobr>"
                                }
                            ]
                        }));
    
    // ComboBox
                            column.setEditor(new Ext.form.ComboBox({
                                editable:false,
                                selectOnFocus:true,
                                displayField: "text",
                                valueField: "value",
                                triggerAction: "all",
                                store: #{StoreCombo1},
                                listeners:{
                                    select:{
                                        fn:function(item,record,index){
    
                                        }
                                    },
                                    triggerclick:{
                                        fn:function(item,trigger,index,tag,e){
                                            this.setValue(null);
                                            gridRecord.set("value", null);
                                        }
                                    },
                                    startedit: {
                                       fn: function (boundEl, value) {
                                           /* expand */
                                           this.onTriggerClick();
                                       }
                                    }
                                },
                                triggersConfig:[
                                    {
                                        iconCls:"x-form-clear-trigger",
                                        qtip:"<nobr>Set to empty</nobr>"
                                    }
                                ]
                            }));
  6. #6
    I corrected my Example 2, please review.
  7. #7
    Quote Originally Posted by Daniil View Post
    I corrected my Example 2, please review.
    Thanks much Daniil, it works well. Please mark this thread as closed.

Similar Threads

  1. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  2. Replies: 1
    Last Post: Mar 13, 2012, 8:37 AM
  3. Trigger click event on Slider field
    By Birgit in forum 1.x Help
    Replies: 2
    Last Post: Feb 29, 2012, 7:22 AM
  4. [CLOSED] Get record value in Cell click Event
    By majestic in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 29, 2010, 9:30 AM
  5. [CLOSED] row select and cell click event
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 31, 2009, 9:16 AM

Tags for this Thread

Posting Permissions