Results 1 to 4 of 4

Thread: Please help with my tbar

  1. #1

    Default Please help with my tbar

    Hello all,
    I am trying to put a tool bar in my panel using the example at:
    http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html
    Absolute Layout Form

    but when I run it my words are on top of my images and my images seem to be repeating themselves.

    Here's a piece of my code:
    Code:
    var panel = new Ext.Panel({
     title:Ext.getDom('page-title').innerHTML
     ,id:'simplestbl'
     ,layout:'border'
     ,width:600
     ,height:400
     ,renderTo:Ext.getBody()
     ,tbar: [{
                text: 'Send',
                iconCls: 'icon-send'
            },'-',{
                text: 'Save',
                iconCls: 'icon-save'
            },{
                text: 'Check Spelling',
                iconCls: 'icon-spell'
            },'-',{
                text: 'Print',
                iconCls: 'icon-print'
            },'->',{
                text: 'Attach a File',
                iconCls: 'icon-attach'
            }]
    
    ...
    What is causing this?

    Thanks,
    Michael

  2. #2
    Sencha Premium Member MaximGB's Avatar
    Join Date
    Jun 2007
    Location
    Moscow, Russia
    Posts
    542

    Default

    What are the CSS rules for icon classes?
    Use the force - read the source.

  3. #3

    Default

    Code:
    .icon-send {
        background-image:url(../images/email_go.png) !important;
    }
    .icon-save {
        background-image:url(../images/disk.png) !important;
    }
    .icon-print {
        background-image:url(../images/printer.png) !important;
    }
    .icon-spell {
        background-image:url(../images/spellcheck.png) !important;
    }
    .icon-attach {
        background-image:url(../images/page_attach.png) !important;
    Basically I am using the layout-browser.css from the example.

  4. #4

    Default

    I tried the example at http://www.quizzpot.com/2009/08/tool...s-and-windows/ and had the exact same results. It might have something to do with my mac/browser. (tried on both firefox and safari)

    I even added in:
    Code:
    defaults:{
      iconAlign: 'top'
    }
    but icon is still directly behind text.

Posting Permissions

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