1. #1
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    19
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default Improved ToolbarLayout menu (CheckItem for buttons with enableToggle = true)

    Improved ToolbarLayout menu (CheckItem for buttons with enableToggle = true)


    Hi,

    I've customized the ToolbarLayout, so that buttons with enableToggle = true become Ext.menu.CheckItems in the toolbar overflow menu ("more").

    Code:
    Ext.override(Ext.layout.ToolbarLayout, {
        // private
        addComponentToMenu: function(m, c){
            if(c instanceof Ext.Toolbar.Separator){
                m.add('-');
            }else if(typeof c.isXType == 'function'){
                if(c.isXType('splitbutton')){
                    m.add(this.createMenuConfig(c, true));
                }else if(c.isXType('button')){
                	var cfg = this.createMenuConfig(c, !c.menu);
                	if (c.initialConfig.enableToggle) {
                		cfg['xtype'] = 'menucheckitem';
                		cfg['checked'] = c.pressed;
                		if (c.toggleGroup) cfg['group'] = c.toggleGroup;
               		cfg['listeners'] = {
                			'checkchange': function(mi, ch) {
                				c.toggle(ch);
                			}
                		};
                	}
                    cfg['text'] = c.text || c.menuText;
                    m.add(cfg);
                }else if(c.isXType('buttongroup')){
                    m.add('-');
                    c.items.each(function(item){
                         this.addComponentToMenu(m, item);
                    }, this);
                    m.add('-');
                }
            }
        }
    });
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  2. #2
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    I did the same thing. You can also add 'group' so that it convert radio groups, set text to 'text||menuText', so you can use menuText as an option for buttons that don't have text usually (think html editor) but where it would be nice when they convert into menus. You might give that a try. It is an easy couple of lines; I'd add them but I can't pull from memory and I don't have access at the moment. I'll try and pull that out tomorrow. Then I can put up the buttongroup -> overflow menu fixes too...

  3. #3
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    19
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default


    Hi steven,
    thanks for your hints! I updated the first post with that lines.
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  4. #4
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    It can all be done in the createMenuItemCfg method:

    Code:
        createMenuConfig: function(c, hideOnClick){
            return {
                text: c.menuText||c.text,
                iconCls: c.iconCls,
                icon: c.icon,
                itemId: c.itemId,
                disabled: c.disabled,
                handler: c.handler,
                group: c.toggleGroup,
                checked: c.toggleGroup?c.pressed:undefined,
                scope: c.scope,
                menu: c.menu,
                listeners:c.toggleGroup?{'checkchange': function(mi, ch){c.toggle(ch);}}:undefined,
                hideOnClick:hideOnClick
            };
        },
    Note, I removed the useless delete statements, etc. Also, I actually had menuText first. I figure it is an override for the menu if you have both that and text, and otherwise used if no text there for the button. This doesn't mess with the logic of addComponentToMenu (which I have also changed to fix the bugs with buttongroups).

  5. #5
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    live example?

    thanks,

  6. #6
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    demo?
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  7. #7
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    Well, I could use some help searching for bugs from our move to Ext3:

    Sign up at http://www.visigroups.com/ I took the token requirement off. When you are in the manager area, and edit the whole website, you can create a 'page'. Editing pages gives the floating toolbar that you can resize for testing how it works. Sorry there isn't an easier way to get to it (yet).

    Actually, I take that back. At the same site with firebug enabled, you can enter this into the console:

    Code:
    new Ext.Window({
        width:600,
        height:300,
        layout:'fit',
        border:false,
        items:{
            xtype:'htmleditor'
        }
    }).show()
    and this:

    Code:
    new Ext.Window({
        width:600,
        height:300,
        layout:'fit',
        border:false,
        items:{
            xtype:'htmleditor',
            tbFloat:true,
            tbTitles:true
        }
    }).show()

  8. #8
    Sencha User
    Join Date
    Mar 2008
    Posts
    7
    Vote Rating
    0
    emsttam is on a distinguished road

      0  

    Default HtmlEditor and ButtonGroup

    HtmlEditor and ButtonGroup


    Are you able to share how you got buttongroups working on HtmlEditor ?

  9. #9
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    I made my own version of it that is plugin based. It is in the Ext3 extensions forum:

    http://extjs.com/forum/showthread.php?t=73183

    (PS: It really could use a better API, I was working through how to do it, but got it working well enough that I never cleaned it up...)
    Last edited by stever; 10 Aug 2009 at 11:00 AM. Reason: added url

  10. #10
    Ext User
    Join Date
    Dec 2008
    Posts
    20
    Vote Rating
    0
    tolichsvs is on a distinguished road

      0  

    Default


    Quote Originally Posted by stever View Post
    Well, I could use some help searching for bugs from our move to Ext3:

    Sign up at http://www.visigroups.com/ ...
    Steven,
    I like Sign in/Register button menu. Shared code?
    [IMG]2010-05-29_10-51_Visigroups.jpg[/IMG]
    2010-05-29_10-51_Visigroups.jpg