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,520
    Vote Rating
    375
    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?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  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,520
    Vote Rating
    375
    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  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,520
    Vote Rating
    375
    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi