1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Copenhagen
    Posts
    30
    Vote Rating
    0
    Igor.Szyporyn is on a distinguished road

      0  

    Default Ext.ux.plugin.form.field.SuffixLabel

    Ext.ux.plugin.form.field.SuffixLabel


    Adds a container for any type of form field at the end as a suffix.
    Will respect changes in size etc..
    Can change text dynamically also

    Screen shot 2013-12-13 at 2.21.25 PM.png

    An example could be a fieldcontainer built image picker/uploader like the one showed in the image above - where you want the extension written at the end - or think up an idea of your own .

    Note! The plugin will overwrite the setWidth(), hide() and show() methods of the component.

    You will be given 3 new methods on the component
    • getSuffixLabel - returns the suffix label component
    • getSuffixLabelText - returns the suffix label text
    • setSuffixLabelText - sets the suffix label text
    • syncSuffixLabel - will sync the size of the components
    Configure your component like this:
    Code:
    {  xtype: 'textfield',
      plugins: [
        {
          ptype: 'suffixlabel',
          label: 'Kg.'
        }
      ]
    }

    Code:
    Ext.define('Ext.ux.plugin.form.field.SuffixLabel', {
    
        alias: ['plugin.suffixlabel', 'plugin.suffixLabel', 'plugin.SuffixLabel'],
    
        extend: 'Ext.AbstractPlugin',
    
        statics: {
            textAttr: (function () {
    
    
                // first time initialization of closure
                var span = document.createElement('span');
                span.style.position = 'absolute';
                span.style.visibility = 'hidden';
                span.style.height = 'auto';
                span.style.width = 'auto';
                var s = document.getElementsByTagName('body')[0].appendChild(span);
    
    
                return {
                    pixWidth: function(t, cn) {
                        span.className = cn;
                        span.innerHTML = t;
                        return span.clientWidth;
                    }
                }
            })(),
            fn: {
                setWidth: function (n_width) {
    
    
                    var i_component = this,
                        i_suffixCmp = i_component.getSuffixLabel();
    
    
                    i_suffixCmp.setWidth(n_width);
    
    
                    i_component.syncSuffixLabel();
    
    
                    return i_component;
                },
                hide: function () {
    
    
                    this.getSuffixLabel().hide();
    
    
                    return this;
                },
                show: function () {
    
    
                    this.getSuffixLabel().show();
    
    
                    return this;
                },
                getSuffixLabel: function () {
    
    
                    var i_component = this,
                        i_suffixCmp = Ext.getCmp('suffixlabel-'+i_component.id);
    
    
                    return i_suffixCmp;
                },
                getSuffixLabelText: function () {
    
    
                    return this.suffixLabelText;
                },
                setSuffixLabelText: function (s_label) {
    
    
                    var i_component = this,
                        i_suffixCmp = i_component.getSuffixLabel(),
                        i_label = i_suffixCmp.down('[name=labeltext]');
    
    
                    i_component.suffixLabelText = s_label;
    
    
                    i_label.update(s_label);
    
    
                    i_component.syncSuffixLabel();
    
    
                    return i_component;
                },
                syncSuffixLabel: function () {
    
    
                    var i_component = this,
                        s_label = i_component.getSuffixLabelText(),
                        i_suffixCmp = i_component.getSuffixLabel(),
                        i_field = i_suffixCmp.down('[name=fieldcontainer]'),
                        i_label = i_suffixCmp.down('[name=labelcontainer]'),
                        n_fullWidth = i_suffixCmp.getWidth(),
                        n_labelWidth = Ext.ux.plugin.form.field.SuffixLabel.textAttr.pixWidth(s_label, 'x-panel-body') + 8,
                        n_fieldWidth = n_fullWidth - n_labelWidth,
                        n_fieldHeight = i_field.getHeight() - 3;
    
    
                    // Remember the margin of the label
                    i_field.setWidth(n_fieldWidth);
                    i_label.setWidth(n_labelWidth);
                    i_label.setHeight(n_fieldHeight);
                    i_component.setSize(n_fieldWidth);
                }
            }
        },
    
    
        constructor: function(o_settings) {
                
            var i_plugin = this,
                i_component = o_settings.cmp,
                s_label = o_settings.label;
    
    
            i_plugin.label = s_label;
        },
    
    
        init: function (i_component) {
    
    
            var i_plugin = this,
                s_label = i_plugin.label;
    
    
            i_plugin.pluginId = 'suffixlabel';
    
    
            Ext.Object.merge(i_component, Ext.ux.plugin.form.field.SuffixLabel.fn);
    
    
            i_plugin.initField(i_component, s_label);
        },
    
    
        buildField: function (i_component, s_label) {
    
    
            var i_plugin = this,
                i_parent = i_component.up(),
                i_wrapper,
                n_index = i_parent.items.indexOf(i_component);
    
    
            var a_extend = ['layout', 'anchor', 'width', 'minWidth'];
    
    
            i_wrapper = {
                xtype: 'fieldcontainer',
                id: 'suffixlabel-' + i_component.id,
                margin: '0 0 0 0',
                listeners: {
                    'afterrender': {
                        fn: function () {
    
    
                            var i_suffixLabel = i_component.getSuffixLabel(),
                                i_label = i_suffixLabel.down('[name=labeltext]');
    
    
                            Ext.apply(i_component, {
                                minWidth: 0
                            });
    
    
                            i_label.addClass('x-form-item-label-suffix');
    
    
                            i_component.setSuffixLabelText(s_label);
                        },
                        single: true
                    },
                    'resize': {
                        fn: function () {
                            i_component.syncSuffixLabel();
                        }
                    }
                },
                items: [
                    {
                        xtype: 'panel',
                        layout: 'hbox',
                        align: 'stretch',
                        border: false,
                        anchor: '100%',
                        defaults: {
                            border: false,
                            layout: 'anchor',
                            xtype: 'panel'
                        },
                        items: [
                            {
                                name: 'fieldcontainer',
                            },
                            {
                                name: 'labelcontainer',
                                items: [
                                    {
                                        name: 'labeltext',
                                        border: false,
                                        padding: '3px 0 0 5px'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            };
    
    
            Ext.Array.forEach(a_extend, function(s_prop) {
    
    
                var o_config = i_component.initialConfig;
    
    
                if ( o_config[s_prop] ) {
                    i_wrapper[s_prop] = o_config[s_prop];
                }
            });
    
    
            i_wrapper = i_parent.insert(n_index, i_wrapper);
    
    
            i_wrapper.down('[name=fieldcontainer]').add(i_component);
    
    
            return i_plugin;
        },
    
    
        initField: function (i_component, s_label) {
    
    
            var i_plugin = this,
                i_parent = i_component.up();
    
    
            if ( !i_parent ) {
                i_component.on({
                    'afterrender': {
                        fn: function (i_self) {
                            i_plugin.buildField(i_self, s_label);
                        },
                        single: true
                    }
                });
            }
            else {
                i_plugin.buildField(i_component, s_label);
            }
    
    
            return i_plugin;
        }
    });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,630
    Vote Rating
    399
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for sharing your code.

    Scott.

Thread Participants: 1

Tags for this Thread

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