1. #1
    Sencha User conorarmstrong's Avatar
    Join Date
    Mar 2008
    Location
    Northern Ireland
    Posts
    224
    Vote Rating
    2
    conorarmstrong is on a distinguished road

      0  

    Default Ext.ux.form.ToolFieldSet - Fieldset that allows extra tools

    Ext.ux.form.ToolFieldSet - Fieldset that allows extra tools


    From what I can see the standard FieldSet component in ExtJS v4 doesn't provide an option for extra tools to be included beyond a collapse tool and a checkbox. This extension reintroduces the tools config option to allow the full range of tools as given shown in http://dev.sencha.com/deploy/ext-4.0...anel.Tool.html

    I'm not 100% on layout, but if anyone can advise how to perhaps show the tools on the far right of the fieldset legend, I'll gladly make the appropriate changes.

    Code:
    // vim: ts=4:sw=4:nu:fdc=4:nospell
    /**
    * @class Ext.ux.form.ToolFieldSet
    * @extends Ext.form.FieldSet
    *
    * A simple extension to allow inclusion of tools in a fieldset
    *
    * @author    Conor Armstrong
    * @copyright (c) 2011 Conor Armstrong
    * @date      02 May 2011
    * @version   0.1
    *
    * @license Ext.ux.form.ToolFieldSet.js is licensed under the terms of the Open Source
    * LGPL 3.0 license. Commercial use is permitted to the extent that the 
    * code/component(s) do NOT become part of another Open Source or Commercially
    * licensed development library or toolkit without explicit permission.
    * 
    * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
    * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
    *
    */
    
    Ext.define('Ext.ux.form.ToolFieldSet', {
      extend: 'Ext.form.FieldSet',
      alias: 'widget.toolfieldset',
      tools: [],
    
      initLegend: function() {
        var me = this,
        legendItems,
        legend = me.legend;
    
        // Create the legend component if needed and it hasn't been already
        if (!legend && (me.title || me.checkboxToggle || me.collapsible)) {
          legendItems = [];
    
          // Checkbox
          if (me.checkboxToggle) {
            legendItems.push(me.createCheckboxCmp());
          }
          // Toggle button
          else if (me.collapsible) {
            legendItems.push(me.createToggleCmp());
          }
    
          // Add Extra Tools
          if (me.tools) {
            legendItems.push(me.createToolsCmp());
          }
    
          // Title
          legendItems.push(me.createTitleCmp());
    
          legend = me.legend = Ext.create('Ext.container.Container', {
            baseCls: me.baseCls + '-header',
            ariaRole: '',
            getElConfig: function(){
              return {
                tag: 'legend',
                cls: this.baseCls
              };
            },
            items: legendItems
          });
        }
    
        // Make sure legend is rendered if the fieldset is rendered
        if (legend && !legend.rendered && me.rendered) {
          me.legend.render(me.el, me.body); //insert before body element
        }
      },
    
      createToolsCmp: function() {
        var me = this, toolArray=[];
        for (var i=0; i<me.tools.length; i++) {
          toolArray.push(Ext.create('Ext.panel.Tool', me.tools[i]));
        }
        me.tools=toolArray;
        return me.tools;
      }
    
    });
    ------------------------------------------
    Conor Armstrong
    tw: @evathedog
    web: rockstown.com

    Ext.ux.form.AutoCombo
    Ext.ux.SimpleIFrame
    Ext.ux.form.ToolFieldSet

    Knowledge is realising that the street is one-way, wisdom is looking both directions anyway.

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2010
    Posts
    8
    Vote Rating
    0
    EASA.DEV is on a distinguished road

      0  

    Lightbulb This works in ExtJS 4.1.3

    This works in ExtJS 4.1.3


    Your code didn't work for me in ExtJS 4.1.3. Actually I don't understand how this ever worked, since there's no initLegend method in Ext.form.FieldSet.

    In any case, this version works in ExtJS 4.1.3:

    Code:
    Ext.define('Ext.ux.form.ToolFieldSet', {
        extend: 'Ext.form.FieldSet',
        alias: 'widget.toolfieldset',
        tools: [],
    
        createLegendCt: function () {
            var me = this,
                items = [],
                legend = {
                    xtype: 'container',
                    baseCls: me.baseCls + '-header',
                    id: me.id + '-legend',
                    autoEl: 'legend',
                    items: items,
                    ownerCt: me,
                    ownerLayout: me.componentLayout
                };
    
            // Checkbox
            if (me.checkboxToggle) {
                items.push(me.createCheckboxCmp());
            } else if (me.collapsible) {
                // Toggle button
                items.push(me.createToggleCmp());
            }
            // Add Extra Tools
            if (Ext.isArray(me.tools)) {
                for(var i = 0; i < me.tools.length; i++) {
                    items.push(me.createToolCmp(me.tools[i]));
                }
            }
            // Title
            items.push(me.createTitleCmp());
    
            return legend;
        },
    
        createToolCmp: function(toolCfg) {
            var me = this;
            Ext.apply(toolCfg, {
                xtype:  'tool',
                width:  15,
                height: 15,
                id:     me.id + '-tool-' + toolCfg.type,
                scope:  me
            });
            return Ext.widget(toolCfg);
        }
    
    });

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    1
    pavleg is on a distinguished road

      0  

    Default ExtJS 4.2 fix

    ExtJS 4.2 fix


    Hi,

    In ExtJS 4.2 legend is too wide. To fix it add shrinkWrap: true to legend configuration.

    Regards

Similar Threads

  1. Providing tools item in FieldSet configuration (v2.0.1 )
    By mono blaine in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 28 May 2009, 8:38 AM
  2. [CLOSED] Extra </form> tag in forum page
    By mankz in forum Ext 2.x: Bugs
    Replies: 1
    Last Post: 4 Aug 2008, 5:49 AM
  3. Example form using extra spacing
    By rflosi in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 5 May 2008, 11:29 PM
  4. Replies: 3
    Last Post: 8 Nov 2007, 1:47 AM

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi