Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default [CLOSED-883] CompositeField and markInvalid()

    [CLOSED-883] CompositeField and markInvalid()


    See attached.

    Marking the composite field invalid doesn't do the red highlighting business around the text field. But it does put the icon to the right of the field.

    Marking the text field invalid doesn't do anything, FWIW.
    Attached Images

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Can you post some code with this one please.

  3. #3
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    Code:
    Ext.ux.form.FlashVarsEditor = function(definition, callback) {
    	var title = 'Edit Flash Variable';
    	if (!definition.name.length) {
    		title = 'New Flash Variable';
    	}
    	var id = ++pwp.uniqueid;
    	var dialog = new Ext.Window({
    		title: title,
    		modal: true,
    		width: 500,
    		height: 130,
    		layout: 'fit',
    		items: [
    		    {
    			    layout: 'form',
    			    frame: true,
    			    labelWidth: 75,
    			    items: [
    			        {
    				        xtype: 'textfield',
    				        id: 'definition-name-' + id,
    				        emptyText: 'Name is required',
    				        value: definition.name,
    				        itemCls: 'required',
    				        fieldLabel: 'Name',
    				        anchor: '-21',
    				        msgTarget: 'side'
    			        },
    			        {
    				        xtype: 'compositefield',
    				        id: 'definition-value-composite-'+id,
    				        fieldLabel: 'Value',
    				        itemCls: 'required',
    				        anchor: '-21',
    				        msgTarget: 'side',
    				        items: [
    				            {
    					            xtype: 'textfield',
    					            id: 'definition-value-' + id,
    					            emptyText: 'Value is required',
    					            anchor: '100%',
    					            flex: 100,
    					            value: definition.value
    				            },
    				            {
    					            xtype: 'button',
    					            icon: icons.internalLinkAdd,
    					            handler: function() {
    					            }
    				            },
    				            {
    					            xtype: 'button',
    					            icon: pwp.icons.assetLinkAdd,
    					            handler: function() {
    					            }
    				            }
    				        ]
    			        }
    			    ]
    		    }
    		],
    		buttonAlign: 'center',
    		buttons: [
    		    {
    			    text: 'OK',
    			    handler: function() {
    				    var error = false;
    				    var cmp = Ext.getCmp('definition-name-' + id);
    				    var name = cmp.getValue();
    				    if (name.length < 1) {
    					    cmp.markInvalid('Name is a required field');
    					    error = true;
    				    }
    				    cmp = Ext.getCmp('definition-value-composite-' + id);
    				    var value = Ext.getCmp('definition-value-'+id).getValue();
    				    if (value.length < 1) {
    //					    Ext.getCmp('definition-value-'+id).markInvalid('Value is a required field');  <-- does nothing
    					    cmp.markInvalid('Value is a required field');
    					    error = true;
    				    }
    				    if (error) {
    					    return;
    				    }
    				    if (callback) {
    					    callback({
    						    name: name,
    						    value: value
    					    });
    					    dialog.close();
    				    }
    			    }
    		    },
    		    {
    			    text: 'Cancel',
    			    handler: function() {
    				    dialog.close();
    			    }
    		    }
    		]
    	});
    	dialog.show();
    };

  4. #4
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    We experimented with this quite a bit - how would you prefer it to behave instead?
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  5. #5
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    It's putting the icon to the right, properly.

    I think it should do markInvalid() on all the fields within the composite field?

    Or if you markInvalid() a field within the composite field, it should put the icon to the right of the composite field.

    The latter is probably better. You might have a composite field with, say, 3 text fields and only the middle one is required. If you mark the middle one invalid, the whole field is marked invalid properly with only that middle one with the red highlight. If the 2nd and 3rd fields are required, you should be able to call markInvalid() on both and get the red highlights on both AND the icon to the right of the composite field. Interesting decision is which markInvalid() text gets shown as the tooltip ;-)

  6. #6
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Right - the intended behavior here was that the individual subfields could still be targeted to have errors, and the composite as a whole can have a higher-level error (say if two of the subfields were both correct, but in conflict with one another).

    I'm not sure this is a bug - you can still target those subfields as before.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

Similar Threads

  1. Replies: 6
    Last Post: 13 Aug 2010, 4:15 PM
  2. Replies: 7
    Last Post: 20 Jul 2010, 1:19 AM
  3. [CLOSED] Field markInvalid not make invalid the formPanel
    By drenda81 in forum Ext GWT: Bugs (1.x)
    Replies: 3
    Last Post: 27 May 2010, 1:11 AM
  4. [CLOSED] CompositeField centering plus flex
    By tr888 in forum Ext Designer: Bugs
    Replies: 2
    Last Post: 8 May 2010, 4:04 AM
  5. [CLOSED][3.0rc1.1] markInvalid bug
    By mschwartz in forum Ext 3.x: Bugs
    Replies: 2
    Last Post: 16 Aug 2009, 11:43 AM

Thread Participants: 2