FormLayout : Prefix/Suffix to form fields

[tof]

Juste a modification of FormLayout to have suffix and/or prefix on fields.
Ex :

[PHP]new Ext.form.FormPanel({
...,
items : [{
xtype : 'fieldset',
name : 'price',
fieldLabel : 'Price',
suffix : '

[mystix]

for some strange reason vBulletin erased practically all of @tof's code.

i'm reposting what i copied from the post, plus a fix by @condor, plus some custom-added stuff to display an asterisk for allowBlank:false fields (in a <span> tag with a class of "x-form-field-asterisk" -- add your own custom CSS to style it):

Ext.override(Ext.layout.FormLayout, {
    // enable Field prefix / suffix (additional text before/after the input element)
    // by @tof -- http://extjs.com/forum/showthread.php?t=15252
    renderItem : function(c, position, target) {
        if (c && !c.rendered && c.isFormField && c.inputType != 'hidden') {
            var args = [
                c.id,
                c.fieldLabel + (c.allowBlank? '' : '<span class="x-form-field-asterisk"> * </span>'),

                // bugfix for "FormLayout labelStyle breaks hideLabels, labelAlign and labelWidth"
                // by @condor -- http://www.extjs.com/forum/showthread.php?p=228652#post228652
                (this.labelStyle || '') + ';' + (c.labelStyle || ''),

                this.elementStyle || '',
                typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
                (c.itemCls || this.container.itemCls || '') + (c.hideLabel ? ' x-hide-label' : ''),
                c.clearCls || 'x-form-clear-left'
            ];
            if (typeof position == 'number') {
                position = target.dom.childNodes[position] || null;
            }
            if (position) {
                this.fieldTpl.insertBefore(position, args);
            } else {
                this.fieldTpl.append(target, args);
            }

            var newEl,
                fEl = Ext.get('x-form-el-' + c.id);

            c.render(fEl);

            if (c.prefix) { // Field prefix
                if (c.isXType('trigger')) {
                    newEl = c.wrap.insertHtml('afterBegin',  '<span>' + c.prefix + '&nbsp;</span>', true);
                    c.el.setWidth(c.el.getWidth() - c.trigger.getWidth() - newEl.getWidth());
                } else {
                    newEl = fEl.insertHtml('afterBegin',  '<span>' + c.prefix + '&nbsp;</span>', true);
                    c.el.setWidth(c.el.getWidth() - newEl.getWidth());
                }
            }

            if (c.suffix) { // custom field suffix addition by @tof
                if (c.isXType('trigger')) {
                    newEl = c.wrap.insertHtml('beforeEnd', '<span>&nbsp;' + c.suffix + '</span>', true);
                    c.el.setWidth(c.el.getWidth() - c.trigger.getWidth() - newEl.getWidth());
                } else {
                    newEl = fEl.insertHtml('beforeEnd', '<span>&nbsp;' + c.suffix + '</span>', true);
                    c.el.setWidth(c.el.getWidth() - newEl.getWidth());
                }
            }
        } else {
            Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
        }
    }
});

[yroman]

I'd like to inquire how such modifications affect ExtJS update process? For example if I want to update ExtJS library to the next version, not major but minor, what is the probability that such fix will be broken?

Thank you!

[mystix]

I'd like to inquire how such modifications affect ExtJS update process? For example if I want to update ExtJS library to the next version, not major but minor, what is the probability that such fix will be broken?

Thank you!

i really wouldn't know.
all i know for sure is: there's only one way to find out.

[Celestemmcknight]

suffix_array is nil. What method is that code in and in what class? There are so many scripts in your game, one of them is probably calling that method before the prefix/suffix script expects it to be called.

[Animal]

Spammers eh?

Weird little people. Who knows what goes on in their tiny minds?

[ExtJSNewUser]

Hi Animal,

I need your help. I have a form with few fields in it. I want to set the labelAlign for certain fields like text areas. if it is TextArea the Label is on top of text Area. and if it is a regular text field they are normally side by side. only I want to change the alignment if it is a textarea in my form.
labelAlign:'top' is applying to whole form. if I put this

{
xtype: 'textarea',
name: 'txtUpdReason',
style: "background:#ededed;",
labelAlign: 'top',
readOnly: true,
height: 100,
width: 100,
labelAlign:'top',
anchor: '100%',
fieldLabel: 'Update Reasons'
}

No Effects.

[Animal]

Unfortunately, labelAlign is fixed at the Container level right now.

[ExtJSNewUser]

Thanks Animal

[adamvert]

In case anyone comes across this thread and discovers that the code above no longer works, here's an updated version for ExtJS 3.3.1:

Ext.override(Ext.layout.FormLayout, {
    renderItem : function(c, position, target) {
        if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
            var args = this.getTemplateArgs(c);
            if(Ext.isNumber(position)){
                position = target.dom.childNodes[position] || null;
            }
            if(position){
                c.itemCt = this.fieldTpl.insertBefore(position, args, true);
            }else{
                c.itemCt = this.fieldTpl.append(target, args, true);
            }
            if(!c.getItemCt){
                
                
                Ext.apply(c, {
                    getItemCt: function(){
                        return c.itemCt;
                    },
                    customItemCt: true
                });
            }
            c.label = c.getItemCt().child('label.x-form-item-label');
            if(!c.rendered){
                c.render('x-form-el-' + c.id);

                /* start extra code */
                var newEl,
                    fEl = Ext.fly('x-form-el-' + c.id);
                
                if (c.prefix) { // Field prefix
                    if (c.isXType('trigger')) {
                        newEl = c.wrap.insertHtml('afterBegin',  '<span>' + c.prefix + '&nbsp;</span>', true);
                        c.el.setWidth(c.el.getWidth() - c.trigger.getWidth() - newEl.getWidth());
                    } else {
                        newEl = fEl.insertHtml('afterBegin',  '<span>' + c.prefix + '&nbsp;</span>', true);
                        c.el.setWidth(c.el.getWidth() - newEl.getWidth());
                    }
                }
                /* end extra code */
                
            }else if(!this.isValidParent(c, target)){
                Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl());
            }
            if(this.trackLabels){
                if(c.hidden){
                    this.onFieldHide(c);
                }
                c.on({
                    scope: this,
                    show: this.onFieldShow,
                    hide: this.onFieldHide
                });
            }
            this.configureItem(c);
        }else {
            Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
        }
    }
}); 

I've only included the prefix, since that's all I needed, but it shouldn't be hard to add a suffix too.