1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default Toolbar Rendering Issues

    Toolbar Rendering Issues


    I was going to post this in Bugs, but since Toolbar is still kind of 'first pass' functionality, I figured it could go here for further discussion, and serve as ref to anyone who might come across this issue.

    There's a problem with toolbar styling in FF (looks OK in IE). On mouseover, the highlight does not always match the size of the toolbar item. In the following example when you mouseover 'Add', it's hilighted correctly. When you mouseover 'Delete' the hilight is only partly over the text.

    This is b/c of the width:16px in .ytoolbar .ytb-button-inner, which is applied regardless of whether there's a background image or not (IE seems to ignore the width).

    Looking at the generated HTML, I see this.
    Code:
    <span class="ytb-button-inner undefined">Add</span>
    <span class="ytb-button-inner undefined">Delete</span>
    I haven't dug deeper yet to see if 'undefined' is just a result of not specifying an image in the button config. In the short term you can change to 'width:auto' to handle text-only toolbar items. Here's a sample to illustrate the problem.

    Code:
    	<script type="text/javascript" src="/yui/build/utilities/utilities.js"></script>
    	<script type="text/javascript" src="/yui-ext/yui-ext.js"></script>
    
    	<link rel="stylesheet" type="text/css" href="/yui-ext/resources/css/yui-ext.css" />
    	<link rel="stylesheet" type="text/css" href="../examples.css" />
    
    <script type="text/javascript">
    var exToolbar = {
    
    	addRow: function() {
    		alert('add');
    	},
    	deleteRow: function() {
    		alert('delete');
    	},
    
        init: function() {
    		var tb = new YAHOO.ext.Toolbar('exToolbar');
    		tb.addButton({
    			text: 'Add',
    			click: this.addRow
    		});
    		tb.addSeparator();
    		tb.addButton({
    			text: 'Delete',
    			click: this.deleteRow
    		});
        }
    }
    YAHOO.ext.EventManager.onDocumentReady(exToolbar.init, exToolbar, true);
    
    </script>
    </head>
    <body>
    <h1>Toolbar Example</h1>
    
    <div class="ygrid-mso" style="width:530px;">
    	<div id="exToolbar"></div>
    </div>
    </body>

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    All toolbar buttons must have a class, and I would guess you haven't provided a class (hence the "undefined"). Toolbar buttons are by default icon only (16x16) like a standard toolbar. They have been setup with all the css properties so all they need is the background-image css property. If you are setting up a standard toolbar with icons, this is very convenient.

    To create a button with text and icon (or just text) you have to provide a class with the appropriate css. I've added two classes in toolbar.css in svn for you. One is .ytb-text-icon and the other is .ytb-text-only. In your case you would use ytb-text-only as your class name and it will fix the issue.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Cool thanks.

    It's not really documented, but you can pass 'disabled:true/false' in the config. Can you add a line in init() to do
    Code:
    this.setDisabled(this.disabled);
    that way the effects will match if you call disable() or set it via config

Similar Threads

  1. ToolBar issues
    By rodiniz in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 8 Mar 2007, 5:01 AM
  2. Minor grid paging toolbar issues
    By tryanDLS in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 5 Mar 2007, 9:01 AM
  3. Rev 8: Toolbar issues with IE7?
    By js1234224 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 22 Feb 2007, 5:28 AM
  4. Replies: 1
    Last Post: 8 Jan 2007, 5:27 PM
  5. grid toolbar display issues in IE
    By sjivan in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 4 Dec 2006, 10:16 PM

Thread Participants: 1