Results 1 to 6 of 6

Thread: fieldSet dosent remove elements correctly

  1. #1
    Sencha Premium User genTaliaru's Avatar
    Join Date
    Jan 2009
    Posts
    51

    Default fieldSet dosent remove elements correctly

    Code:
    var fs = $E("fsObjectModuleSettings"); //fieldset
    fs.add(
    {
        fieldLabel: tra("event_date"),
        emptyText: tra("insert_date"),
        xtype: "datefield",
        width: 100,
        allowBlank: false,
        id: "eventDate",
        name: 'eventDate'
    })
    fs.setVisible(true);
    fs.doLayout(false,true);
    now is this field eventDate has error. and then
    Code:
    var fs = $E("fsObjectModuleSettings");
    fs.items.each(function(item) {
        item.clearInvalid();
    })
    fs.removeAll(true);
    fs.doLayout(true, true);
    gives error Element.alignToXY with an element that doesn't exist

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335

    Default More code

    Hi,

    We need more code of your code for solution. I think that your errors caused of other things.

    Thanks
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha Premium User genTaliaru's Avatar
    Join Date
    Jan 2009
    Posts
    51

    Default You dont need more code

    Yuu can try similar code in http://dev.sencha.com/deploy/ext-3.3...m/dynamic.html browser console, firebug or google chrome
    First run this in console
    Code:
    var fs = Ext.getCmp("ext-comp-1017"); //fieldsetfs.add(
    {
        fieldLabel: "eventDate",
        emptyText: "insert_date",
        xtype: "datefield",
        width: 100,
        allowBlank: false,
        id: "eventDate",
        name: 'eventDate'
    })
    fs.setVisible(true);
    fs.doLayout(false,true);
    Then focus the eventDate fiel and then blur the input, then the input gets a error status
    then run the following code in console.
    Code:
    var fs = Ext.getCmp("ext-comp-1017");
    fs.items.each(function(item) {
    item.clearInvalid();
    })
    fs.removeAll(true);
    fs.doLayout(true, true);
    Then comes the same error "Element.alignToXY with an element that doesn't exist""
    screen2.jpg

  4. #4
    Sencha User
    Join Date
    May 2012
    Location
    Blumenau - Brazil
    Posts
    50

    Default

    Your example works, just remove the last doLayout call.

    Try this

    Code:
    var fs = Ext.getCmp("ext-comp=1017");
    fs.add({
        fieldLabel : "eventDate"
       ,emptyText : "insert_date"
       ,xtype : "datefield"
       ,width : 100
       ,allowBlank : false
       ,id : "eventDate"
       ,name : "eventDate"
    });
    
    fs.setVisible(true);
    fs.doLayout(false, true);
    focus and blur the field

    Code:
    fs.items.each(function(item)
    {
        item.clearInvalid();
    });
    fs.removeAll(true);

  5. #5
    Sencha Premium User genTaliaru's Avatar
    Join Date
    Jan 2009
    Posts
    51

    Default this is no use

    ok this works, but later if i add another fields, then i must call the doLayout
    and then the error stills pops up

  6. #6
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335

    Default You should override

    First of all, I should say that we couldn't find solution without your code examples.I didnt reproduce error in my environment because i didnt define message target!
    Code:
    Ext.form.Field.prototype.msgTarget = 'side';
    Anyway, the problem is causing of firing 'afterlayout' & 'expand' event of field component after its destroyed. You should change Ext js lib code (or override) for solution:

    In the Ext.form.MessageTargets object of the class Ext.Form.Field:
    Code:
    'side' : {
            mark: function(field, msg){
                field.el.addClass(field.invalidClass);
                if(!field.errorIcon){
                    var elp = field.getErrorCt();
                    
                    if(!elp){
                        field.el.dom.title = msg;
                        return;
                    }
                    field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
                    if (field.ownerCt) {
                        field.ownerCt.on('afterlayout', field.alignErrorIcon, field);
                        field.ownerCt.on('expand', field.alignErrorIcon, field);
                    }
                    field.on('resize', field.alignErrorIcon, field);
                    field.on('destroy', function(){
                        Ext.destroy(this.errorIcon);
                    }, field);
                }
                field.alignErrorIcon();
                field.errorIcon.dom.qtip = msg;
                field.errorIcon.dom.qclass = 'x-form-invalid-tip';
                field.errorIcon.show();
            },
            clear: function(field){
                field.el.removeClass(field.invalidClass);
                if(field.errorIcon){
                    field.errorIcon.dom.qtip = '';
                    field.errorIcon.hide();
                }else{
                    field.el.dom.title = '';
                }
            }
        }

    You should use 'mon' , and you should change these lines like this:

    Code:
    field.mon(field.ownerCt,'afterlayout', field.alignErrorIcon, field);
    field.mon(field.ownerCt,'expand', field.alignErrorIcon, field);
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •