Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default [OPEN-711] Bug with using PropertyGrid and a Drag & Drop Element

    [OPEN-711] Bug with using PropertyGrid and a Drag & Drop Element


    Hello,

    I'm using the PropertyGrid in a new Project. And sometimes I get an error, but not allways.
    I try to explain:
    When I change a value in a Textfield and after that I don't hit Enter, but rather click somewhere outside the PropertyPanel I git this error:

    Code:
    this.getRow(row) is undefined in ext-all-debug.js  (Zeile 41154).
    But did not happen everytime. So it is not reproducable, but it happens a lot...

    Perhaps someboy had the same problem and can help me on this.

    Thanks and greetings,
    Urkman

  2. #2
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    Hello,

    no one with an idea on this?

    Here is the code of my propertyGrtid:
    Code:
    App.InvoiceTemplate.propertyGrid = new Ext.grid.PropertyGrid({
        id:            'invoiceTemplatePropertyGrid',
        width:        250,
        title:        'Properties',
        border:        false,
        height:        250,
        margins:    '0 0 0 0',
        region:        'south',
        split:        true,
        autoScroll: true,
        customEditors: {
            'font': new Ext.grid.GridEditor(
                new Ext.form.ComboBox({
                    store: ['Arial', 'New Font', 'Another Font'],
                    editable: false,
                    triggerAction: 'all'
                }),
            {}),
            'align': new Ext.grid.GridEditor(
                new Ext.form.ComboBox({
                    store: [ 'left', 'right', 'center'],
                    editable: false,
                    triggerAction: 'all'
                }),
            {}),
            'image': new Ext.grid.GridEditor(
                new Ext.form.ComboBox({
                    store:            App.DataStore.InvoiceTemplateImages,
                    displayField:    'name',
                    mode:            'local',
                    allowBlank:        true,
                    triggerAction:    'all',
                    editable:        false,
                    forceSelection: true
                }),
            {}),
            'background_image': new Ext.grid.GridEditor(
                new Ext.form.ComboBox({
                    store:            App.DataStore.InvoiceTemplateImages,
                    displayField:    'name',
                    mode:            'local',
                    allowBlank:        true,
                    triggerAction:    'all',
                    editable:        false,
                    forceSelection: true
                }),
            {}),
            'text': new Ext.grid.GridEditor(
                new Ext.form.TextArea({
                }),
            {}),
            'font_size': new Ext.grid.GridEditor(
                new Ext.ux.form.SpinnerField({
                    minValue: 5,
                    maxValue: 25
                }),
            {})
    //        'font_color': new Ext.grid.GridEditor(
    //            new Ext.ux.form.ColorPickerFieldPlus(),
    //        {})
        },
        source: {},
        listeners: {
            beforepropertychange : function( pSource, pRecordId, pNewValue, pOldValue )
            {
                if ( pRecordId == '(id)' || pRecordId == '(name)' || pRecordId == '(type)' ) {
                    return false;
                }
                return true;
            },
            propertychange: function( pSource, pRecordId, pNewValue, pOldValue )
            {
                var panel = Ext.getCmp( 'invoicePagePanel' );
                if ( pSource[ '(type)' ] == 'template_item' ) {
                    var item = App.InvoiceTemplateItemsManager.getItem( pSource[ '(id)' ], Ext.getCmp('invoiceTemplatePartCombo').getValue() );
                    item[ pRecordId ] = pNewValue;
                    App.InvoiceTemplateItemsManager.setItem( pSource[ '(id)' ], Ext.getCmp('invoiceTemplatePartCombo').getValue(), item )
    
                    panel.refreshDisplay();
    
                } else if ( pSource[ '(type)' ] == 'template_part' ) {
                    var part = App.InvoiceTemplateItemsManager.getPart( pSource[ '(id)' ] );
                    part[ pRecordId ] = pNewValue;
                    App.InvoiceTemplateItemsManager.setPart( pSource[ '(id)' ], part )
    
                    panel.refreshDisplay();
                }
            }
        },
        viewConfig : {
            forceFit: true,
            scrollOffset: 2 // the grid will never have scrollbars
        }
    });
    Thanks again for your help,
    Urkman

  3. #3
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    Hello,

    I made some further investigations on this. So I try to expain what I found:

    Here is my situation:
    I made a template designer, where I can place item in a div and set the properties of this items. This iems can be draged around and the size of the items can be changed.
    When I select an item, I display itz properties inside the PropertyGrid, using the "click" event. I change the values of the item, using the "beforepropertychange" and "propertychange" events

    This works all fine...

    But now the situation, where the error appears:
    When I change a property inside the property and then select another item it seems, that the events "beforepropertychange" and "propertychange" are fired to late. Because the "click" on the other item is fired before these two events. And this is the point, where I get the error.

    I hope, now somebody can help me with whis error...

    Thanks and greetings,
    Urkman

  4. #4
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    Hello,

    I made an example on how to reproduce this error.

    Just take the PropertyGrid Example and replace the content of the js file "property-grid.js" with this code:
    Code:
    /*!
     * Ext JS Library 3.1.1
     * Copyright(c) 2006-2010 Ext JS, LLC
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
    
    var propsGrid = new Ext.grid.PropertyGrid({
        renderTo:    'prop-grid',
        width:        250,
        title:        'Properties',
        border:        false,
        height:        250,
        margins:    '0 0 0 0',
        region:        'center',
        split:        true,
        autoScroll: true,
        source: {
                '(id)': 1,
                align: 'left',
                background_color: 'FFFFFF',
                background_image: '',
                border: 0,
                border_color: '000000',
                font: 'Courier',
                font_size: 10,
                font_style: '',
                font_color: '000000',
                text: 'Test Text',
                x: parseInt( 0 ),
                y: parseInt( 0 ),
                width: parseInt( 100 ),
                height: parseInt( 100 )
            },
        customEditors: {
            'text': new Ext.grid.GridEditor(
                new Ext.form.TextArea({
                }),
            {})
        },
        listeners: {
            beforepropertychange : function( pSource, pRecordId, pNewValue, pOldValue )
            {
                console.log( 'beforepropertychange' );
    
                if ( pRecordId == '(id)' ) {
                    return false;
                }
                return true;
            },
            propertychange: function( pSource, pRecordId, pNewValue, pOldValue )
            {
                console.log( 'propertychange' );
            }
        },
        viewConfig : {
            forceFit: true,
            scrollOffset: 2 // the grid will never have scrollbars
        }
    });
    
    
        // simulate updating the grid data via a button click
        new Ext.Button({
            id:    'testbutton',
            renderTo: 'button-container',
            text: 'Update source'
        });
    
        Ext.getCmp( 'testbutton' ).getEl().on( 'click', function () {
            console.log( 'click' );
            propsGrid.setSource({
                '(id)': 1,
                align: 'left',
                background_color: 'FFFFFF',
                background_image: '',
                border: 0,
                border_color: '000000',
                font: 'Courier',
                font_size: 10,
                font_style: '',
                font_color: '000000',
                text: 'Test Text',
                x: parseInt( 0 ),
                y: parseInt( 0 ),
                width: parseInt( 100 ),
                height: parseInt( 100 )
            });
        });
    
            Ext.getCmp( 'testbutton' ).getEl().dd = new Ext.dd.DD( Ext.getCmp( 'testbutton' ).getEl() );
            Ext.apply( Ext.getCmp( 'testbutton' ).getEl().dd, {
                startDrag: function( pX, pY )
                {
                    console.log( 'start drag' );
                },
    
                endDrag:function( pEvent )
                {
                    console.log( 'end drag' );
                }
            });
    
    });
    To explain, what I tried to reproduce the problem:
    1.) I added the click event to the button to change the property source - still working
    2.) I added Drag & Drop to the button - this broke thproperty grid.

    Here is how you can reproduce the error:
    1.) select the "text" property and change the value
    2.) now click the "update source" button.
    3.) Now you can see the error using firefox.

    As you can see, the click event of the button is raised, before the "beforepropertychange" and "propertychange" events of the propertygrid are raised.
    But this only happens, when the button has Drag & Drop. If the button has no Drag & Drop everything is working fine...

    So, now I hope someone of the ExtJs Team can help me with this.

    As a sideeffect, you can see, that the propertygrid can be scrolled left and right, if there is a scrollbar...

    Thanks and greetings,
    Urkman

  5. #5
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    Hello,

    I managed to reproduce the error. Just take the property-grid example and replace the content to the "property-grid.js" file with this code:

    Code:
    /*!
     * Ext JS Library 3.1.1
     * Copyright(c) 2006-2010 Ext JS, LLC
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
    
    var propsGrid = new Ext.grid.PropertyGrid({
        renderTo:    'prop-grid',
        width:        250,
        title:        'Properties',
        border:        false,
        height:        250,
        margins:    '0 0 0 0',
        region:        'center',
        split:        true,
        autoScroll: true,
        source: {
                '(id)': 1,
                align: 'left',
                background_color: 'FFFFFF',
                background_image: '',
                border: 0,
                border_color: '000000',
                font: 'Courier',
                font_size: 10,
                font_style: '',
                font_color: '000000',
                text: 'Test Text',
                x: parseInt( 0 ),
                y: parseInt( 0 ),
                width: parseInt( 100 ),
                height: parseInt( 100 )
            },
        customEditors: {
            'text': new Ext.grid.GridEditor(
                new Ext.form.TextArea({
                }),
            {})
        },
        listeners: {
            beforepropertychange : function( pSource, pRecordId, pNewValue, pOldValue )
            {
                console.log( 'beforepropertychange' );
    
                if ( pRecordId == '(id)' ) {
                    return false;
                }
                return true;
            },
            propertychange: function( pSource, pRecordId, pNewValue, pOldValue )
            {
                console.log( 'propertychange' );
            }
        },
        viewConfig : {
            forceFit: true,
            scrollOffset: 2 // the grid will never have scrollbars
        }
    });
    
    
        // simulate updating the grid data via a button click
        new Ext.Button({
            id:    'testbutton',
            renderTo: 'button-container',
            text: 'Update source'
        });
    
        Ext.getCmp( 'testbutton' ).getEl().on( 'click', function () {
            console.log( 'click' );
            propsGrid.setSource({
                '(id)': 1,
                align: 'left',
                background_color: 'FFFFFF',
                background_image: '',
                border: 0,
                border_color: '000000',
                font: 'Courier',
                font_size: 10,
                font_style: '',
                font_color: '000000',
                text: 'Test Text',
                x: parseInt( 0 ),
                y: parseInt( 0 ),
                width: parseInt( 100 ),
                height: parseInt( 100 )
            });
        });
    
            Ext.getCmp( 'testbutton' ).getEl().dd = new Ext.dd.DD( Ext.getCmp( 'testbutton' ).getEl() );
            Ext.apply( Ext.getCmp( 'testbutton' ).getEl().dd, {
                startDrag: function( pX, pY )
                {
                    console.log( 'start drag' );
                },
    
                endDrag:function( pEvent )
                {
                    console.log( 'end drag' );
                }
            });
    
    });
    Now to reproduce the error:
    1.) select the "Text" property and change the value.
    2.) Now click the "Update Source" Button, without leaving the "Text" Property.

    Now you can see the error using firebug.

    This error only appears, when the "Update Source" Button has Drag & Drop. Remove the Drag & Drop from the Button and everything works fine.

    When Drag & Drop is added to the Button, the "click" event of the Button is raised before the events of the Property Grid.

    As a Sideeffect you can see, that the Property Grid is not displayed correct, when it has a Scrollbar.

    Hope this helps to fix this problem...

    Greetings,
    Urkman

  6. #6
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    Hello,

    why my posts needs to be moderated?

    Greetings,
    Urkman

  7. #7
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    Hello,

    I mde an expample to reproduce the problem:
    http://extjstest.stefansturm.de/property-grid.html

    To reproduct it, do the follwoing:
    1.) Select the text proerpty and change it
    2.) Now click the button "Update Source".

    Now you can see the error using firebug.

    The problem here is, that the Button supports Drag & Drop. because of this, the "Click" event of the Button is raised before the events of the property grid.

    Ich hope this helps,
    Urkman

  8. #8
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    Hello,

    I made some tests on ths using extJs 3.2 beta.

    With this version there is no error show, but the proprety events are not raised.
    So, when I change the value and then click the button, the click event of the button is raisede, but the beforepropertychange and propertychange of the property grid are never raised.

    Greetings,
    Urkman

  9. #9
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default [OPEN-711] Bug with using PropertyGrid and a Drag & Drop Element

    [OPEN-711] Bug with using PropertyGrid and a Drag & Drop Element


    Hello,

    Here is a Link where I show this Bug:
    http://extjstest.stefansturm.de/property-grid.html

    To reproduct it, do the follwoing:
    1.) Select the text property and change it
    2.) Now click the button "Update Source".

    Then You get this error:
    this.getRow(row) is undefined in ext-all-debug.js (Zeile 41154).

    The problem here is, that the Button supports Drag & Drop. Because of this, the "Click" event of the Button is raised before the events of the property grid are raised.
    Remove the Drag & Drop from the button and it works fine.

    Here I describe more about the Problem:
    http://www.extjs.com/forum/showthread.php?t=90794

    Greetings,
    Urkman

  10. #10
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    160
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    Hello,

    no news on this bug?

    Thanks and greetings,
    Urkman