PDA

View Full Version : Problem trying to add button to toolbar on htmleditor



jimmifett
25 Feb 2009, 9:32 AM
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.

http://i706.photobucket.com/albums/ww67/jimmifett/buttonerror.gif

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:

<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


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 : {
fill: true,
titleCollapse : true,
animate : true,
activeOnTop : false
},
items : [
{
title : 'Settings',
html : 'bo bo bo',
autoHeight: true
},
{
xtype : 'panel',
// layout : 'form',
title : 'Edit',
autoHeight: true,
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',
autoHeight: true
}
]
});
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(button, evObj)
{
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(button, evObj)
{
alert('preview tbb pressed');
}

jimmifett
25 Feb 2009, 3:13 PM
added image to show the error.

72
4 Mar 2009, 7:00 AM
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


,cls: 'x-btn-text no-icon'
,iconCls: 'no-icon'


Icon with text


,cls: 'x-btn-text-icon no-icon'
,iconCls: 'your-icon-class'


Icon only


,cls: 'x-btn-icon no-icon'
,iconCls: 'your-icon-class'



CSS:


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