Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    May 2010
    Posts
    6
    Vote Rating
    0
    brownphillipa is on a distinguished road

      0  

    Default [OPEN-989] alignToXY error when dynamically adding/removing Numberfield from Panel

    [OPEN-989] alignToXY error when dynamically adding/removing Numberfield from Panel


    Hi all,

    I have an Ext window which consists of a couple of forms. The first form has a dropdown combo, and depending on which value the user selects, the second form gets populated/repopulated.

    The layout is as follows

    Code:
    Window
       |
       |--FormPanel1 --[Combobox1]
       |
       |--FormPanel2
               |
               |---Panel(ColumnLayout1)
                                 |
                                 |---FormPanel3--[ ]
                                 |
                                 |---FormPanel4--[ ]
    Based on what the users selects in Combobox1, form items are dynamically removed and added into ColumnLayout1 and 2.

    I am populating ColumnLayout1 with a numberfield that has allowBlank: false so if the field is blank, it gets underlined in red and i have the Quicktip exclamation mark on the side. If this textfield has a valid number in it, and i choose a different option in combobox1, all my textfields get destroyed and re-rendered with new data as defined in my Combobox listener.


    However if the numberfield in FormPanel3 or 4 is blank, and i try to select a new option in Combobox1, the items are destroyed but not recreated because the Quicktip/red underline still exists (i think) and is trying to align itself to an item that no longer exists. I get an 'Uncaught Element.alignToXY with an element that doesn't exist' error. I thought it might be quicktips causing the issue, so i tried disabling quicktips but i still get this error if the field is blank.

    I've tried setting allowBlank to true and calling clearInvalid() just before removing the numberfield but i still get the error.

    Code is as follows: (I have a few columnlayouts nested in there in order to get side by side fields)

    Code:
    this.mainForm.getPorts.getForm().submit({
    var this = parent;
    success: function(form, action) {
    
                    parent.mainForm.sapPanel.columnContainerTop.left.removeAll(true);
                    parent.mainForm.sapPanel.columnContainerTop.right.removeAll(true);
    .
    .
    .
    }
    I also tried changing the value to something valid on blur in order to get rid of the quicktip/error, but still no luck.

    Code:
     
    scope: this,
         listeners:{
                     blur: {
                             fn: function() {
                                        if (this.getValue() == "")
                                        {
                                            this.setValue(0);
                                            this.clearInvalid();
                                            Ext.QuickTips.unregister(this.getEl());
                                        }
                                        else
                                        {
                                    //Do nothing
                                    }
    I would think that when i call removeAll() on the parent formpanel, the validation/quicktips would be destroyed as well? I haven't added any custom listeners. Any ideas?

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,137
    Vote Rating
    321
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Do you call doLayout() after you add items?

    Note: Is it really necessary to destroy/re-create items? Wouldn't show/hide or a card layout do better?

  3. #3
    Ext JS Premium Member
    Join Date
    May 2010
    Posts
    6
    Vote Rating
    0
    brownphillipa is on a distinguished road

      0  

    Default


    I realized i was probably calling doLayout() a bit too early in the dynamic adding/removing process so i removed that. I've also redesigned the layout a little bit so that theres only one or two numberfields that are being dynamically added/removed.

    I could probably find a workaround rather than destroying and recreating, but it would still be nice to know how to dynamically remove numberfields from a form.

    I've found if i disable quicktips and add a blur handler that changes the value of the numberfield to a non blank value then i have no issues, but if i enable quicktips, i get an error. If i don't have the blur handler, i get the error.

    Would an Ext.Quicktips.unregister() for the numberfield work? Or does unregister only work for quicktips that have been manually added to an element?

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,137
    Vote Rating
    321
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    I have no real idea what's going on here. Normally, you can call form.add() and form.remove() and it should be w/o any consequences if done properly and form.doLayout() is called afterwards. Can you post a complete but simplest possible showcase so that we call look into it? You may have discovered a bug.

  5. #5
    Ext JS Premium Member
    Join Date
    May 2010
    Posts
    6
    Vote Rating
    0
    brownphillipa is on a distinguished road

      0  

    Default


    Hi Saki,

    Here is some complete code that displays the behaviour:

    Code:
    Ext.onReady(function () {
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = "side";
    
            var mainPanel = new Ext.form.FormPanel({
                title: 'test form',
                layout: 'form',
                id: 'parentForm',
                frame: true,
                items: [
                    {
                        xtype: 'combo',
                        fieldLabel:'Mode',
                        ref: 'combo',
                        name:'combotest',
                        forceSelection:true,
                        store: new Ext.data.ArrayStore({
                            fields: [
                                {
                                    name:'mode',
                                    type: 'string'
                                }
                            ],
                            data: [['Beginner'], ['Advanced']]
                        }),
                        mode: 'local',
                        triggerAction: 'all',
                        allowBlank: false,
                        editable:false,
                        selectOnFocus: true,
                        displayField: 'mode',
                        listeners:{
                            select:{
                                fn: function() {
                                    this.ownerCt.columnContainerBottom.left.removeAll();
                                    var value = this.getValue();
                                    switch (value) {
                                        case 'Beginner':
                                            this.ownerCt.columnContainerBottom.left.add(
                                            new Ext.form.NumberField({
                                                fieldLabel: 'Beginner field',
                                                ref: 'beginner',
                                                name: 'beginner',
                                                allowBlank: false,
                                                allowDecimals: false,
                                                allowNegative: false,
                                                maxValue: 4095,
                                                width: 50
                                            }) );
                                            break;
    
                                        case 'Advanced':
                                            this.ownerCt.columnContainerBottom.left.add(
                                            new Ext.form.NumberField({
                                                fieldLabel: 'Advanced field',
                                                ref: 'advanced',
                                                name: 'advanced',
                                                allowBlank: false,
                                                allowDecimals: false,
                                                allowNegative: false,
                                                maxValue: 4095,
                                                width: 50
                                            }) );
                                            break;
                                    }
                                    this.ownerCt.columnContainerBottom.left.doLayout();
                                }
                            }
                        }
                    },
                    {
                        layout: 'column',
                        ref: 'columnContainerBottom',
                        height: 100,
                        items: [
                            {
                                columnwidth: .5,
                                layout: 'form',
                                ref: 'left',
                                width: 200
                            },{
                                columnwidth: .5,
                                layout: 'form',
                                ref: 'right',
                                width: 200
                            }
                        ]
                    }
                ]
            });
    
            new Ext.Viewport({
                layout: 'fit',
                items: [
                    mainPanel
                ]
            });
        });
    If you select Beginner from the dropdown, and type a backspace in the numberfield displayed so that a quicktip is shown (alternatively type in a value greater than 4095 since that will also cause a quicktip to be shown), then choose Advanced from the numberfield, you'll get an error in firebug/chrome inspector saying 'Uncaught Element.alignToXY with an element that doesn't exist'. As soon as quicktips is disabled, this error is no longer encountered. I have used removeAll() and doLayout() in the example.


    edit: I guess this is being caused by Ext.form.Field.prototype.msgTarget = "side"; ? Does that mean it's not possible to have quicktips displayed on the side for form items that are to be dynamically added and removed?

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,137
    Vote Rating
    321
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    It looks like a bug. Field::el still exists but its dom is already destroyed. This is the quick fix:
    PHP Code:
    Ext.override(Ext.form.Field, {
        
    alignErrorIcon : function(){
                if(
    this.el.dom) {
                    
    this.errorIcon.alignTo(this.el'tl-tr', [20]);
                }
        }
    }); 
    Moving this thread to bugs.

  7. #7
    Sencha User
    Join Date
    Apr 2010
    Location
    Italy
    Posts
    17
    Vote Rating
    0
    bariand is on a distinguished road

      0  

    Default


    Any news about this issue?
    In my code remove all field from a fieldset but when inserting them again I get the error about an uncaught exception.
    The workaround you provided doesn't seem to work...

  8. #8
    Sencha User
    Join Date
    Apr 2010
    Location
    Italy
    Posts
    17
    Vote Rating
    0
    bariand is on a distinguished road

      0  

    Default


    Hi,
    I tried with ExtJS 3.3.0 but this issue is still there.
    Any news or suggestion?

    Thanks

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    14
    Vote Rating
    1
    masood is on a distinguished road

      0  

    Default Thanks

    Thanks


    Thanks for the fix. Works great!

Similar Threads

  1. Adding and Removing Accordion Elements Dynamically
    By ogradyjd in forum Ext 2.x: Help & Discussion
    Replies: 16
    Last Post: 12 Dec 2008, 8:59 AM
  2. dynamically adding and removing menus
    By holli in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 23 Oct 2007, 2:10 PM
  3. Dynamically adding / removing checkboxes
    By jeffita in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 9 Aug 2007, 12:30 PM
  4. Adding and Removing rows dynamically from a grid
    By sonic64 in forum Ext 1.x: Help & Discussion
    Replies: 28
    Last Post: 9 Apr 2007, 8:51 PM

Thread Participants: 3

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar