Results 1 to 4 of 4

Thread: Scalable (wrapping) Toolbar for when toolbar needs to wrap

  1. #1
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    London
    Posts
    194

    Default Scalable (wrapping) Toolbar for when toolbar needs to wrap

    Here's a little extension I knocked up today, i'm using an HTML editor that I needed to work when it's not very wide, so the buttons need to wrap (booyakasha and all that)

    PHP Code:

    Ext
    .ux.ScalableToolbar = function(elconfig){
       
    Ext.ux.ScalableToolbar.superclass.constructor.call(thiselconfig);
    };

    Ext.extend(Ext.ux.ScalableToolbarExt.Toolbar, {
        
        
    render : function(ct){
            
    this.el Ext.get(ct);
            if(
    this.cls){
                
    this.el.addClass(this.cls);
            }
            
            
    this.el.update('<div class="x-toolbar x-small-editor"><div class="tbHolder"></div></div>');
            
    this.tr this.el.child("div.tbHolder"true);
            var 
    autoId 0;
            
    this.items = new Ext.util.MixedCollection(false, function(o){
                return 
    o.id || ("item" + (++autoId));
            });
            if(
    this.buttons){
                
    this.add.apply(thisthis.buttons);
                
    delete this.buttons;
            }  
        },

        
    addClear : function(){
            var 
    clear document.createElement('div');
            
    clear.className='clear';
            
            
    this.tr.appendChild(clear);
        },
        
        
    nextBlock : function(){
            var 
    table document.createElement("table");
            var 
    tr document.createElement("tr");
            var 
    td document.createElement("td");
            
            
    table.cellspacing='0';
            
    table.className='x-tbLeft';
            
            
    table.appendChild(tr);
            
    tr.appendChild(td);
            
    this.tr.appendChild(table);

            return 
    td;
        }
    }); 
    Add the following CSS

    Code:
    .clear {
        clear:both;
        width:auto;
        min-height:0 !important;
        height:0 !important;
        line-height:0 !important;
        font-size:0 !important;
        float:none !important;
        padding:0 !important;
        border:0 !important;
    }
    
    /* toolbar overrides */
    .x-tbLeft {
        float:left;
        height:25px;    
    }
    
    .x-toolbar{
        background:#C9DEFA url(/CMS/js/EXT/resources/images/default/layout/panel-title-light-bg.gif) repeat-x;
    }
    The bottom style is used because the background image is only 98px high

    use in the following fashion

    PHP Code:

    var tb = new Ext.ux.ScalableToolbar(this.wrap.dom.firstChild);
    tb.el.on('click', function(e){
                
    e.preventDefault();
            });

            
    tb.add(
                
    btn('insertparagraph',false),
                
    '-'
            
    );

            if(
    this.enableFont && !Ext.isSafari){
                
    this.fontSelect tb.el.createChild({
                    
    tag:'select',
                    
    tabIndex: -1,
                    
    cls:'x-font-select',
                    
    htmlthis.createFontOptions()
                });
                
    this.fontSelect.on('change', function(){
                    var 
    font this.fontSelect.dom.value;
                    
    this.relayCmd('fontname'font);
                    
    this.deferFocus();
                }, 
    this);
                
    tb.add(
                    
    this.fontSelect.dom,
                    
    '-'
                
    );
            };

            if(
    this.enableFormat){
                
    tb.add(
                    
    btn('bold'),
                    
    btn('italic'),
                    
    btn('underline')
                );
            };

            if(
    this.enableFontSize){
                
    tb.add(
                    
    '-',
                    
    btn('increasefontsize'falsethis.adjustFont),
                    
    btn('decreasefontsize'falsethis.adjustFont)
                );
            };

            if(
    this.enableColors){
                
    tb.add(
                    
    '-', {
                        
    id:'forecolor',
                        
    cls:'x-btn-icon x-edit-forecolor',
                        
    clickEvent:'mousedown',
                        
    tooltipeditor.buttonTips['forecolor'] || undefined,
                        
    tabIndex:-1,
                        
    menu : new Ext.menu.ColorMenu({
                            
    allowReselecttrue,
                            
    focusExt.emptyFn,
                            
    value:'000000',
                            
    plain:true,
                            
    selectHandler: function(cpcolor){
                                
    this.execCmd('forecolor'Ext.isSafari || Ext.isIE '#'+color color);
                                
    this.deferFocus();
                            },
                            
    scopethis,
                            
    clickEvent:'mousedown'
                        
    })
                    }, {
                        
    id:'backcolor',
                        
    cls:'x-btn-icon x-edit-backcolor',
                        
    clickEvent:'mousedown',
                        
    tooltipeditor.buttonTips['backcolor'] || undefined,
                        
    tabIndex:-1,
                        
    menu : new Ext.menu.ColorMenu({
                            
    focusExt.emptyFn,
                            
    value:'FFFFFF',
                            
    plain:true,
                            
    allowReselecttrue,
                            
    selectHandler: function(cpcolor){
                                if(
    Ext.isGecko){
                                    
    this.execCmd('useCSS'false);
                                    
    this.execCmd('hilitecolor'color);
                                    
    this.execCmd('useCSS'true);
                                    
    this.deferFocus();
                                }else{
                                    
    this.execCmd(Ext.isOpera 'hilitecolor' 'backcolor'Ext.isSafari || Ext.isIE '#'+color color);
                                    
    this.deferFocus();
                                }
                            },
                            
    scope:this,
                            
    clickEvent:'mousedown'
                        
    })
                    }
                );
            };

            if(
    this.enableAlignments){
                
    tb.add(
                    
    '-',
                    
    btn('justifyleft'),
                    
    btn('justifycenter'),
                    
    btn('justifyright')
                );
            };

            if(!
    Ext.isSafari){
                if(
    this.enableLinks){
                    
    tb.add(
                        
    '-',
                        
    btn('createlink'falsethis.createLink)
                    );
                };

                if(
    this.enableLists){
                    
    tb.add(
                        
    '-',
                        
    btn('insertorderedlist'),
                        
    btn('insertunorderedlist')
                    );
                }
                if(
    this.enableSourceEdit){
                    
    tb.add(
                        
    '-',
                        
    btn('sourceedit'true, function(btn){
                            
    this.toggleSourceEdit(btn.pressed);
                        })
                    );
                }
            }
            
    tb.addClear();//after all buttons are added insert this line
            
    this.tb tb
    I'm using the HTML editor with it but it should work with any elements. I hadn't added the UX namespace before writing this post so that may blow it up.
    Attached Images Attached Images

  2. #2
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    London
    Posts
    194

    Default

    This could be cleaned up to use blocks of floats around grouped items so that things like B/I/U are always together but I just needed it to wrap.

    We could convert this completely to Div based too but I thought the easier the superclass is the less effort we have to go to when we upgrade.

    Hope it works for you.

    Rowan

  3. #3
    Ext User
    Join Date
    Apr 2007
    Posts
    73

    Default

    Nice Rowan! thanks a lot... this will come in handy

  4. #4
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    London
    Posts
    194

    Default

    The remove function may need looking at, I just needed it to wrap but it should be pretty easy to extend it to work with that.

Posting Permissions

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