1. #1
    Ext User angelflaree's Avatar
    Join Date
    Jan 2008
    Posts
    64
    Vote Rating
    0
    angelflaree is on a distinguished road

      0  

    Default dynamic form field not display after add-remove-add

    dynamic form field not display after add-remove-add


    Hi,

    I have a problem to add, remove and add again a field dynamically to a form according to user selection in a combo box.
    When user select "1", I add field "A" to the form, when select "2", remove "A" and add "B" to form, This is working. But when user select "1" again and I try to remove "B" and add "A" again back to form, it's not working.
    From the fireFox console I can see the form does include "A" every time after I add it to the form. So the problem is only the first time user select index "N", the corresponding field is added to the form and correctly displayed, when user select index "X" then select "N" again, the the corresponding field is added but NOT showing.

    Here is the executable "test.jsp" source code you can Run and test. Hopefully someone can help me with a fix.
    Code:
    <script>
      Ext.onReady(function(){
      Ext.QuickTips.init();
          
        //A dropdown comboBox  
        var reportOptionDropDown = new Ext.form.ComboBox({
               fieldLabel: "Report Option",
               name: "reportOptionTf",     
               hiddenName: "reportOption", 
               //typeAhead: true,               
               displayField:'reportOption',
               valueField: 'optionCode',//'optionId',
               emptyText: 'Must select a report Option...',
               valueNotFoundText: 'No Matching report option Found',
               editable: false,
               allowBlank: false,         
               width: 210,
               listWidth: 210,                       
               triggerAction: 'all',
               hideTrigger: false,
               mode: 'local',  
               listClass: 'x-combo-noedit',
               store: new Ext.data.SimpleStore({ //static data instead of from dynamic store
                 fields: ['reportOption','optionCode'], 
                 data: [            
                     ['1 - Variance - Amount and Value','1']
                    ,['2 - Variance by Percent','2']
                    ,['3 - Variance by Dollar Amount','3']
                    ,['4 - Selected but not Posted Items','4']                
                    ]
                })
        });
        
        var formPn = new Ext.form.FormPanel({
            bodyStyle: 'padding: 10px',
            layout: 'form',
            autoHeight: true,
            autoWidth: true,
            labelAlign: 'right',
            labelWidth: 200,
            defaultType: 'textfield',
            items: [reportOptionDropDown],
            buttons: [{
                text: 'Save',
                handler: function() {
                    
                }            
            }]            
        });
        
        //The top container, contain my formPanel
        var topPanel = new Ext.Panel({
            title: 'Test Panel',
            frame: true,
            bodyStyle: 'padding: 10px',
            style: {
                "margin": "10px"
            },
            closable: true,
            layout: 'form',
            autoHeight: true,
            width: 500,
            items: [
                formPn
            ]
        });
    
    //Field to be dynamically add/remove from the formPanel, according to the "reportOption"
        var excludeZeroVarianceCbx = new Ext.form.Checkbox({
            fieldLabel: "Exclude Item with 0 Variance",
            name: "ifExcludeZeroVariance"
        });
        var variancePercentTf = new Ext.form.TextField({
            fieldLabel:"Percentage",
            name: 'variancePercentTf',
            allowBlank: false
        });
        var varianceDollarAmtTf = new Ext.form.TextField({
            fieldLabel:"Dollar Amount",
            name: 'varianceDollarAmtTf',
            allowBlank: false
        });
    
        topPanel.on("render", function(panel) {
            console.log("RENDERED! %o", panel);
        });
      
        topPanel.render(document.body);    
    
        //dynamically display the formField, according to the selection on the "reportOption"
        reportOptionDropDown.on("select", function(thisCombo, rec, index){
           //console.log("selection sort option");
           if(rec.data.optionCode == "1"){
               //console.log("select sort option 1");           
               addExcludeZeroVarianceCbx();
               removeVariancePercentTf();
               removeVarianceDollarAmtTf();
               formPn.doLayout();           
               
               topPanel.doLayout();           
               console.log("FormPanel is %o, combo value is: %o", formPn, thisCombo.getValue());
           }
           else if(rec.data.optionCode == "2"){           
               addVariancePercentTextField();
               removeExcludeZeroVarianceCbx();
               removeVarianceDollarAmtTf();
               formPn.doLayout();          
               
               topPanel.doLayout();           
               console.log("FormPanel is %o", formPn);
           }
           else if(rec.data.optionCode == "3"){           
               addVarianceDollarAmtTextfield();
               removeExcludeZeroVarianceCbx();
               removeVariancePercentTf();
               formPn.doLayout();
               
               topPanel.doLayout();
               console.log("FormPanel is %o", formPn);
           }       
       });
     
       function addExcludeZeroVarianceCbx(){
           if(formPn.getForm().findField("ifExcludeZeroVariance") == null){               
               formPn.add(excludeZeroVarianceCbx);
               console.log("will add excludeZeroVarianceCbx to form");
           }
       }
       function addVariancePercentTextField(){
           if(formPn.getForm().findField("variancePercentTf") == null){
               formPn.add(variancePercentTf);
               console.log("will add variancePercentTf to form");
           }
       }
       function addVarianceDollarAmtTextfield(){
           if(formPn.getForm().findField("varianceDollarAmtTf") == null){
               formPn.add(varianceDollarAmtTf);
               console.log("will add varianceDollarAmtTf to form");
           }
       }
       
    
       function removeExcludeZeroVarianceCbx(){
           if(formPn.getForm().findField("ifExcludeZeroVariance") != null)
               formPn.remove(excludeZeroVarianceCbx, false);//using "true" not working either
       } 
       function removeVariancePercentTf(){
           if(formPn.getForm().findField("variancePercentTf") != null)
               formPn.remove(variancePercentTf, false);//using "true" not working either
       }
       function removeVarianceDollarAmtTf(){
           if(formPn.getForm().findField("varianceDollarAmtTf") != null)
               formPn.remove(varianceDollarAmtTf, false);//using "true" not working either
       }
     
        
      
    });
    
    </script>
    
    
    <html debug="false">
    </html>
    Thanks
    good good study,
    day day up ; )

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Whan adding and removing to/from a Container, call doLayout on that Container when you've finished.

  3. #3
    Ext User angelflaree's Avatar
    Join Date
    Jan 2008
    Posts
    64
    Vote Rating
    0
    angelflaree is on a distinguished road

      0  

    Default


    If you search in my code, you can see I already call "formPn.doLayout()", after the series of add and remove action. I also call the "topPanel.doLayout()". It's not working.
    good good study,
    day day up ; )

  4. #4
    Ext User angelflaree's Avatar
    Join Date
    Jan 2008
    Posts
    64
    Vote Rating
    0
    angelflaree is on a distinguished road

      0  

    Red face


    Anyone help to run my example? It's working code, you just copy paste to run it.

    There're previous post about dynamic add/remove field, such as:
    http://extjs.com/forum/showthread.php?t=24118
    I know, but no one mention any issue to constantly add/remove the same field from/to a form.

    请高人指点!!
    good good study,
    day day up ; )

  5. #5
    Ext User
    Join Date
    Nov 2007
    Posts
    22
    Vote Rating
    0
    banderson is on a distinguished road

      0  

    Default Same Problem

    Same Problem


    I'm having this same problem. I have to dynamically add/remove form fields, and I can't just recreate the fields, because one of my fields is a file selector and I have to keep the value the user selected (you can't dynamically set the file to upload...obviously).

    Here's an easy example of the problem:

    Code:
                            var window = new Ext.Window( {
                                width       : 300
                                ,height     : 300
                                ,layout     : 'fit'
                            } );
                            var form = new Ext.form.FormPanel( {
                                labelWidth      : 150
                            } );
                            var textfield = new Ext.form.TextField( {
                                fieldLabel      : 'testLabel'
                                ,value          : 'testValue'
                            } );
                            form.add(textfield);
                            var button = new Ext.Button( {
                                text            : 'Move Field'
                                ,handler        : function() {
                                    form.remove(textfield);
                                    form.add(textfield);
                                }
                            } );
                            form.add(button);
                            window.add(form);
                            window.show();

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    22
    Vote Rating
    0
    banderson is on a distinguished road

      0  

    Default


    Workaround found:

    add:

    Code:
    field.rendered = false;
    after removing the field.

  7. #7
    Sencha User
    Join Date
    Feb 2009
    Posts
    38
    Vote Rating
    0
    col is on a distinguished road

      0  

    Default


    Quote Originally Posted by banderson View Post
    Workaround found:

    add:

    Code:
    field.rendered = false;
    after removing the field.
    But why this not work with window content ?
    Code:
    var window = new Ext.Window( {
        width       : 300
        ,height     : 300
        ,layout     : 'fit'
        ,buttons:[{
          text : 'Add Field'
          ,handler : function() {
            window.add(form);
            window.doLayout();
          }
        },{
          text : 'Del Field'
          ,handler : function() {
            window.removeAll()
            form.rendered=false
          }
        }]
    
    } );
    
    var form = new Ext.form.FormPanel( {
        labelWidth : 150
        ,items:[{fieldLabel:'testLabel', xtype:'textfield', value:'testValue'}]
    });
    
    window.add(form);
    window.show();
    Code:
    ext-all.js (line 9)
    second argument to Function.prototype.apply must be an array
    Ext.DomHelper=function(){var n=null;var ...(Ext.History,new Ext.util.Observable());
    Any idea ?

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

  9. #9
    Sencha User
    Join Date
    Feb 2009
    Posts
    38
    Vote Rating
    0
    col is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    Dear Animal, I do not understand how your example can help me.
    Look my example please.
    It differs from Banderson.

    I have problems with Window, rather than with FormPane.

    Tnx.

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    There's no difference. They are both Containers - see their inheritance diagram in the API docs which I'm sure you look at all the time.

Thread Participants: 3

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