1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    thven90 is on a distinguished road

      0  

    Question Remove added compositefield in a fieldset in a formpanel doesn't work

    Remove added compositefield in a fieldset in a formpanel doesn't work


    Hey,

    I've got a problem and I can't find an answer. Neither on the internet, nor by myself.

    I've got a formpanel containing a fieldset. In it, there is a compositefield with several textfields and a displayfield, with which you can add more compositefields to the fieldset (with a displayfield to remove themselves again).
    But when I create another compositefield and want to remove it again, there is an endless loop of errors saying

    this.dom is undefined
    var val = this.dom.value;

    in Firebug.


    I don't know how to fix it.

    Right now I am using the method "destroy()" on the compositefield. The field disappears, but as I said the errors appear...

    Here is my sourcecode:

    Code:
    addFormFields    = function(item, type, nametype) {
        var fieldset        = Ext.getCmp(item+'_fieldset')
            ,counterField    = Ext.getCmp(item+'_counter')
            ,counterValue    = parseInt(counterField.getValue()) + 1;
        
        var a = fieldset.add({
            xtype            : 'compositefield'
            ,id                : item + '_' + counterValue
            ,height            : 22
            ,autoDestroy    : true
            ,items            : [{
                name        : nametype+'_'+counterValue
                ,fieldLabel    : type
                ,xtype        : 'textfield'
                ,width        : 240
                ,height        : 22
                ,allowBlank    : true
            },{
                name        : nametype+'_price_'+counterValue
                ,xtype        : 'numberfield'
                ,fieldLabel    : 'Price'
                ,width        : 60
                ,allowBlank    : true
            },{
                xtype    : 'displayfield'
                ,html    : '<div class="img-delete" onclick="removeFormFields(\''+item+'_'+counterValue+'\');"></div>'
                ,height    : 16
            }]
        });
        console.log(a);
        
        fieldset.doLayout();
        
        counterField.setValue(counterValue);
    }
    
    removeFormFields = function(id) {
        Ext.getCmp(id).destroy();
    }
    It would be great if you could help me... Currently I'm using Ext 3.3.1 .

    Thanks in advance.
    Thven90

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Vote Rating
    748
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You shouldn't have to execute the destroy method, you should just do fieldset.remove(compositefield);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    thven90 is on a distinguished road

      0  

    Default


    I just tried it, but the same error is thrown again in an endless loop

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Vote Rating
    748
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I tried this and it works for me:

    Code:
    var form = new Ext.form.FormPanel({
        renderTo : Ext.getBody(),
        width    : 400,
        height   : 400,
        title    : 'Test',
        items    : [
            {
                xtype : 'fieldset',
                title : 'Remove One',
                items : [
                    {
                        xtype     : 'compositefield',
                        hideLabel : true,
                        items     : [
                            {
                                xtype : 'displayfield',
                                value : 'Title',
                                width : 20
                            },
                            {
                                xtype : 'textfield',
                                flex  : 1
                            },
                            {
                                xtype : 'textfield',
                                flex  : 1
                            }
                        ]
                    }
                ]
            }
        ],
        tbar : [
            {
                text    : 'Remove Field',
                handler : function() {
                    var fieldset  = form.findByType('fieldset')[0],
                        composite = form.findByType('compositefield'),
                        c         = 0,
                        cNum      = composite.length;
    
                    for (; c < cNum; c++) {
                        fieldset.remove(composite[c]);
                    }
                }
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    thven90 is on a distinguished road

      0  

    Default


    I just tried to include your code to see wether it works for me.
    But it didn't.
    When I tried to run your code in an extra file, it worked. So maybe the error doesn't come from this piece of my code.
    I will try to figure out where it comes from!

    Thank you anyways.

    Thven90

  6. #6
    Sencha User
    Join Date
    Feb 2013
    Posts
    41
    Vote Rating
    0
    @naresh is on a distinguished road

      0  

    Default


    hi mitchellsimoens

    i
    have same requirement i want to add add remove field set in click of a button

    please reply

    thanks
    naresh

  7. #7
    Sencha User
    Join Date
    Feb 2013
    Posts
    41
    Vote Rating
    0
    @naresh is on a distinguished road

      0  

    Default


    same issue face when i add dynamic composite field here is my code please suggest where i i wrong:

    {
    xtype: 'fieldset',
    title: 'Room Properties',
    collapsible: true,
    id:'roompropertiesId',
    items:[new Ext.Button({
    text:'Add Property',
    handler: function(item){
    var fieldset = Ext.getCmp('roompropertiesId');
    if(fieldset.items.length >5){
    Ext.MessageBox.alert('Add Property','only five fields has been added');
    return;
    }
    counter.no = counter.no + 1;
    var a = fieldset.add({
    xtype : 'compositefield'
    ,
    id : 'compositefieldId'+counter.no
    ,
    name : 'name'+counter.no
    ,
    height : 22
    ,
    autoDestroy : true
    ,
    items : [{
    name : 'key'+counter.no
    ,
    fieldLabel : "Key",
    id : 'keyFieldId'+counter.no
    ,
    xtype : 'textfield'
    ,
    width : 50
    ,
    height : 22
    ,
    allowBlank : true
    },{
    name : 'value'+counter.no
    ,
    xtype : 'textfield',
    id : 'valueFieldId'+counter.no
    ,
    fieldLabel : 'Value'
    ,
    width : 50
    ,
    allowBlank : true
    },{
    xtype : 'displayfield',
    id:'removeFieldId'+counter.no,
    html : '<div class="img-delete" onclick="removeFormFields(\''+counter.no+'\');"><a href="#">Remove</a></div>'
    ,
    height : 16
    }]
    });
    fieldset.doLayout();
    removeFormFields = function(id) {
    var fieldset = roomPanel.findByType('fieldset')[0],
    composite = roomPanel.findByType('compositefield'+id),
    c = 0,
    cNum = composite.length;


    for (; c < cNum; c++) {
    alert(cNum)
    fieldset.remove(composite[c]);
    }
    // fieldset.remove('compositefieldId'+id);
    }
    }
    })]
    }

    thanks naresh

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