Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 34

Thread: [OPEN-575] roweditor: column-drag-drop, resize problems

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #21

    Default thank you !!!!!!!!!!!!!

    thank you !!!!!!!!!!!!!

  2. #22
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    32

    Default

    Quote Originally Posted by mdmitry View Post
    I've made a list of things RowEditor doesn't support:
    * resizing columns
    I've been doing some investigation on this, with 3.2.2, and the problem appears to be a disconnect between (some) BoxComponents and HBoxLayout (and probably VBox too, but I didnt look).

    * In HBoxLayout.calculateChildBoxes, it gets each item's width and height by their member value, i.e. "child.width" and "child.height".
    * In BoxComponent.setSize, it updates the size on the value of getResizeEl() - which if different than Box itself means that the "width" and "height" members values aren't changed.

    This explains the behavior I see when resizing columns with the editor open - the actual column editor components change size correctly, but their left-hand offsets do not move. I've tried overriding HBoxLayout.calculateChildBoxes to use "getHeight()" and "getWidth()":
    Code:
    Ext.override(Ext.layout.HBoxLayout, {
        calculateChildBoxes: function(visibleItems, targetSize) {
            ...
                //gather the total flex of all flexed items and the width taken up by fixed width items
                for (i = 0; i < visibleCount; i++) {
                    child       = visibleItems[i];
                    childHeight = child.getHeight();
                    childWidth  = child.getWidth();
            ...
        }
    });
    Or alternativly overriding BoxComponent's setSize to also update the member values:
    Code:
    Ext.override(Ext.BoxComponent, {
        setSize : function(w, h){
            ...
            if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
                rz = this.getResizeEl();
                if(!this.deferHeight && aw !== undefined && ah !== undefined){
                    rz.setSize(aw, ah);
                    this.width = aw;
                    this.height = ah;
                }else if(!this.deferHeight && ah !== undefined){
                    rz.setHeight(ah);
                    this.height = ah;
                }else if(aw !== undefined){
                    rz.setWidth(aw);
                    this.width = aw;
                }
                this.onResize(aw, ah, w, h);
                this.fireEvent('resize', this, aw, ah, w, h);
            }
        }
    });
    However, while either of those will fix the rowEditor, it winds up breaking some other panels I have. Hope this might help give someone else some insight however.

    Edit: I do have a workaround that appears to fix the RowEditor without breaking my other layout - YMMV:
    PHP Code:
    Ext.override(Ext.form.Field, {
        
    setSize : function(wh){
            var 
    ret Ext.form.Field.superclass.setSize.call(thiswh);
            if (!
    this.flex) {
                if (
    undefined !== w) { this.width w; }
                if (
    undefined !== h) { this.height h; }
            }
            return 
    ret;
        }
    }); 
    Edit Edit: Don't break flexing
    Last edited by mrusinak; 21 Jun 2010 at 1:27 PM. Reason: Possible work around

  3. #23
    Sencha User
    Join Date
    Apr 2010
    Posts
    100

    Default

    mrusinak, thanks for doing the research! I'll take that into account. Though I am feeling to rather cancel using that rowedior for now

  4. #24

    Default

    mrusinak, your solution works like a charm.
    Thank you.
    Now "resizing columns" issue is fixed.

  5. #25

    Default

    dead_man, your solution for "columns move" works like a charm.
    There is a small non-critical issue, which I found during work with the RowEditor after column move.
    Tab key doesn't work as expected.

    For example, initially Grid has three columns: "A", "B" and "C"

    When you enter into editing of the row, you can start typing text in the first column ("A") and click Tab key to switch focus to the next column ("B", then "C").

    Now, let's assume we moved column "A" to the new position between "B" and "C".
    So, Grid shows now columns in the following order: "B", "A", "C"

    I enter into editing mode and focus is inside column "B".
    I click Tab key and expect focus to move to the next column on the right (it is "A" currently).
    But instead of that focus is moved to column "C".

    This problem is caused by the fact that Tab order is based on how underlying INPUT fields are rendered inside DOM.
    Order of INPUT fields is not changed inside columnMove. Only position of them is changed.

    It would be great if underlying INPUT fields are reordered as well.

  6. #26

    Lightbulb More ideas

    I'm also trying to add support for column moving and resizing to RowEditor. After debugging the code I can confirm what has been found out in this thread so far. I can propose another patch to add support for column moving though. The following two lines have to be added to make the layout manager add extra CSS classes again (like x-box-item) which are removed by the call to removeAll() (as found out by mdmitry):
    Code:
        initFields: function(){
            var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
            this.removeAll(false);
            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                var c = cm.getColumnAt(i),
                    ed = c.getEditor();
                if(!ed){
                    ed = c.displayEditor || new Ext.form.DisplayField();
                } else if(ed.rendered){
                    this.getLayout().configureItem(ed);
                }
                if(i == 0){
                    ed.margins = pm('0 1 2 1');
                } else if(i == len - 1){
                    ed.margins = pm('0 0 2 1');
                } else{
                    if (Ext.isIE) {
                        ed.margins = pm('0 0 2 0');
                    }
                    else {
                        ed.margins = pm('0 1 2 0');
                    }
                }
                ed.setWidth(cm.getColumnWidth(i));
                ed.column = c;
                if(ed.ownerCt !== this){
                    ed.on('focus', this.ensureVisible, this);
                    ed.on('specialkey', this.onKey, this);
                }
                this.insert(i, ed);
            }
            this.initialized = true;
        },
    Regarding column resizing it seems like that HBoxLayout is the wrong layout manager. As pointed out by mrusinak HBoxLayout checks the BoxComponent's width and height which are read-only values. The width and height of the underlying element can change but the BoxComponent's width and height never do. As I'm reluctant to change the width and height of BoxComponent and don't want to change HBoxLayout either I tried another layout manager: As it turns out resizing columns works reasonably well when ColumnLayout is used. Of course there is another problem then: Moving columns doesn't work anymore. But this needs to be implemented differently anyway if we want to support navigating with the Tab key (as requested by biggena).

    If ColumnLayout is used I think the DOM must only be updated in initFields(). The items collection is already updated but the change must be reflected in the DOM, too. How difficult this will be to implement I'll find out after a break. ;)

  7. #27

    Lightbulb Supporting resizing and removing columns

    I managed now to add support for resizing and removing columns. The following changes are required in RowEditor.js:
    Code:
    layout: 'column'
    When ColumnLayout is used resizing works automatically. Not only the fields' widths are updated correctly but also their positions.
    Code:
    grid.on({
                scope: this,
                keydown: this.onGridKey,
                columnresize: this.verifyLayout,
                columnmove: this.columnMove,
                reconfigure: this.refreshFields,
                beforedestroy : this.beforedestroy,
                destroy : this.destroy,
                bodyscroll: {
                    buffer: 250,
                    fn: this.positionButtons
                }
            });
    ...
        columnMove: function(oldIndex, newIndex) {
            if(this.initialized){
                this.items.insert(newIndex, this.items.removeAt(oldIndex));
                var layout = this.getLayout();
                var targetEl = layout.innerCt ? layout.innerCt : this.getLayoutTarget();
                var node = targetEl.dom.childNodes.item(oldIndex);
                var refNode = targetEl.dom.childNodes.item(newIndex);
                targetEl.dom.insertBefore(node, refNode);
            }
        },
    This new function does not only rearrange fields in the items collection. It also updates the DOM (which helps to support navigating with the Tab key, too).
    Code:
        initFields: function(){
            var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
            this.removeAll(false);
            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                var c = cm.getColumnAt(i),
                    ed = c.getEditor();
                if(!ed){
                    ed = c.displayEditor || new Ext.form.DisplayField({html:'&nbsp;'});
                } else if(ed.rendered){
                    this.getLayout().configureItem(ed);
                }
    ....
    As a new layout manager is used the display field must contain something. Otherwise it doesn't have a height and doesn't fill any space in Opera.
    Code:
        verifyLayout: function(force){
            if(this.el && (this.isVisible() || force === true)){
                var row = this.grid.getView().getRow(this.rowIndex);
                this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + 9 : undefined);
                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);
    ....
    The code above should be removed as ColumnLayout doesn't support padding. If the width is adjusted the fields are not properly aligned.

    TODO:
    • Test in more browsers (I tested IE8 and Opera 10.54)
    • Test the reconfigure event (I think there is at least a problem with DisplayFields created in initFields(); as false is passed to items.removeAll() no HTML elements are removed; but then as there are no other references to DisplayField objects the HTML elements are never removed)
    • ColumnLayout does not support margins (it ignores ed.margins set in initFields()); I wonder if margins can be supported differently
    • When in edit mode and a column is moved the row editor is automatically hidden; I didn't check why (but this is the reason why verifyLayout() isn't called in columnMove() as the row editor is not visible anyway)

  8. #28

    Default New version of RowEditor

    Here's a new version of RowEditor with supports column resizing and moving in IE, Firefox, Opera, Chrome and Safari (the test case was http://www.sencha.com/deploy/dev/exa...ow-editor.html). If you are interested in the changes I recommend to use a program like Windiff to compare this new version with the one of Ext JS 3.2.1.
    Attached Files Attached Files

  9. #29
    Sencha User
    Join Date
    Jun 2009
    Posts
    751

    Default

    Great work on this.

    @boriss: I tested your attachment.

    The only thing I'm seeing is that there's no spacing between the fields inside the row editor. The spacing was there previously.

    This is amazing.

  10. #30

    Default New version: Resizing, moving and spacing

    Quote Originally Posted by meroy View Post
    The only thing I'm seeing is that there's no spacing between the fields inside the row editor. The spacing was there previously.
    I've updated the RowEditor to include spacing. The problem was that ColumnLayout ignores margins (which are not ignored by BoxLayout). The new layout manager ColumnWithMarginsLayout (defined in ColumnWithMarginsLayout.js in the ZIP file) overrides onLayout() of ColumnLayout and updates margins after fields have been rendered. While this is a small change I'm not sure whether it's a good idea to override onLayout() in ColumnLayout (as there could be side effects I created a new layout manager).

    The row editor looks now the very same as before - except in IE. Currently I've no idea why it doesn't work in IE as the development tools indicate that margins have been set for all fields in IE, too. While I can see the correct inline style settings in the debugger the browser seems to ignore them. I also tried Ext.Element.repaint() but it doesn't work. There is no problem in Firefox, Opera, Chrome and Safari. I'm curious if anyone can find out what's the problem here (yes, this is IE8).

    By the way, I had actually replaced BoxLayout with ColumnLayout to avoid changing the layout manager. As I had to adapt ColumnLayout now we could of course also adapt BoxLayout. The reason why both layout managers don't work by default is that BoxLayout reads a box width and height (these are constant while the element within the box can have a different width and height - which is the case when columns are resized) and that ColumnLayout ignores margins. It seems to be a smaller and less risky change though to add support for margins to ColumnLayout instead of making the size of boxes variable for BoxLayout (but I'm guessing here).
    Attached Files Attached Files

Page 3 of 4 FirstFirst 1234 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •