[CLOSED] [1.0] Strange behavior - LockingGridView & RowEditor

  1. #1

    [CLOSED] [1.0] Strange behavior - LockingGridView & RowEditor

    Hello,

    Have a GridPanel with a LockingGridView on it. The first column of the GridPanel is locked. There are 15 columns in this GridPanel. If I put a RowEditor plugin on the grid as well, whenever you click on a row to edit it, the RowEditor doesn't line up with the correct column.

    Thanks.
    Last edited by Daniil; Oct 27, 2010 at 5:34 AM. Reason: [CLOSED]
  2. #2
    Hi,

    The RowEditor plugin doesn't support LockingGridView.
    But I was able to get it working in the following simple example.

    But I'm not sure it would work in all cases.

    Please try this solution in your real application and tell us a result.

    Example
    <%@ 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[] {"test11", "test12", "test13"},
                                             new object[] {"test21", "test22", "test23"},
                                             new object[] {"test31", "test32", "test33"}
                                    };
                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 runat="server">
        <title>Ext.Net Example</title>
        <ext:ResourcePlaceHolder runat="server" />
    
        <script type="text/javascript">
            Ext.ux.grid.RowEditor.override({
                startEditing: function (rowIndex, doFocus) {
                    if (this.editing && this.isDirty()) {
                        this.showTooltip(this.commitChangesText);
                        return;
                    }
                    if (Ext.isObject(rowIndex)) {
                        rowIndex = this.grid.getStore().indexOf(rowIndex);
                    }
                    if (this.fireEvent('beforeedit', this, rowIndex) !== false) {
                        this.editing = true;
                        var g = this.grid, view = g.getView(),
                            row = view.getRow(rowIndex),
                            record = g.store.getAt(rowIndex);
                        this.record = record;
                        this.rowIndex = rowIndex;
                        this.values = {};
                        if (!this.rendered) {
                            this.render(view.getEditorParent());
                        }
                        //var w = Ext.fly(row).getWidth() // it's replaced with the following line for fixing a width issue
                        var w = Ext.fly(row).getWidth() + (view.getLockedWidth ? parseInt(view.getLockedWidth()) : 0);
                        this.setSize(w);
                        if (!this.initialized) {
                            this.initFields();
                        }
                        var cm = g.getColumnModel(), fields = this.items.items, f, val;
                        for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
                            val = this.preEditValue(record, cm.getDataIndex(i), i);
                            f = fields[i];
                            f.rendered ? f.setValue(val.value) : (f.value = val.value);
                            f.setReadOnly(!cm.isCellEditable(i, rowIndex));
                            if (val.meta.css) {
                                if (f.rendered) {
                                    f.el.addClass(val.meta.css);
                                }
                                else {
                                    f.cls = val.meta.css;
                                }
                            }
                            this.values[f.id] = Ext.isEmpty(val.value) ? '' : val.value;
                        }
                        this.verifyLayout(true);
                        if (view.getLockedRow) {                // it's added
                            row = view.getLockedRow(rowIndex);  // for fixing
                        }                                       //a position issue
                        if (!this.isVisible()) {
                            this.setPagePosition(Ext.fly(row).getXY());
                        } else {
                            this.el.setXY(Ext.fly(row).getXY(), { duration: 0.15 });
                        }
                        if (!this.isVisible()) {
                            this.show().doLayout();
                        }
                        if (doFocus !== false) {
                            this.doFocus.defer(this.autoFocusDelay, this);
                        }
                    }
                },
                verifyLayout: function (force) {
                    if (this.el && (this.isVisible() || force === true)) {
                        var view = this.grid.getView(),
                            row = view.getRow(this.rowIndex);
                        //this.setSize(Ext.fly(row).getWidth(), Ext.fly(row).getHeight() + 9); // it's replaced with the following line for fixing a width issue
                        this.setSize(Ext.fly(row).getWidth() + (view.getLockedWidth ? parseInt(view.getLockedWidth()) : 0), Ext.fly(row).getHeight() + 9);
                        var cm = this.grid.colModel, fields = this.items.items;
                        for (var i = 0, len = cm.getColumnCount(); i < len; i++) {
                            if (!cm.isHidden(i)) {
                                var adjust = 0;
                                if (i === (len - 1)) {
                                    adjust += 3; // outer padding
                                } else {
                                    adjust += 1;
                                }
                                fields[i].show();
                                fields[i].setWidth(cm.getColumnWidth(i) - adjust);
                            } else {
                                fields[i].hide();
                            }
                        }
                        this.doLayout();
                        this.positionButtons();
                    }
                }
            });
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" Height="300" Width="500">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" Locked="true" />
                    <ext:Column Header="Test2" DataIndex="test2">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:LockingGridView />
            </View>
            <Plugins>
                <ext:RowEditor />
            </Plugins>
        </ext:GridPanel>
        </form>
    </body>
    </html>
    NOTE: To apply the solution please add this in your page:
    <ext:ResourcePlaceHolder runat="server" />
     
     <script type="text/javascript">
       //Here are all scrips
    </script>
  3. #3
    We decided that it wasn't a necessary function to lock the column, but might be useful in the future.

    Thanks.

Similar Threads

  1. Replies: 9
    Last Post: May 21, 2012, 4:05 PM
  2. [CLOSED] RowExpander strange behavior
    By FAS in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Apr 24, 2012, 7:37 PM
  3. [CLOSED] Htmleditor strange behavior after row collapsed.
    By eaglemobile in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 21, 2011, 12:59 PM
  4. [CLOSED] Strange behavior of fieldset
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 20, 2010, 11:55 AM
  5. [CLOSED] AutoLoad IFrame strange behavior
    By acrossdev in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: May 20, 2009, 10:20 AM

Tags for this Thread

Posting Permissions