Results 1 to 3 of 3

Thread: Problem trying to add button to toolbar on htmleditor

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Boca Raton, FL
    Posts
    94

    Default Problem trying to add button to toolbar on htmleditor

    Version: 2.2.1

    Problems:
    1) When using a render listener to add an button to
    Ext.Toolbar.Button to an
    Ext.form.HtmlEditor, I have what appears to duplication of some images from the pre-existing font/size/justification buttons overlaying my button text.



    2)When trying to use the render listener, the input area now adds a vertical scrollbar in the middle of the area. I ran into this problem attempting to use autoWidth as well, but gave up on that and just defined a fixed width.

    The action is occruing around line 61 of test.js.

    Problem 2 may have to do with the doLayout() on line 69, however, it would be nice to have autoWidth on htmleditor also work, but if it wont, it wont.

    Files:
    looks like my code formatting got eaten

    test.html:
    PHP Code:
    <html>
     <
    head>
      <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <
    title>test page</title>
      <
    link rel="stylesheet" type="text/css" href="/Javascript/ext-2.2.1/resources/css/ext-all.css" />
       <
    script type="text/javascript" src="/Javascript/ext-2.2.1/adapter/ext/ext-base.js"></script>
         <script type="text/javascript" src="/Javascript/ext-2.2.1/ext-all.js"></script>
      <script type="text/javascript" src="test.js"></script>
     </head>
     <body>
     </body>
    </html> 
    test.js
    PHP Code:
    var vp null;
    var 
    panel1 null;
    var 
    tree1 null;
    var 
    tabpanel1 null;
    var 
    statusbar1 null;
    var 
    statusbar2 null;
    var 
    accoridan1 null;
    Ext.onReady(function(){
        
    statusbar1 = new Ext.StatusBar({
            
    defaultText :   'default status text',
            
    text        :   'Ready',
            
    iconCls     :   'default-icon'
        
    });
        
    tree1 = new Ext.tree.TreePanel({
            
    title   :   'stuff',
            
    region  :   'west',
            
    split   :   true,
            
    width   :   300,
            
    collapsible true,
            
    root    :   []
    //      root    :   new Ext.tree.TreeNode({
    //          text    :   'bobotreeroot'
    //      })
        
    });
    Ext.QuickTips.init();
        
    accoridan1 = new Ext.Panel({
            
    layout  :   'accordion',
            
    defaults:   {
                            
    bodyStyle 'padding:15px'
                        
    },
            
    layoutConfig    :   {
                                    
    filltrue,
                                    
    titleCollapse true,
                                    
    animate         :   true,
                                    
    activeOnTop     :   false
                                
    },
            
    items   :   [
                            {
                                
    title   :   'Settings',
                                
    html    :   'bo bo bo',
                                
    autoHeighttrue
                            
    },
                            {
                                
    xtype   :   'panel',
    //                          layout  :   'form',
                                
    title   :   'Edit',
                                
    autoHeighttrue,
                                
    width   :   800,
                                
    items   :   [
                                                new 
    Ext.form.HtmlEditor({
                                                    
    id                  :   'myeditor',
                                                    
    height              :   300,
                                                    
    width               :   700,
                                                    
    enableColors        :   false,
                                                    
    enableSourceEdit    :   false,
                                                    
    enableLists         :   false,
                                                    
    enableLinks         :   false,
                                                    
    listeners           :   {
                                                                                
    'render'    :   function(component){
                                                                                    var 
    tbb1 = new Ext.Toolbar.Button({
                                                                                        
    text    :   'Preview and some other junk',
                                                                                        
    handler :   loadPreviewPane2
                                                                                    
    });
                                                                                    
    component.getToolbar().add(new Ext.Toolbar.Separator({}));
                                                                                    
    component.getToolbar().add(tbb1);
    //                                                                              component.getToolbar().doLayout();
                                                                                
    }
                                                                            }
                                                }),
                                                new 
    Ext.Button({
                                                    
    text    :   'preview',
                                                    
    iconCls :   '',
                                                    
    handler :   loadPreviewPane
                                                
    })
                                            ]
                            },
                            {
                                
    title   :   'Preview',
                                
    html    :   'go go go',
                                
    id      :   'bobobobo',
                                
    autoHeighttrue
                            
    }
                        ]
        });
        
    tabpanel1 = new Ext.TabPanel ({
            
    title   :   'mytabpanel',
            
    region  :   'center',
            
    activeTab   :   0,
            
    items   :   [
                            {
                                
    title   :   'tab1',
                                
    closable:   true,
    //                          autoHeight: true,
                                
    items:[accoridan1]
                            }
                        ]
        });
        
    panel1 = new Ext.Panel({
            
    title   :   'Manager',
            
    region  :   'center',
            
    layout  :   'border',
            
    items   :   [
                            
    tree1,
                            
    tabpanel1
                        
    ],
            
    bbar    :   statusbar1
        
    });
     
        
    vp = new Ext.Viewport({
            
    layout  :   'border',
            
    items   :   [
                            {
                                
    region      :   'center',
                                
    html        :   'bobo',
    //                          autoHeight  :   true,
                                
    border      :   false,
                                
    margins     :   '0 0 0 0'
                            
    },
                            
    panel1
                        
    ]
        });
     
    //  vp.add(panel1);
    //  panel1.render();
    });
    function 
    loadPreviewPane(buttonevObj)
    {
        var 
    newpanel = new Ext.Panel({
            
    title       :   'Preview',
            
    html        :   button.ownerCt.items.item(0).getValue(),
            
    id          :   'bobobobo2',
            
    autoHeight  true
        
    });
     
        
    button.ownerCt.ownerCt.remove(button.ownerCt.ownerCt.items.item(2).getId(), true);
        
    button.ownerCt.ownerCt.add(newpanel);
        
    button.ownerCt.ownerCt.doLayout();
        
    button.ownerCt.ownerCt.items.item(1).collapse();
        
    button.ownerCt.ownerCt.items.item(2).expand();
    }
    function 
    loadPreviewPane2(buttonevObj)
    {
        
    alert('preview tbb pressed');

    Last edited by jimmifett; 25 Feb 2009 at 3:12 PM. Reason: add image of error

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Boca Raton, FL
    Posts
    94

    Default

    added image to show the error.

  3. #3
    Ext User 72's Avatar
    Join Date
    Apr 2007
    Location
    Czech republic, EU
    Posts
    152

    Default

    I got same problem, but with difference that I am adding buttons directly to HtmlEditor.tb after render. Solution is dirty, but works.

    Set on button property:

    Text only
    Code:
    ,cls: 'x-btn-text no-icon'
    ,iconCls: 'no-icon'
    Icon with text
    Code:
    ,cls: 'x-btn-text-icon no-icon'
    ,iconCls: 'your-icon-class'
    Icon only
    Code:
    ,cls: 'x-btn-icon no-icon'
    ,iconCls: 'your-icon-class'

    CSS:
    Code:
    .no-icon { background-image: none !important; }
    72

Posting Permissions

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